shift

نقش بارگیری شرطی منابع در سئو SEO

نقش بارگیری شرطی منابع در سئو SEO

عاطفه
دسته: سئو  تگ ها: منابع شرطی چیست , چگونه بارگیری منابع سایت را مدیریت کنیم , چگونه استفاده از منابع جاوا اسکریپت در سایت را مدیریت کنیم , منابع جاوااسکریپت مشروط چیست

 

بارگیری منابع متفاوت برای کاربران موبایل و دسکتاپ

در تصویر بالا می‌بینیم که در یک صفحه دسکتاپ چندین مورد بارگذاری می‌شود ولی در یک صفحه موبایل فقط یک مورد بارگذاری می‌شود.
این مقاله نحوه چگونگی انجام این کار برای صفحاتتان و مزیت انجام آن را توضیح می‌دهد.


دکمه‌های شبکه اجتماعی به‌عنوان یک مثال



دکمه‌های شبکه‌های اجتماعی (گوگل پلاس، توییتر، فیس‌بوک و غیره) اغلب منابع سنگینی دارند که یک ایده خوب می‌تواند این باشد که آن‌ها فقط روی دسکتاپ نمایش داده شوند و نمایش آن‌ها در صفحه موبایل ایده بدی می‌باشد.
داشتن دکمه‌های اشتراک در شبکه‌های اجتماعی روی یک نسخه از صفحات دسکتاپ حسی را ایجاد می‌کند که می‌تواند اثبات کند که صفحاتتان موردپسند مخاطبان هستند.
در نسخه دسکتاپ فضای بیشتری برای نشان دادن دکمه‌های شبکه‌های اجتماعی وجود دارد و احتمالاً کاربران دسکتاپ هم به اینترنت دسترسی دارند که اضافه کردن منابع بیشتر تأثیری بر روی میزان بارگذاری آن‌ها ندارد.


صفحات نسخه موبایل باید سریع‌تر و ساده‌تر باشند.

صفحاتتان روی نسخه موبایل فضای کمتری برای نمایش همه‌چیز دارند و مهم‌تر اینکه کاربران موبایل دسترسی کمتر و ضعیف‌تری به اینترنت دارند.
داشتن همه منابع، داده‌ها و جاوا اسکریپتی که دکمه‌های شبکه‌های اجتماعی نیاز دارند صفحاتتان را کندتر و رابط کاربری آن‌ها را ضعیف‌تر می‌کند؛ و کاربران و گوگل متوجه این موضوع می‌شوند.
با استفاده از دکمه‌های شبکه‌های اجتماعی که با جاوا اسکریپت زیاد و ارتباط با پایگاه داده خارجی بازیابی می‌شوند، به کاربرانتان، رابط کاربری موبایلی و احتمالاً به رتبه‌بندی سئو موبایلی سایتتان آسیب می‌زنید.
همه این مشکلات فقط برای نشان دادن یک عدد کوچک در یک دکمه کوچک است که کاربران تلفن همراه حتی قادر به دیدن آن نیستند و این هوشمندانه نیست.
برای کاربران موبایلتان بهتر است که فقط یک لینک استاتیک، جایی که آن‌ها بتوانند صفحات خود را به شتراک بگذارند قرار دهید.


بارگذاری انتخابی منابع برای کاربران موبایل

خوب، در مورد شبکه‌های اجتماعی ما اکنون می‌دانیم که تعداد آن‌ها برای کاربران دسکتاپ می‌خواهیم نمایش داده شوند ولی برای کاربران موبایل این تصمیم را نداریم. چگونه این کار را انجام دهیم؟
زمانی که این کار را می‌خواهید انجام دهید، ببینید آیا واقعاً نیاز است هر چیزی که برای کاربران دسکتاپ نمایش داده می‌شود کاربران موبایل هم ببینند؟


بارگذاری منابع خارج از وب‌سایت و تأثیر آن‌ها بر روی بارگذاری صفحات

