کاربری که میخواهد سایت شما را باز کند مثل بچه‌ای گرسنه است که اصلاً نمی‌خواهد برای غذا خوردن صبر کند. حتی یک ثانیه! مهم نیست غذایی که پخته‌اید چقدر خوشمزه یا زیباست؛ کاربر همین الان میخواهد نیازش را در کمترین زمان ممکن برطرف کنید. اگر نمی‌توانید پس می‌رود سراغ سایت سریعتر رقیب شما.
خب حالا از کجا بفهمیم سایت ما به اندازه کافی سریع است؟ با تست سرعت سایت اما از راه درستش.
هرچقدر هم سایت شما در سیستم یا موبایل خودتان سریع باز شود به این معنی نیست که هیچ مشکلی ندارد.
در این مقاله اول روش‌های درست تست سرعت سایت را آموزش می‌دهیم، بعد راهکارهایی برای افزایش و بهینه سازی سرعت سایت معرفی خواهیم کرد.
بهترین ابزارهای تست سرعت سایت
برای تست سرعت سایت راهها و ابزارهای مختلفی وجود دارد. ۴ ابزاری که در ادامه معرفی کردیم اولاً رایگان‌اند، دوماً از جنبه‌های مختلفی که در ادامه توضیح می‌دهیم بهتر و کاربردی‌تر هستند.
۱. page speed insights
PageSpeed Insights یکی از ابزارهای رایگان گوگل برای تست سرعت سایت و سنجش تجربه کاربران است. در ادامه به‌جای اسم کاملش از مخخف آن یعنی PSI استفاده می‌کنیم.
شاخصهایی که PSI برای اندازه‌گیری سرعت وبسایت و سنجش تجربه کاربران دارد مبتنی بر استاندارهای گوگل هستند. یعنی همان شاخصهایی که گوگل برای رتبه‌بندی وبسایتها استفاده میکند.
هر کدام از این شاخصها مثل تأثیر دروس کارنامه دوران مدرسه روی نمره معدل ضریب و وزن دارند. مثلاً اگر درس ریاضی ضریب ۴ داشت یعنی تاثیرش ۴ برابر درس ورزش با ضریب ۱ است. میزان تاثیرگذاری شاخصها در PSI با درصد مشخص شده و در نهایت یعد از یک محاسبه با در نظر گرفتن کل شاخصها، به عددی بین ۱ تا ۱۰۰ می‌رسیم. این نمره سرعت شماست که بالای گزارش برای دو نوع دستگاه موبایل و رایانه‌های شخصی جدا از هم گزارش می‌شود. هر چه عدد گزارش شده بزرگتر باشد یعنی سرعت و تجربه کاربران از وبسایت شما بهتر است.
در بخش‌های بعد با جزئیات کامل درباره این گزارش و نحوه استفاده از آن برای افزایش و بهینه سازی سرعت سایت توضیح دادیم.
۲. جی تی متریکس (Gtmetrix)
ابزار دوم و پرکابرد تست سرعت سایت، جی تی متریکس است. جی تی متریکس سه نمره نهایی بر اساس سه روش اندازه‌گیری مختلف برای سرعت وبسایت گزارش می‌دهد.
این سه عدد که در تصویر زیر با کادر قرمز مشخص شده‌اند را در ادامه به ترتیب توضیح می‌دهیم.
۱. PageSpeed Score
PageSpeed Score به صورت درصد نمایش داده می‌شود و مبتنی بر همان سرویس تست سرعت گوگل (مشابه همان تست PSI) است. البته این روش سنجش عملکرد وبسایت در جی تی متریک کمی دستکاری شده است.
جی تی متریکس یک رتبه‌بندی براساس حروف لاتین (A, B, C ,…) هم به این درصد اضافه کرده است.
۲. YSlow Score
روش YSlow مبتنی بر ۲۳ شاخص عملکردی است که شرکت یاهو برای سنجش سرعت و عملکرد وبسایتها استفاده میکند. این ۲۳ شاخص وزن و تاثیر متنوعی روی نمره نهایی دارند. معمولاً عددی که در این روش به دست می آید فاصله کمی با PageSpeed Score دارد.
۳. Fully Loaded Time
این شاخص برحسب زمان گزارش می‌شود و مدت زمان بارگذاری کامل وبسایت را نشان می‌دهد. این زمان ممکن است از تجربه خودتان طولانی‌تر باشد چون جی تی متریکس در این شاخص زمانی را در نظر می‌گیرد که صفحه به طور کامل بارگذاری شده و تا ۲ ثانیه هیچ ارتباطی با اینترنت برقرار نکند. یعنی امکان دارد وبسایتی در ظاهر کامل بارگذاری شده باشد اما همچنان در حال دریافت فایل یا ارتباط با سرور باشد. هر وقت این ارتباط قطع شد یعنی صفحه Fully Load شده است.
۳. webpagetest
سومین ابزار کاربردی برای تحلیل و بهینه‌سازی سرعت سایت webpagetest است. با این سرویس رایگان، می‌توانید یک بررسی کامل از زمان بارگذاری و عوامل تاثیرگذار در کندی وبسایت به دست آورید.
البته گزارش webpagetest جامع و تخصصی است. با این ابزار می‌توانید مشکلات امنیتی، تصاویر پرحجم، منابع اضافی، پردازش‌های زمان‌بر و دیگر مشکلات احتمالی را پیدا کنید.
تست سرعت و عملکرد این سرویس هم براساس روش Page Speed گوگل کار میکند.
۴. سرچ کنسول
معلوم است که وظیفه اصلی سرچ کنسول تست سرعت وبسایت نیست؛ سرچ کنسول ابزاری برای سنجش عملکرد و حضور وبسایت در نتایج گوگل است. مطالعه بیشتر …
اما گوگل در آخرین به‌روزرسانی سرچ کنسول گزارش جدیدی به نام Core web vitals اضافه کرد که سرعت وبسایت را مبتنی بر همان روش Page Speed گوگل به صورت مداوم اندازه‌گیری و گزارش می‌دهد.
در این گزارش خبری از اعداد و ارقام پیچیده نیست. فقط سه سطح ضعیف، نیازمند بهینه‌سازی و خوب دارد.
کدام ابزار تست سرعت سایت بهتر و دقیق‌تر است؟
چند نکته مهم در بررسی سرعت سایت وجود دارد که قبل از استفاده از هر ابزاری باید بدانید.
اگر شما با اینترنت پرسرعت و با کیفیت عالی یک وبسایت سنگین و پرحجم را باز کنید، شاید بارگذاری کامل آن فقط یک ثانیه طول بکشد. اما کاربری که به هر دلیلی با اینترنت ضعیف و کم سرعت بخواهد همین سایت را باز کند شاید ۳۰ ثانیه منتظر بماند. این نکته را هم در نظر بگیرید که عواملی مثل اختلالات شبکه اینترنت می‌تواند این تجربه را بدتر هم بکند.
نکته مهم بعدی، تست کردن کل صفحات سایت است. اگر یک صفحه (مثل صفحۀ اصلی سایت) خیلی سریع است نباید معیاری برای کل وبسایت باشد. کل صفحات یا مراحلی که کاربر دنبال میکند باید سریع باشد نه فقط یک صفحه.
پس برای تست سرعت سایت باید ۳ روش مجزا را در نظر بگیرید:
- یک تست با رایانه و اتصال اینترنت خودتان
- تست با یک سرور (رایانه‌ای که سخت‌افزار قدرتمندی دارد و همیشه به اینترنت با پهنای باند بالا وصل است)
- تست میانگین سرعت سایت از جمعیت بزرگی از کاربران
در هر کدام از این حالت‌ها امکان دارد نتایج متفاوتی به دست آورید، اما در نهایت میانگین سرعت و تجربه کاربران از وبسایت شما مهم است؛ یعنی همان تستی که PSI انجام می‌دهد.
اولویت اول باید با گزارش میدانی PSI و گزارش Core web vitals در سرچ کنسول باشد چون گوگل هم برای سنجش سرعت و تجربه کاربری سایت همان را در نظر می‌گیرد و در رتبه‌بندی سایت‌ها تأثیر می‌دهد. اگر بتوانید وبسایت خود را برای این تست بهینه‌سازی کنید مطمئن باشید در تست با سایر ابزارها هم نتایج خوبی می‌گیرید.
اولویت دوم با تست‌هایی است که با سرور انجام می‌شود. می‌توانید این تست‌ها را در بازه‌های زمانی مختلف تکرار کنید. بخشی از گزارش جی تی متریکس (Gtmetrix) مبتنی بر همین روش است. سروری را هم که میخواهید تست از آن انجام شود را خودتان انتخاب می‌کنید و حتی می‌تواند سرعت اینترنت پایین را شبیه‌سازی کند.
اولویت آخر هم با تست‌هایی است که توسط رایانه و اتصال اینترنت خودتان انجام می‌شود. این تست‌ها برای پیدا کردن عواملی که باعث کندی سایت شده‌اند مفید است، اما نتیجه همیشه درست نیست. تست‌هایی که با ابزار Google Lighthouse انجام می‌شود از این روش است.
خب حالا که می‌دانیم چطور باید سرعت سایت را تست کنیم ببینیم از این گزارش‌ها چه چیزی دستگیرمان می‌شود. از همین گزارش‌ها میخواهیم بدانیم مشکل کجاست و همان را برطرف کنیم.
سرعت سایت (Site speed) چیست؟
وقتی می‌گوییم سرعت سایت منظورمان سرعت بارگذاری و سرعت رسیدن کاربر به هدفش است. مثلاً اگر صفحه اصلی سایت خیلی سریع باز شود اما بارگذاری کامل صفحه گالری محصولات ۱۰ ثانیه طول بکشد یعنی سایت شما در کل سریع نیست. سرعت هر صفحه (Page speed) وابسته به عناصر موجود در آن مثل تصاویر، افکت‌ها، اطلاعات موردنیاز برای پردازش و … بستگی دارد. اما وقتی درباره سرعت کل سایت صحبت می‌کنیم عواملی مثل سرور میزبان و کش (Cache) مطرح می‌شود.
پس در کل سرعت سایت مفهومی جامع‌تر دارد. وقتی کاربر آدرس سایت شما را در مرورگر خود وارد می کند و بعد از بازدید چند صفحه، به صفحۀ خرید (هدف) منتقل می‌شود، بیشتر سرعت سایت را لمس میکند.
چرا سرعت سایت مهم است؟
در حالت کلی دو دلیل برای اهمیت سرعت سایت داریم:
- سئو (SEO)
- تجربه کاربران
تاثیر سرعت سایت در سئو
سرعت سایت از دو جنبه روی سئوی وبسایت تاثیر می‌گذارد.
گوگل در چند به‌روزرسانی مهم و تایید شده اعلام کرد سرعت سایت یکی از فاکتورهای رتبه‌بندی است. اولین به‌روزرسانی در سال ۲۰۱۰ روی تعداد کمی از وبسایتها تاثیر گذاشت و دومین به‌روزرسانی متمرکز بر سرعت در سال ۲۰۱۸ تعداد زیادی از سایت‌ها و نتایج جستجو را تحت تأثیر قرار داد.
تأکید گوگل بیشتر روی ایجاد تجربه کاربری خوب است. سریع بودن سایت هم بخشی از تجربه کاربری خوب حساب می‌شود.
پس در کل اگر سایت کندی دارید احتمال رسیدن به رتبه‌های بالا کمتر می‌شود.
دومین تاثیر سرعت سایت روی سئو در مرحله ایندکس کردن اتفاق میافتد. وقتی ربات‌های گوگل صفحه‌ای از وبسایت شما را کشف می‌کنند یا خودتان وجود سایت و صفحه‌ای جدید را به گوگل اطلاع می‌دهید، ربات‌های بررسی کننده صفحه به سراغش می‌آیند. مدت زمانی که ربات‌ها به هر صفحه اختصاص می‌دهند محدود است. قرار نیست هر ربات گوگل چند دقیقه برای بررسی و ذخیره کردن محتوای یک صفحه وقت بگذارد. وقتی صفحه‌ای در یک بار سر زدن ربات، کامل دانلود نشود، ربات در دفعات بعدی کارش را ادامه می‌دهد تا صفحه را کامل دریافت کند.
در سرچ کنسول گوگل گزارشی به نام Crawl Stats وجود دارد که نشان می‌دهد ربات‌های گوگل برای دانلود صفحات سایت چقدر زمان گذاشته‌‌اند. هرچه این زمان (برحسب میلی‌ثانیه) کمتر باشد یعنی صفحه‌های جدید یا به روز‌رسانی شده زودتر در نتایج جستجوی گوگل دیده می‌شوند.
تأثیر سرعت در تجربه کاربران
شرط میبندم شما هم مثل من از بین دو وبسایت فروش بلیط اتوبوس و هواپیما که قیمت‌هایشان یکسان است، ترجیح می‌دهید از سایتی خرید کنید که سریعتر است. به ویژه زمانی که چند دقیقه بیشتر وقت ندارید و دوست دارید در کمترین زمان ممکن بلیط خود را دریافت کنید.
این یک مثال ساده است اما خیلی وقت‌ها کندی سایت یک شرکت به صورت ناخودآگاه باعث دلزدگی و تجربه بد ما از آن سایت یا برند می‌شود. خیلی وقت‌ها هم اگر باز شدن سایتی خیلی طول بکشد به راحتی تب آن را می‌بندیم و می‌رویم سراغ سایتی دیگر.
به همین سادگی تأخیر در بارگذاری سایت می‌تواند باعث از دست رفتن بازدیدکننده، مشتری و در نتیجه کاهش درآمد شود. اگر باورتان نمی‌شود بد نیست بدانید که طبق تحقیقاتی که شرکت آمازون انجام داده، در هر ۱۰۰ میلی‌ثانیه (۰.۱ ثانیه) تأخیر در بارگذاری سایت، ۱٪ کاهش فروش اتفاق میافتد.
همچنین طبق تحقیقات گوگل، زمان ماندن بازدیدکنندگان در صفحه، در سایت‌های سریع (که در کمتر از ۵ ثانیه بارگذاری می‌شوند) در مقایسه با سایت‌های کند (که تا ۱۹ ثانیه طول می‌کشد تا بارگذاری شوند)، ۷۰ درصد بیشتر است. از طرف دیگر در سایت‌های سریع، نرخ پرش (Bounce Rate) هم ۳۵ درصد کمتر است.
نرخ تبدیل یا Conversion Rate یعنی:
تبدیل کاربر به چیزی که شما میخواهید. به بیان ساده‌تر، وقتی کاربری به سایت شما وارد می‌شود، دوست دارید کاری را انجام دهد؛ مثلاً سفارش خریدی را تکمیل کند یا در خبرنامه عضو شود. مقدار موفقیت شما در تبدیل او به چیزی که انتظار دارید، با نرخ تبدیل مشخص می‌شود. (مطالعه بیشتر…)
نرخ پرش یا بانس ریت یعنی:
کاربر وارد صفحه وبسایت شما می‌شود و بدون وارد شدن به صفحه دیگری پس از مشاهده نخستین صفحه از وبسایت شما خارج می‌شود. این جمله به این معنی است که کاربر بدون نشان دادن علاقه‌ای به مطالعه بیشتر مطالب سایت و بدون دیدن صفحات دیگر، از آن خارج می‌شود. (مطالعه بیشتر…)
تست سرعت سایت با PageSpeed Insights
همانطور که گفتیم اولین و مهم‌ترین تستی که باید در نظر بگیرید PSI است. آدرس هر صفحه‌ای که میخواهید سرعتش را بسنجید در آن وارد کنید و بعد دکمه ANALYZE را بزنید. اگر گزارش باز نشد یا ارور داد آی پی خود را تغییر دهید.
بعد از کامل شدن تست گزارشی مثل تصویر زیر می‌بینید. این گزارش شامل دو بخش مجزا برای موبایل و دسکتاپ است.
در ادامۀ گزارش سه بخش زیر را می‌بینید:
A) گزارش میدانی یا واقعی (Field Data)
این گزارش مبتنی بر اطلاعات واقعی جمع‌آوری شده از مرورگر کروم و بازدیدهای کاربران از همان صفحه‌ای است که آدرسش را وارد کردید؛ مثلاً اگر صفحه اصلی را وارد کردید گزارش فقط مربوط به همان صفحه است. مرورگر کروم به صورت خودکار اطلاعاتی درباره تجربه کاربران از وبسایتها به سرورهای گوگل می‌فرستد. البته می‌توانید از تنظیمات کروم ارسال این اطلاعات را متوقف کنید.
B) گزارش آزمایشگاهی (Lab Data)
اطلاعات آزمایشگاهی با استفاده از آنالیز سایتتان به‌دست می‌آید و ربطی به تجربه کاربران ندارد. در بخش Lab Data، نتیجه به دست آمده برای هر شاخص روبروی آن نوشته شده است. گزارش آزمایشگاهی مبتنی بر یک بارگذاری (لودینگ) شبیه‌سازی شده از صفحه است. در این تست فقط اعداد مربوط به تست انجام شده در آن لحظه اعلام می‌شود. به همین دلیل امکان دارد در هربار تستی که انجام می‌دهید اعداد نمایش داده شده متفاوت باشد.
C) گزارش کل وبسایت (Origin Summary)
گزارش کل وبسایت مثل همان گزارش میدانی مبتنی بر اطلاعات جمع‌آوری شده از کاربران واقعی است اما میانگینی است از کل صفحات وبسایت، نه فقط صفحه‌ای که آدرسش را وارد کردید.
در ادامه میخواهیم تک تک شاخص‌های استفاده شده در این گزارش را معرفی کنیم.
تصویر زیر نتیجۀ تست سرعت سایت پرتال، در نسخۀ دسکتاپ را نشان می‌دهد. همانطور که می‌بینید، گوگل به سرعتِ این صفحه نمرۀ ۸۴ را داده است. ۸۴ نمرۀ بدی نیست و نشان می‌دهد که پرتال از نگاه گوگل سرعت متوسط (نزدیک به خوب) دارد.
در کل، اگر امتیاز سرعت سایتتان در این تست بالای ۹۰ بود یعنی سایتتان سریع است. اگر این امتیاز بین ۵۰ تا ۹۰ بود، یعنی سرعت سایت شما متوسط است و کافیست برای بهبود آن تغییراتی انجام دهید. اگر امتیاز سایت شما زیر ۵۰ باشد، یعنی سایت شما بسیار کند است!
در ادامۀ صفحه، گوگل در بخش‌های مختلفی اطلاعات تکمیل‌کننده و راهکارهای بهبود سرعت را به شما می‌گوید؛ اما بهتر است قبل از آن ببینیم که این عددها و نمودارهای رنگی چه معنی دارند؟
حتی اگر سریعترین سایت جهان را هم داشته باشید، ممکن است در این بخش کمی جا بخورید! چرا؟
چون در جمع‌آوری اطلاعات میدانی، تنها سرعت سایت نیست که تعیین‌کننده است. سرعت اینترنت کاربران هم در تجربه کاربری آنها تاثیر داشته، در گوگل کروم ذخیره شده و در تحلیل میدانی لحاظ می‌شود.
در تصویر بالا می‌بینید که گوگل می‌گوید، در ۳۰ روز گذشته سرعت پیج، در مقایسه با صفحات دیگری که گزارش تجربه کاربری آنها در گوگل کروم بوده، آهسته ارزیابی شده است.
در این بخش دو نمودار ۳ رنگ به نام‌های FCP و FID هم داریم که حرف‌هایی برای گفتن دارند.
FCP یا First Contentful Paint
به زبان ساده، وقتی شما آدرس وبسایتی را در مرورگر خود وارد می‌کنید، در ابتدا، صفحۀ مرورگر خالی و سفید است؛ به مدت زمانی که طول می‌کشد تا اولین تغییر ظاهری در صفحه ایجاد می شود (فاصلۀ زمانی اینتر زدن روی صفحه کلید برای تایید آدرس سایت مورد نظر تا دریافت اولین بایت از اطلاعات سایت از DOM) FCP گفته می‌شود.
FID یا First Input Delay
به مدت زمانی گفته می‌شود که کاربر اولین تعامل را با سایت داشته باشد. اولین تعامل می‌تواند کلیک کردن روی لینک، لمس یک دکمه یا هر عملی باشد که مرورگر وادار به واکنش شود.
حالا که با معنی و کار هر دو نمودار آشنا شدید، بیایید ببینیم که هر رنگ نشان‌دهندۀ چیست؟
رنگ قرمز برای آن درصدی از کاربران است که FID و FCP کندی را تجربه کرده‌اند. معمولاً زمان بالای ۲.۵ ثانیه، کند تلقی شده و در رنگ قرمز محاسبه می‌شود.
رنگ نارنجی آن درصدی از کاربران را نشان می‌دهد که سرعت متوسطی را تجربه کرده‌اند. مدت زمان بین ۱ تا ۲.۵ ثانیه متوسط است.
رنگ سبز درصد آن دسته از کاربرانی را نشان می‌دهد که سرعت مناسبی را تجربه کرده‌اند. زمان‌های زیر ۱ ثانیه، در دستۀ سبزرنگِ پرسرعت‌ها جای می‌گیرند.
Speed Index یا سرعت ایندکس شدن صفحه
میانگین زمانی است که طول می‌کشد تا یک بخش از محتوا (مثلاً یک تصویر) به‌صورت قابل فهم نمایش داده شود. بهتر است این زمان زیر ۱۲۵۰ میلی‌ثانیه باشد.
TTI یا Time to Interactive
بارگذاری صفحه اتفاقی نیست که در یک لحظه رقم بخورد. بارگذاری صفحه تجربه‌ای است که هیچ معیاری نمیتواند آن را دقیقاً اندازه بگیرد. لحظات چندگانه‌ای هنگام بارگذاری یک صفحه وجود دارد که روی تجربه کاربران اثر می‌گذارند و باعث می‌شوند که کاربر احساس کند این صفحه کند است یا سریع.
TTI به ما می‌گوید که چه زمانی صفحه کاملاً برای تعامل آماده شده است. حال شاید بپرسید که قابل تعامل بودن سایت از کجا معلوم می‌شود؟ در جواب باید بگویم ۳ چیز معمولاً زمان TTI را تعیین می‌کنند:
- وقتی که صفحه محتوای مفید یا معناداری برای نمایش داشته باشد. (این مورد با First Meaningful Content اندازه‌گیری می‌شود.)
- اکثر بخش‌های موجود در یک صفحه قابل مشاهده باشند.
- صفحه به درخواست کاربر، در کمتر از ۵۰ میلی‌ثانیه جواب دهد.
Total Blocking Time
منظور از این شاخص فاصله زمانی بین FCP تا TTI است. یعنی کاربر دکمه، بنر، عنوان یا لینکی را می‌بیند اما با کلیک روی آن اتفاقی نمی‌افتد، چون تا قبل از آماده شدن برای تعامل بلوکه شده است. در این فاصله زمانی مرورگر کاربر مشغول انجام کاری در پس‌زمینه است که تا تمام نشود کار جدیدی را شروع نمی‌کند.
هرچه این زمان طولانی‌تر باشد یعنی کاربر باید بیشتر منتظر بماند و چندین بار کلیک کند تا بفهمد کاری که میخواهد انجام خواهد شد یا نه.
Largest Contentful Paint
شاخص «بزرگترین ترسیم محتوا» مدت زمانی که طول می‌کشد تا بزرگترین محتوای صفحه (تصویر، ویدیو یا نوشته) قابل مشاهده شود را اندازه می‌گیرد. اگر صفحه‌ای ویدیو دارد و بزرگترین محتوای صفحه همین ویدیو است پس کاربر به آن نیاز دارد. اگر کل صفحه سریع بارگذاری شود اما ویدیو طول بکشد یعنی کاربر باید زمان زیادی منتظر بماند.
این محتوا می‌تواند نوشته یا تصویر هم باشد.
Cumulative Layout Shift
این شاخص روی تجربه کاربری و بعد از بارگذاری متمرکز است.
شاید برای شما هم پیش آمده که صفحه‌ای را باز کردید و می‌خواستید روی دکمه یا لینکی کلیک کنید، اما درست در همان لحظه تبلیغی نمایش داده شده یا مکان دکمه تغییر کرده و اشتباهی روی چیز دیگری کلیک کردید. این تجربه بسیار آزار‌دهنده است چون کاربر را به صفحه دیگری که نمی‌خواهد هدایت میکند.
بعضی وبسایتها عمداً این کار را می‌کنند تا کاربر روی تبلیغات یا لینک‌های خرید کلیک کند.
گوگل می‌گوید این تغییرات در صفحه باید به اندازه‌ای مشخص و در فاصله‌های زمانی معینی تکرار شوند تا کاربر بتواند آنها را پیش‌بینی کند. نحوه محاسبه این شاخص کمی پیچیده است، اما در کل فقط این نکته را در نظر بگیرید که تغییرات در صفحه بعد از بارگذاری کامل باید حداقل باشد.
Opportunities
در این بخش گوگل متناسب با سایت شما پیشنهاداتی را برای افزایش سرعت سایت ارائه میکند.
در کنار این پیشنهادات عددی را به ثانیه می‌بینید که نشان می‌دهد اگر به این توصیه عمل کنید به‌طور تقریبی چقدر به سرعت سایتتان اضافه می‌شود.
برای مثال اگر شما حجم عکس‌های موجود در صفحه را بهینه کنید، ۰.۲ ثانیه از زمان بارگذاری صفحه کم شده و سایتتان سریعتر Load می‌شود.
۴) Diagnostics
در این بخش گوگل عیب‌یابی سایت شما را انجام می‌دهد و برای هر عیبی که پیدا کند، راه حل‌هایی را پیش پایتان می‌گذارد.
برای مثال در مورد اول، گوگل می‌گوید که مطمئن شوید تا زمان بارگذاری فونت، متن شما در صفحه قابل مشاهده است. با کلیک روی این گزینه راه‌حل آن را هم می‌توانید ببینید.
۵) Passed audits
در این بخش موارد موفقیت‌آمیزتان نیز نمایش داده می‌شود تا زیاد از عیب‌جویی گوگل ناراحت نشوید!
برای اینکه این بخش را جمع‌بندی کنیم و به یک دید کلی درباره هر چیزی که تا اینجا، درباره Google PageSpeed Insights گفتیم برسید، تصویر زیر را به دقت نگاه کنید.
همانطور که می‌دانید، یک صفحه تا زمانی که کامل بارگذاری شود، مراحل مختلفی را پشت سر می‌گذارد. گوگل تک‌تک این مراحل را بررسی می‌کنید و با توجه به اطلاعاتی که از آنالیز خودش و گزارش مرورگرهای کاربران به‌دست آورده، سرعت سایت شما را اندازه می‌گیرد.
این از نحوۀ ارزیابی سرعت سایت، حالا وقت آن است که از نتایج این آنالیز استفاده و سایتمان را سریعتر و سریعتر کنیم؛ پس در بخش بعدی با ما باشید.
راهکارهایی برای افزایش سرعت سایت
ببینید، بهینه سازی سرعت سایت، گاهی خیلی ساده است و با چند کار ساده انجام می‌شود؛ اما گاهی قضیه کمی (دقت کنید، فقط کمی!) پیچیده می‌شود و لازم است که کمی با کُدها سروکله بزنید.
برای همین هم تصمیم گرفتم بهینه سازی سرعت سایت را به دو بخش ساده و پیشرفته تقسیم کنم. اگر خیلی اهل کُد و دل‌ورودۀ سایتتان نیستید، خواندن بخش اول کفایت میکند؛ اما اگر میخواهید سایتتان با سرعت جت بارگذاری شود، بخش پیشرفته را هم از دست ندهید!
۳ راه ساده برای افزایش سرعت سایت
با به‌کارگیری ۳ موردی که در این بخش به شما می‌گوییم، می‌توانید زمان بارگذاری صفحات سایت را تا حد قابل قبولی کاهش دهید؛ پس لطفاً این توصیه‌های ساده را دست کم نگیرید!
۱) از تصاویر کمتر و کم حجم‌تر استفاده کنید
یکی از اشتباهات رایج بین ما وبمسترها (مخصوصاً کسانی که تولید محتوا انجام می‌دهند 
این است که تصویری با ابعاد و حجم بزرگ را در سایت آپلود می‌کنیم و بعد در سیستم مدیریت محتوا، تلاش می‌کنیم با کشیدن گوشه‌های عکس، آن را کوچک کنیم! این کار اشتباه است. چرا؟
چون حجمی از فضای سایت خودمان و حجمی از اینترنت کاربر، بیخودی برای چیزی که نیاز نیست، هدر می‌رود!
البته عکس‌های موجود در سایت فقط به مقاله محدود نمی‌شوند؛ عکس محصولات، عکس‌ها و آیکون‌های موجود در صفحۀ اول سایت، عکس‌های استفاده شده در طراحی سایت و خلاصه هر عکسی که می‌بینید، روی سرعت بارگذاری صفحه تاثیر دارند؛ پس لطفاً آنها را بهینه کنید.
یک راه حل ساده و سریع برای کاهش حجم عکس‌ها، بدون افت کیفیت
شما می‌توانید با مراجعه به سایت Optimizilla، عکس‌هایی که میخواهید بهینه شند را آپلود کنید و با حجمی کمتر از قبل تحویل بگیرید. یکی از خوبی‌های این سایت این است که می‌توانید عکس‌ها را به صورتی گروهی آپلود و به صورت گروهی هم دانلود کنید.
در ضمن فراموش نکنید که این سایت با ابعاد عکس‌ها کاری ندارد و فقط حجم آنها را کم میکند؛ پس قبل از آپلود عکس، از استاندارد بودن ابعاد آن مطمئن شوید!
۲) با تبلیغات اسپم خداحافظی کنید
اگر سایتی که دارید تبلیغات محور است و از این راه درآمد کسب می‌کنید، بهتر است تعداد تبلیغات را مدیریت کنید. منظورم این است که ریختن تبلیغات از در و دیوار سایت، علاوه‌براینکه قشنگ نیست و باعث اسپم تلقی شدن سایتتان می‌شود، سرعت سایت را نیز کند میکند.
در ضمن بد نیست بدانید که گوگل، الگوریتمی به نام فرد را مامور مبارزه با سایت‌هایی کرده است که حجم تبلیغات آنها، با محتوایی که تولید می‌کنند، هیچ تناسبی ندارد.
۳) از قالب‌های سبک و بهینه استفاده کنید
بسیاری از وبسایتها از سیستم‌های مدیریت محتوا و سایت‌ساز مثل وردپرس استفاده می‌کنند. سعی کنید از قالب‌هایی استفاده کنید که برای سرعت، سبکی و سئو بهینه‌سازی شده‌اند.
اگر تخصص کافی در این زمینه ندارید یکی از راهها انجام تست سرعت روی نسخه دموی قالب است. معمولاً هر قالب یک نسخه پیش‌نمایش دارد. می‌توانید همان دمو را با PSI تست کنید. البته باید در نظر بگیرید که امکان دارد سروری که نسخه دمو روی آن نصب شده سرور بهتر یا بدتری از سرور خودتان باشد.
۷ راه پیشرفته برای بهینه سازی سرعت سایت
لطفاً با دیدن کلمۀ “پیشرفته” احساس نکنید که قرار است مطالب پیچیده و غیرقابل فهمی بگویم! اتفاقاً سعی میکنم این مطالب را به ساده‌ترین شکل ممکن منتقل کنم، تا همۀ کسانی که آشنایی حداقلی با پشت‌صحنۀ سایت‌ها دارند، بتوانند از آن استفاده کنند.
قبل از اینکه وارد راه‌حل‌ها شویم، بیایید ببینیم که یک مروگر وقتی که شروع به نمایش دادن یک سایت میکند، چه مراحلی را به ترتیب طی میکند؟ شکل زیر را ببینید.
این شکل، مراحل تحویل گرفتن یک صفحه از سایت، توسط مرورگر را نشان می‌دهد. یعنی وقتی شما وارد مرورگر کروم یا فایرفاکس شدید، بعد از اینکه آدرس سایت را وارد کردید و اینتر را زدید، تا زمانی که صفحه بارگذاری شود، این مراحل به ترتیب طی می‌شوند. به این شکل درخت DOM یا Document Object Model می‌گویند.
درخت DOM در ادامه به فهم بهتر مطلب کمک میکند، پس لطفاً آن را به ذهنتان بسپارید تا برویم سراغ ۶ راه بهبود سرعت!
۱) از فشرده‌ساز Gzip استفاده کنید
هنگامی که کاربری وارد سایت می‌شود، از همان لحظه اول، تا زمانی که از تعاملی انجام دهد، درخواست‌ها یا Request های مختلف و پی‌درپی به‌صورت فایل برای سرور ارسال می‌شوند. سرور، برای اینکه بتواند فایل‌ها را بررسی کند و به این درخواست‌ها جواب بدهد، به زمان نیاز دارد؛ پس چه نتیجه‌ای می‌گیریم؟
نتیجه این است، هر چه این درخواست‌ها، فشرده‌تر و کمتر باشند، سرعت پاسخگویی سرور هم بیشتر شده و سایت زودتر بارگذاری می‌شود.
برای فشرده و بهینه‌تر کردن فایل‌های موجود می‌توانیم از Gzip استفاده کنیم. Gzip روی سایت شما نصب می‌شود و قبل از اینکه صفحات سایت یا استایل‌شیت‌ها را برای مرورگر بفرستد، آنها را فشرده میکند. شاید غیرقابل باور به‌نظر برسد، اما Gzip تا ۷۰% حجم فایل‌های ارسالی را می‌تواند کاهش دهد.
برای فعالسازی Gzip چه‌کار کنیم؟
قبل از فعالسازی، بهتر است که به سایت Giftofspeed رفته و فعال بودن یا فعال نبودن Gzip در سایتتان را چک کنید.
در صورتی که Gzip روی سایتتان فعال نبود، به شرکت هاستینگ‌تان تیکت بزنید و بخواهید که آن را برایتان فعال کنند.
یک روش دیگر هم برای فعالسازی Gzip در وردپرس وجود دارد که خودتان راحت می‌توانید انجام دهید. فقط کافیست افزونه WP Super Cache استفاده کنید. این افزونه علاوه بر اینکه حجم تصاویر سایت را بهینه میکند، Gzip را نیز روی سایتتان فعال کرده و سرعت بارگذاری را کاهش می‌دهد.
نکته: دقت کنید که استفاده از پلاگین‌های بیش‌ازحد در وردپرس، خود یکی از دلایلی است که باعث می‌شود سرعت سایتتان کم شود. علاوه‌براین استفاده از پلاگین‌های مختلف و بعضاً غیر معتبر، امنیت سایتتان را به خطر می‌اندازد. برای همین توصیه میکنم پلاگین‌ها را تا جای امکان مدیریت کنید و از مفید بودنشان مطمئن شوید.
۲) کدها را تمیزکاری و مرتب کنید
این بخش دیگر مربوط به برنامه‌نویسان و طراحان سایت است. برنامه‌نویس‌های عزیز، حتماً می‌دانید که با تمیز کد زدن، حذف جاهای خالی، فرمت‌های اضافی، توضیحات کد، ویرگول‌ها، کدهای اضافی و خیلی از موارد غیر ضروری دیگر، سرعت بارگذاری صفحه به شکل غیرقابل‌باوری افزایش پیدا میکند؛ پس لطفاً این نکات را جدی بگیرید و به‌کار ببرید.
یکی از ابزارهایی که برای تمیزکاری کدهای CSS خیلی به دادتان می‌رسد، CssNano است. با استفاده این ابزار می‌توانید حجم کدها تا حد زیادی کاهش دهید و سرعت سایتتان را زیاد کنید.
۳) ریدایرکت‌ها را کاهش دهید
اصلاً ریدایرکت چیست؟ ریدایرکت یعنی انتقال کاربر به یک مکان جدید. حالا خود ریدایرکت هم انواع مختلفی دارد و با هدف‌های مختلفی انجام می‌شود. اگر دوست داشتید در این باره بیشتر بدانید، به سری آموزشی ریدایرکت و انواع آن سر بزنید.
حالا ریدایرکت‌ها چه تاثیری روی سرعت صفحه دارند؟
درخت DOM را یادتان هست؟ آنجا دیدید که یک مرورگر غالباً چه مسیری را برای تحویل گرفتن و نمایش سایت شما، پشت سر می‌گذارد. حالا فرض کنید کاربر با ورود به سایت شما، با یک یا چند ریدایرکت، به آدرس دیگری انتقال داده شود؛ در چنین مواقعی بدیهی است که مراحل دیگری به این درخت اضافه و سرعت بارگذاری سایت کم می‌شود.
بد نیست بدانید که ریدایرکت‌ها تاثیر دوچندانی روی کاربران موبایلی دارند که با استفاده از اینترنت‌های ۳G و ۴G سایت شما را باز می‌کنند. کند شدن سایت در این مواقع بیشتر به چشم می‌آید و این همان چیزیست که گوگل را هم عصبانی میکند! پس تا جای امکان استفاده از ریدایرکت را کاهش دهید.
برای چک کردن ریدایرکت‌های سایتتان می‌توانید از Redirect mapper استفاده کنید؛ اگر ریدایرکتی به نظرتان غیرضروری بود، آن را پاک کنید.
۴) از شبکۀ توزیع محتوا (CDN) استفاده کنید
CDN مخفف کلمۀ Content Delivery Network است و معنی آن می‌شود شبکۀ توزیع محتوا.
حالا شبکۀ توزیع محتوا قرار است چه‌کار کند؟
وظیفۀ شبکۀ توزیع محتوا این است که محتوا (شامل کدهای سایت شما، استایل‌شیت‌ها، فونت‌ها، تصاویر و …) را از نزدیک‌ترین فاصلۀ جغرافیایی به سیستم کاربر برساند. این کار سرعت انتقال اطلاعات را تا حد نسبتاً زیادی افزایش می‌دهد و باعث می‌شود که سایت شما سریعتر شود.
در تصویر زیر تفاوت توزیع محتوا با CDN و بدون آن را می‌بینید. در واقع وقتی که از CDN استفاده می‌کنید، انگار شعبه‌ای در یکی از شهرها باز کرده‌اید و وقتی کاربر سفارشی می‌دهد، به‌جای ارسال سفارش از تهران، آن را از همان شهر سریعاً ارسال می‌کنید.
برای ملحق شدن به شبکۀ توزیع محتوا، می‌توانید از شرکت‌های ارائه‌دهندۀ این خدمات (مثل ابر آروان) اشتراک تهیه کنید.
۵) حذف جاوا اسکریپت‌هایی که Render-Blocking می‌کنند
اگر یادتان باشد، گفتیم که رندر کردن یعنی تحویل گرفتن محتوا توسط مرورگر. با این حساب Render-Blocking یعنی چه؟
رندر-بلاکینگ یعنی عملی که مانع تحویل گرفتن (یا همان رندر کردن) محتوای صفحه توسط مرورگر می‌شود.
در واقع، مرورگر قبل از اینکه شروع به تحویل گرفتن صفحه کند، با نشانه‌گذاری‌های HTML یک درخت DOM برای آن می‌سازد. در طول این فرآیند (یعنی تجزیه و تحلیل درخت DOM) اگر مرورگر به موردی (مثل کد جاوا اسکریپت) برخورد کند، عملیات را متوقف و به آن رسیدگی میکند. این وقفه‌ها، گاهی به دلیل صبر کردن برای دانلود فایل جاوا اسکریپت خارجی اتفاق میافتد و اینطوری عملاً رندر اولیۀ صفحه به تعویق میافتد.
بد نیست بدانید که گوگل اصلاً میانۀ خوبی با اسکریپت‌های خارجی که بارگذاری محتوای ابتدایی روی صفحه نمایش (داخل لپتاپ، تبلت، موبایل یا هر جای دیگری) را به تعویق می‌اندازند، ندارد.
در تصویر زیر تفاوت نمایش محتوای ابتدایی و بقیه محتوای صفحه را می‌بینید و فکر میکنم متوجه شوید که محتوای ابتدایی صفحه (Above the fold) چرا این‌قدر مهم است. در واقع نمایش اولیه همان چیزی است که دلِ کاربر را خوش میکند و او را در صفحه نگه می‌دارد؛ پس طبیعتاً نباید کاری کنیم که این نمایش به تعویق بیافتد!
یک نکته: یادتان هست هنگام کار با Google PageSpeed Insight دربارۀ First Paint و First Contentful Paint صحبت کردیم؟ در حقیقت، اولین رسم و اولین رسم معنادار صفحه، همان Above the fold را تشکیل می‌دهند. توصیه میکنم اگر این قسمت‌ها را یادتان نیست، حتماً نیم‌نگاهی به آن بیاندازید
خب، حالا باید برای جلوگیری از بلاک شدن رندر چه‌کار کنیم؟
اولین کاری که باید بکنید این است که متوجه شوید اصلاً صفحۀ شما دچار مشکل Render-Blocking هست یا نه! برای این کار کافی است سایت خود را با همان ابزار گوگل تست کنید. Google PageSpeed Insights به شما می‌گوید چه قسمت‌های در حال حاضر، بلاکرهای سایت شما هستند.
همانطور که می‌بینید، در حال حاضر سایت دیدوگرام ۷ مورد رندر بلاکینگ دارد و اگر همۀ آنها برطرف شوند، حدود ۲.۹۶ از زمان بارگذاری صفحه کم شده و به سرعت آن اضافه می‌شود.
اگر موافق باشید، برویم سراغ راه‌های حذف رندر بلاکرها.
۱- از آوردن کدهای جاوا در Header خودداری کنید
فکر میکنم تا الان چند بار درباره رندر شدن و بارگذاری صفحه صحبت کردیم؛ با این حساب باید بدانید که آوردن اسکریپت در هدر باعث می‌شود اولین رسم محتوا در صفحه (یا تجزیه درخت DOM) با وقفه روبرو شود. پس باید چه کار کنیم؟ بهترین در رابطه اسکریپت‌ها این است که آنها در فوتر صفحه بیاوریم.
۲- اسکریپ‌های ضروری را خطی کنید
گاهی اوقات ممکن است کد جاوا اسکریپ آنقدر ضروری باشد مجبور باشید آن را حتماً در Header بیاورید. در چنین مواقعی، بهتر است به‌جای اسکریپت خارجی (External)، از اسکریپت خطی (Inline) استفاده کنید.
اسکریپت‌های خطی، بر خلاف اسکریپت‌های اکسترنال که محتوا را از یک منبع خارجی می‌خوانند، داخل همان صفحه بارگذاری می‌شوند. فقط دقت کنید که اگر از اسکریپت Inline در هدر استفاده می‌کنید، حتماً حجم آن فشرده باشد.
پس یک بار دیگر مرور کنیم:
- اگر واجب نیست که اسکریپت در هدر صفحه قرار بگیرید، آن را به External در فوتر بیاورید
- اگر واجب است که اسکریپت در هدر قرار بگیرد، آن را به‌صورت Inline در هدر بیاورید و به حجم و اندازه هم توجه کنید
نکته: مواردی که گفتیم، درباره کدهای JQuery هم صدق میکند. برای مثال نیاز نیست کد کم‌اهمیتی که برای فید کردن تصاویر استفاده می‌شود، در هدر سایت قرار بگیرد.
۶) می‌توانید برای نسخۀ موبایل از Google AMP استفاده کنید
AMP یا Accelerated Mobile Page، یک تکنولوژی است که کمک میکند سایت‌های نسخۀ موبایل، در سریعترین حالت ممکن بارگذاری شوند. گوگل این تکنولوژی را در سال ۲۰۱۶ ارائه کرد، تا سایت‌های کند و تنبل بتوانند با استفاده از آن، تکانی به سرعت خود بدهند. از سال ۲۰۱۶ تا الان، حدود ۲۵ میلیون دامنه، بیش از ۱.۵ بیلیون صفحۀ AMP ساخته‌اند.
AMP چگونه کار میکند؟
گوگل سایت‌هایی را که AMP ساخته‌اند پیدا و محتوای آنها را در هاست خودش ذخیره میکند. با این کار هر بار کاربری با موبایلش وارد سایت شما شود، گوگل سریعاً محتوایی که استاندارد AMP دارد را از هاست خودش بارگذاری کرده و نمایش می‌دهد.
برای ساختن صفحۀ AMP باید چه کار کنیم؟
برای این کار شما باید نسخۀ دیگری از سایتتان بسازید که استانداردهای پروژۀ AMP در آن رعایت شده باشد. بعد از ساختن AMP، آدرس سایت در نسخۀ موبایلی به چیزی مشابه site.com/page/amp تغییر میکند و با یک علامت (مثل عکس زیر) در نتایج جستجو نشان داده می‌شود.
توجه: AMP علی‌رغم خوبی‌هایی که دارد، همیشه هم به نفع سایت نیست. مثلاً طراحی UI با محدودیت‌هایی روبرو می‌شود، گاهی کاربر برای نظر دادن باید به نسخۀ غیر AMP منتقل شود (یعنی عملاً دوبار یک صفحه را ببیند) و حتی ممکن است بخشی از دیتاهای گوگل آنالیتیکس را از دست بدهید.
۷. بخش‌های ثابت وبسایت را کش (Cache) کنید
خیلی بخش‌های وبسایت در صفحات مختلف ثابت هستند. برای مثال در همین صفحه قسمت بالا و پایین صفحه با دیگر مقالات مشترک است. می‌توانید با روش کش کردن به سیستم کاربر بگویید این فایل‌ها به این زودی‌ها تغییر نمی‌کند پس آنها را نگه‌دار و هر جای دیگر نیاز بود دوباره دانلود و پردازش نکن.
با این کار فقط در اولین بارگذاری مرورگر قسمت‌هایی را که بدون تغییر هستند را کش میکند. در بارگذاری‌های بعدی به جای تکرار کارهای قبلی از کش استفاده میکند.
البته کش کردن تکنیک‌ها و جزئیات پیچیده‌ای دارد که خارج از موضوع مقاله است. برای سایت‌های وردپرسی افزونه‌های کش خوبی هستند که تمام کارها را خودکار و بدون نیاز به دانش فنی انجام می‌دهند.
برترین افزونه‌های کش مخصوص وردپرس:
- WP Rocket
- WP Super Cache
- W3 Total Cache
جمع‌بندی
بالاخره به پایان یکی دیگر از مقالات نوین رسیدیم. ما سعی کردیم در این مقاله تمام چیزی که از سرعت سایت و روش‌های بهینه‌سازی آن می‌دانستیم، قدم به قدم، با بیانی ساده به شما منتقل کنیم. حالا نوبت شماست تا از این راهکارها استفاده کنید و سایتی بسازید که در ۱ ثانیه 
بارگذاری می‌شود و هیچ مشتری را نمی‌پراند! اگر راه حل دیگری بلدید که می‌توانیم به مقاله اضافه کنیم حتماً ما را در جریان بگذارید؛ اگر هم سوالی داشتید یا جایی از مقاله برایتان گنگ بود، حتماً در بخش نظرات مطرح کنید، ما سعی می‌کنیم در کوتاهترین زمان پاسختان را بدهیم.
نوشته بهترین ابزارهای تست سرعت سایت + آموزش افزایش سرعت اولین بار در نوین. پدیدار شد.