سرعت سایت همواره یک فاکتور مهم در سئو سایت بوده و تاثیر زیادی در بهبود رتبه سایت دارد. اما بهبود سرعت دسترسی به سایت، مبحثی فنی بوده و نیاز به تخصص دارد. پس باید با مهمترین موارد تاثیر گذار بر سرعت سایت و چگونگی فعالیت آنها آشنا باشید. این موارد چه هستند و چگونه می توانید شروع به بهبود آن ها کنید؟ در ادامه این مقاله سعی شده است موارد مهم و تاثیر گذار در امتیاز دهی Page Speed گوگل مورد بحث قرار گیرد.
یک صفحه وب چگونه کار میکند ؟
برای درک بهتر مفهوم سرعت لود سایت، بهتر است بدانید روال در دسترس قرار گرفتن یک صفحه وب چگونه است. زمانی که آدرس سایت یا همان نام دامنه خود را در مرورگر اینترنت وارد می نمایید، یک درخواست برای بدست آوردن dns ها به پنل دامنه شما داده می شود، پنل دامنه DNS ها را به مرورگر تحویل می دهد و سپس مرورگر درخواست را به DNS سرور ها داده و آدرس IP سرور میزبان اطلاعات سایت شما را دریافت می نماید. در نتیجه اطلاعات سایت شما را از آن سرور جویا می شود. سپس یک پرس و جو بین مرورگر و وب سرور میزبان سایت شما رخ می دهد و در این بین فایل های لازم برای سایت دریافت می شود تا مرورگر بتواند سایت را به شما نشان دهد.
تصویر(1)
در این ارسال و دریافت درخواست ها بین مرورگر و وب سرور شما، فایل های html، css، Javascript و دیگر فایل های مربوطه به مرورگر شما ارائه خواهد شد. اما معمولا همه فایل های مورد نیاز سایت، در همان درخواست های اولیه در اختیار مرورگر قرار نمی گیرد و نیاز به ارسال درخواست های بیشتر و دریافت فایل های بیشتری خواهد بود. در همین زمان است که بیشترین کندی رخ می دهد.
تصویر(2)
مسائلی که می توانند سرعت سایت شما را کم کنند به شرح زیر می باشند:
- همواره مهمترین بخش تاثیر گذار، تصاویر هستند. تصاویر بزرگ و حجیم زمان زیادی را به خود اختصاص می دهند
- پلاگین ها، برنامه ها و widget ها که به عنوان اسکریپت شخص ثالث شناخته می شوند به دلیل وابستگی هایی به سرور های دیگر و یا انجام امور اضافی، باعث تاخیر در لود می شوند
- تم سایت شما به دلیل داشتن فایل های حجیم و غیر بهینه می تواند دلیلی برای کندی سایت باشد
- وجود ریدایرکت ها در سایت
- فایل های Javascript
ابزار بررسی page speed
زمان لود استاندارد از نظر google عددی بین 2 الی 3 ثانیه است. هرچه لود سایت سریعتر باشد نتیجه آن از نظر ازمون google بهتر خواهد بود. ابزارهای معرفی شده در زیر، می توانند شما را در بهبود سرعت سایت راهنمایی کنند :
- ابزار Chrome User Experience Report
این ابزار مخصوص کاربر Chrome است. متاسفانه، ابزار مذکور فقط برای وب سایت های بزرگ و محبوب در دسترس است، اما شما داده های بسیار خوبی از آن دریافت کنید.
تصویر(3)
- ابزار Lighthouse
Lighthouse ابزاری متن باز و خودکار برای بهبود کیفیت صفحات وب است. می توانید آن را برای هر صفحه وب عمومی یا حتی صفحه های دارای بخش اعتبار سنجی ورود نیز اجرا کنید.
تصویر(4)
شما می توانید Lighthouse را در Chrome DevTools به وسیله خط فرمان یا به عنوان یک ماژول Node اجرا کنید. شما به لایت هاوس یک URL برای بررسی ارائه می دهید، سپس lighthouse بررسی هایی برای آن صفحه انجام می دهد و در نهایت گزارشی از میزان عملکرد صفحه ارائه می کند.
- ابزار Page Speed Insights
ابزار (PageSpeed Insights (PSI از عملکرد یک صفحه در هر دو دستگاه تلفن همراه و دسکتاپ گزارش تهیه می کند و پیشنهاداتی در مورد بهبود آن صفحه ارائه می دهد.
تصویر(5)
PSI داده های آزمایشی و میدانی مربوط به یک صفحه را فراهم می کند. داده های مورد آزمایش برای رفع مشکلات موجود در عملکرد سایت مفید هستند، زیرا در یک محیط کنترل شده جمع آوری می شوند. با این حال، ممکن است گلوگاه های واقعی کندی سایت شما را پیدا نکنند. از طرفی این داده های میدانی برای به دست آوردن تجربه کاربر واقعی مفید است، اما دارای مجموعه معیارهای محدودتری است.
معیار های Preconnect, prefetch, preload:
اگر نمایش محتوای اصلی سایت شما وابسته به لود چند فایل خاص میباشد، توصیه می شود بر اساس نوع فایل اقدام به پیش فراخوانی آن نمایید. برای مثال می توانید از rel="preload" برای فونت های مهم استفاده کنید. مثالی برای preload در زیر آمده است :
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto" as="font">
Pre-connect مانند Pre-Pre DNS است، اما همچنان اتصال TCP و handshake به TLS را به صورت اختیاری انجام می دهد. با از بین بردن تاخیر رفت و برگشت، در وقت کاربر صرفه جویی می شود. با درج کد زیر در قسمت اصلی وب سایت خود، می توانید یک صفحه وب را از قبل متصل کنید:
<link rel=”preconnect” href=”http://domain.com">
وقتی اطمینان دارید که برخی از منابع حتما از سوی کاربر استفاده خواهند شد، بهتر است از پیش فراخوانی (prefetch) استفاده شود. dns-prefetch و prefetch را اشتباه نگیرید، زیرا هر کدام از آن ها دارای تعریف متفاوتی هستند و عملکرد متفاوتی نیز دارند. یکی از موارد استفاده prefetch برای تصاویر می باشد. پس از اتمام بارگیری صفحه، مرورگر شروع به پیش تنظیم تصویر می کند. نمونه کد زیر یک مثال از استفاده prefetch است :
<link rel=”prefetch” href=”http://domain.com/images/logo.png">
فشرده سازی تصاویر:
ساده ترین و احتمالاً سریع ترین راه برای سرعت بخشیدن به سایت شما فشرده سازی تصاویر است. انجام این کار بسیار آسان است. انواع ابزارهای رایگان برای فشرده سازی در دسترس شما است. سایت Optimizilla یکی از این ابزارها می باشد. حتی می توانید از ابزارهای رایگان در رایانه شخصی خود اقدام به ذخیره سازی مخصوص وب کنید تا تصویر به درستی فشرده شود.
کم کردن حجم فایل های Css و JavaScript
وقتی در حال طراحی یک سایت هستید معمولا کد ها را با فاصله و همراه با نوت ذخیره می کنید تا امکان خطایابی و اصلاح آنها بالا باشد. این مورد امری درست و بجا است و خوانایی کد شما را بالا می برد. اما وقتی کار به اتمام رسید، بهتر است یک نمونه minify شده از آن فایل را داشته باشید، این نسخه فاقد آن نوت ها و فضاهای اضافی است. از آنجا که مرورگر تفسیر خط به خط فایل های css و js را میخواند، هرچه تعداد خط ها کمتر باشد سرعت لود بالاتر خواهد رفت. ابزار آنلاین فراوانی برای این منظور توسعه داده شده اند. می توانید فایل های css و js خود را در این ابزار های آنلاین آپلود کرده و نسخه minify شده آن را دانلود و استفاده نمایید.
تصویر(6)
کاهش ریدایرکت ها
هرچه تعداد بیشتری از افراد از تلفن همراه استفاده کنند، تغییر مسیرها بیشتر به یک مشکل تبدیل می شوند. هر وب سایتی که به تازگی راه حل seo تلفن همراه را اجرا کرده است باید به تغییر مسیرهایی که در صفحات آنها اتفاق می افتد بسیار توجه کند. هدایت مجدد، کاربران موبایل را تحت تأثیر قرار می دهد زیرا ممکن است آنها از شبکه های تلفن همراه کم سرعت تری نسبت به کاربران دسکتاپ استفاده کنند.
تصویر(7)
دلایل خوب و موجه زیادی برای تغییر مسیر وجود دارد اما باید در نظر داشت که تغییر مسیرها باعث کاهش عملکرد و سرعت قابل توجهی می شوند.
کاهش rendering block ها:
به صورت کلی فایل های CSS و JS که در لود سایت شما و نمایش محتوای آن تاخیر ایجاد می کنند، شامل rendering block شده و بهتر است آنها را مرتفع بسازید. برای فایل های JS، کاهش تعداد فایل ها آن هم از طریق ادغام آنان و همچنین لود آنها پس از فوتر و کد های body صفحه سایت، می توانند دو راهکار مناسب باشند. برای فایل های CSS نیز بهترین راهکارها کم کردن هرچه بیشتر تعداد فایل های CSS می باشد که در سایت فراخوانی می شوند. بهتر است از کتابخانه های آماده CSS همچون bootstrap استفاده نمایید و اگر کد نویسی CSS زیادی ندارید، آن ها را به صورت فایل خارجی فراخوانی نکنید و در عوض آن ها را به صورت inline در کدهای سایت خود وارد نمایید.
تصویر(8)
جمع بندی
اگر از CMS های آماده همچون وردپرس استفاده می کنید می توانید قسمتی از این بهینه سازی های را به وسیله افزونه های بهینه ساز همچون wp-rocket انجام دهید اما بخشی دیگر کمک و مشورت از یک متخصص را نیاز خواهد داشت. بهینه بودن سایت از نظر گوگل می تواند نتایج مثبت فراوانی در رتبه سایت شما نیز داشته باشد پس از آن غافل نشوید.