به مواردی که مورداستفاده قرار می‌گیرند و چگونگی اضافه کردن آن‌ها نگاه کنید.
تبلیغات Adsence: حدود 20 الی 30 منبع جدید برای بارگذاری اضافه می‌کند.
دکمه یا نشانه گوگل پلاس: چندین منابع اضافه می‌کند و حتی فونت اضافی دانلود می‌کند.
دکمه‌های اجتماعی: چندین منبع اضافه می‌کند و نیاز به ارتباط با یک دیتابیس خارجی و بارگیری جاوا اسکریپت خارجی دارد.
وب فونت: نیاز به یک CSS اضافی، بارگیری مشروط منابع و دانلودی نسبتاً بزرگ‌تر از خود فونت.
بسته به نیازهای شما، می‌توانید منابع سنگین خارج از وب‌سایت را استفاده نکنید تا صفحات موبایلی سبک و سریع‌تر شوند.


یک مثال تصویری استفاده از Adsence

در نظر بگیریم که یک صفحه وب‌داریم که یک فایل CSS و یک عکس دارد.
این صفحه به‌سرعت بارگذاری می‌شود و تنها به 3 مورد برای بارگذاری نیاز دارد (HTML, CSS, Image)

اگر ما Adsence را به صفحه اضافه کنیم باید موارد بیشتری بارگذاری کنیم. درواقع مقدار زیادی که باید در حال حاضر اضافه شوند تا مشخص شود چگونه صفحات بارگذاری شوند.


به تصویر زیر از زمانی که بارگذاری آغاز می‌شود نگاه کنید.


صفحه من قبل از اینکه Adsence را اضافه کنم در نیم ثانیه بارگذاری می‌شد. وقتی Adsence به صفحه اضافه می‌شود 2 ثانیه به زمان بارگذاری اضافه می‌شود.
این درخواست‌های اضافی در دسکتاپ خوب است، اما در دستگاه‌های تلفن همراه باعث می‌شود که زمان و پیچیدگی زیادی به صفحات شما اضافه شود. من نمی‌گویم که از Adensce روی موبایل استفاده نکنید. من فقط نمایش می‌دهم با هر چیزی که شما به صفحاتتان اضافه می‌کنید درخواست‌های جدید، منابع برای دانلود و ارتباطات پیچیده اضافه می‌شود.


مثالی از بارگیری منابع انتخابی یا مشروط

صفحه‌ای که اکنون در حال خواندن آن هستید از Adensce، آنالیتیکس، نشانه گوگل پلاس، جاوا اسکریپت برای lazy load شدن عکس و همچنین از جاوا اسکریپت برای ساختن دکمه‌های شبکه اجتماعی در آن استفاده‌شده است.
این موارد را من برای کاربران دسکتاپ استفاده می‌کنم و برای کاربران موبایل فقط آنالیتیکس استفاده کردم. کاربر موبایلتان باید بارگذاری سریع‌تر و ساده‌تری داشته باشد و منابع سنگین کمتری بر روی صفحه داشته باشد.


بارگذاری مشروط منابع برای کاربران موبایل

ما در حال تعریف مسئله، ارائه یک‌راه حل و درک نحوه استفاده از این راه‌حل هستیم.


مشکل

صفحات وب رسپانسیو مقداری محتوا برای کاربران دسکتاپ و کاربران موبایل تهیه می‌کنند؛ اما نیاز داریم برای صفحات موبایل مواردی متفاوت از چیزهایی که بر روی صفحات دسکتاپ قرار دارد استفاده کنیم.
استفاده از مقدار یکسانی از جاوا اسکریپت و اچ تی ام ال در ورژن موبایلی و دسکتاپ، "جاوا اسکریپت Adaptive" می‌نامیده می‌شود و گوگل این راه را برای طراحی رسپانسیو پیشنهاد می‌کند.

این به این معنی است که بدون توجه به اینکه چه دستگاهی برای دیدن صفحه شما استفاده می‌شود، باید فایل جاوا اسکریپت یکسانی ارائه شود؛ بنابراین هرگونه تغییر یا تفاوت بین نسخه‌های دسکتاپ و تلفن همراه باید از همان جاوا اسکریپت باید انجام شود.


()Window.matchMedia

برای انجام این کار از تابع ()window.matchmedia در جاوا اسکریپتتان استفاده کنید.
استفاده از این تابع به ما اجازه می‌دهد تا دستورالعمل‌های متفاوتی برای کاربران دسکتاپ و کاربران موبایل با چند خط جاوا اسکریپت ایجاد کنیم.


()Window.matchMediax چگونه کار می‌کند؟

چیزی که این تابع انجام می‌دهد اندازه‌گیری ابعاد صفحه است و سپس استفاده از دستورات شرطی برای اندازه‌گیری صفحه است.
این کد اندازه نمایشگر را تعیین می‌کند و سپس به دستورات شرطی اجازه اجرا می‌دهد:

if (window.matchMedia("(min-width: 900px)").matches) {
/* the view port is at least 900 pixels wide */
} else {
/* the view port is less than 900 pixels wide */
}

در کد بالا می‌بینیم که می‌توانیم دستورالعمل‌های مختلفی برای سایزهای مختلف نمایشگرها تهیه کنیم.
اینجا یک مثال خاص آورده شده که نشان می‌دهد چطور این کد می‌تواند برای بارگیری موارد مختلف در سایز نمایشگرهای مختلف. استفاده شود.
بارگیری شرطی برای دکمه یا نشانه گوگل پلاس
در مثال زیر مطمئن می‌شویم که جاوا اسکریپت برای نشانه یا دکمه گوگل پلاس روی دسکتاپ بارگذاری می‌شود اما روی موبایل بارگذاری نمی‌شود.

if (window.matchMedia("(min-width:900px)").matches) {

(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = false; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

}

در مثال بالا می‌بینیم که اگر عرض صفحه بیشتر از 900 پیکسل شود جاوا اسکریپت موردنیاز برای نشانه یا دکمه گوگل پلاس را بارگذاری می‌کنیم اما اگر عرض صفحه از 900 پیکسل کمتر باشد این کار را انجام نمی‌دهیم.
نتیجه چه خواهد بود...

  • دکمه یا نشانه گوگل پلاس در صفحه دسکتاپ نمایش داده می‌شود.
  • دکمه یا نشانه گوگل پلاس در موبایل نمایش داده نمی‌شود.

واضح‌تر بیان کنیم، ما مقدار یکسانی از HTML استفاده می‌کنیم و با این HTML دکمه گوگل پلاس را صدا می‌زنیم. وقتی صفحه روی دسکتاپ بارگذاری می‌شود، جاوا اسکریپت برای دکمه گوگل پلاس بارگذاری می‌شود و آن را برای کار کردن ایجاد می‌کند و وقتی‌که این صفحه روی موبایل بارگذاری می‌شود، جاوا اسکریپت برای آن بارگذاری نمی‌شود و دکمه روی صفحه‌نمایش داده نمی‌شود.
یک مثال از بارگذاری حتمی گوگل آنالیتیکس و مشروط گوگل پلاس

if (window.matchMedia("(min-width:900px)").matches) {
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = false; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
} 

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-1', 'varvy.com');
ga('send', 'pageview');

در مثال بالا ما شرایطی برای صدازدن جاوا اسکریپت گوگل پلاس قراردادیم؛ اما خارج از این شرط گوگل آنالیتیکس رو اضافه کردیم. این به این معنا است که مهم نیست سایز نمایشگر چقدر باشد درهرصورت گوگل آنالیتیکس همیشه اجرا خواهد شد اما گوگل پلاس فقط تحت شرایطی که عرض صفحه‌نمایش بالای 900 پیکسل است نمایش داده می‌شود.


یک فایل جاوا اسکریپت، نتایج بسیار

با استفاده از این تابع می‌توانیم کد را روی هر سایز دستگاهی اجرا کنیم، این تابع روی هر مرورگر مدرنی اجرا می‌شود اما روی IE9 یا کمتر کار نمی‌کند.

نظر خود را بنویسید...
ارسال نظر
لغو