آموزش PageSpeed Insights

از گزارش Think with Google برمی‌آید که ۵۳٪ از کاربران موبایل در صورتی که بارگذاری صفحه بیش از ۳ ثانیه طول بکشد، سایت را ترک می‌کنند. همچنین مطالعه‌ی Akamai نشان می‌دهد که هر ۱۰۰ میلی‌ثانیه تأخیر در زمان بارگذاری، می‌تواند نرخ تبدیل را تا ۷٪ کاهش دهد. تصور کنید بخش بزرگی از مخاطبان شما، دقیقاً در همان ثانیه‌های ابتدایی بارگذاری، ناامید شده و به سایت رقیب سر می‌زنند. در این میان، یک سؤال اساسی مطرح می‌شود: چه راهکارهایی وجود دارد تا سرعت سایت را به سطحی برسانیم که نه فقط کاربر را جلب کند، بلکه امتیاز ما در ابزار PageSpeed Insights نیز در بازه‌ی «عالی» قرار گیرد؟

در این جلسه از دوره‌ رایگان سئو قصد داریم ابزار PageSpeed Insights را به‌طور کامل بررسی کنیم و با ارائه‌ی روش‌های عملی به شما کمک کنیم تا سرعت سایت‌تان را بهینه کنید. پس از شما دعوت می‌شود تا تا پایان این مقاله از آژانس نوآوری رسام با ما همراه باشید و گام‌به‌گام توصیه‌های این ابزار را پیاده سازی کنید.

آشنایی با بخش مهم Page Speed Insights

ابزاری رایگان از گوگل، PageSpeed Insights، امکان تحلیل دقیق سرعت بارگذاری صفحات وب را فراهم می‌کند. این گزارش با در نظر گرفتن دو نسخه‌ی دسکتاپ و موبایل، نمایی جامع از عملکرد سایت ارائه می‌دهد.

سه معیار اصلی برای ارزیابی تجربه کاربری تحت Core Web Vitals در نظر گرفته شده‌اند که هر یک جنبه‌ای از سرعت و پایداری صفحه را می‌سنجند:

 Largest Contentful Paintیا LCP نشان‌دهنده‌ی زمان بارگذاری بزرگ‌ترین المان قابل مشاهده در صفحه است. عدد زیر ۲.۵ ثانیه در بازه‌ی «عالی» قرار می‌گیرد.

 First Input Delayیا FID میزان تأخیر بین اولین تعامل کاربر (مثل کلیک یا لمس) و پاسخ مرورگر را اندازه می‌گیرد. مقدار کمتر از ۱۰۰ میلی‌ثانیه مطلوب است.

Cumulative Layout Shift یا CLS جابه‌جایی غیرمنتظره‌ی المان‌ها در طول لود صفحه را می‌سنجد. امتیاز کمتر از ۰.۱ نشان‌گر پایداری کافی است.

با درک این سه معیار می‌توانید بهتر نقاط ضعف تجربه کاربری را شناسایی کرده و برای بهینه‌سازی آن‌ها برنامه‌ریزی کنید.

امتیاز نسخه موبایل و دسکتاپ

در ابزارPageSpeed Insights، امتیاز نهایی عملکرد صفحه بر پایه‌ی معیارهای مختلفی مانند Core Web Vitals، به‌صورت عددی از ۰ تا ۱۰۰ نمایش داده می‌شود. این امتیاز در سه بازه‌ی مشخص طبقه‌بندی شده تا ارزیابی به‌صورت دقیق‌تر انجام شود:

امتیاز ضعیف بین 0 تا 49؛ نیازمند بهینه سازی جدی

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

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

امتیاز متوسط بین 50 تا 89؛ یک قدم تا سرعت آیده آل

دریافت امتیازی در محدوده‌ی ۵۰ تا ۸۹ نشان می‌دهد که سایت از عملکرد نسبتاً قابل قبولی برخوردار است، اما هنوز برخی موانع فنی مانع از ارائه‌ی یک تجربه‌ی کاربری ایده‌آل می‌شوند. در این بازه، سایت ممکن است سرعت بارگذاری نسبتاً مناسبی داشته باشد، اما برخی صفحات یا عناصر خاص هنوز با کندی، ناپایداری یا تأخیر در واکنش همراه هستند.

معمولاً سایت‌هایی در این محدوده نیازمند بهینه‌سازی‌های جزئی تا متوسط هستند؛ اقداماتی مثل کاهش حجم فایل‌های CSS و JS، حذف منابع مسدودکننده‌ی رندر، بهینه‌سازی فونت‌ها و تنظیم درست کش مرورگر می‌توانند به بهبود سریع امتیاز کمک کنند. هدف این است که با مجموعه‌ای از اقدامات تکنیکی و اصلاحی، سایت به محدوده‌ی امتیاز عالی نزدیک شود و تجربه‌ای روان‌تر برای کاربران رقم بزند

امتیاز عالی بین 90 تا 100؛ شانس بیشتر برای کسب جایگاه بالاتر

سایتی که امتیاز آن در این بازه قرار بگیرد، از دید گوگل عملکرد بسیار مطلوبی دارد. بارگذاری سریع، ثبات طراحی و پاسخ‌دهی مناسب به تعاملات کاربر، از جمله ویژگی‌های سایت‌هایی با امتیاز بالا محسوب می‌شود.

گوگل برای رتبه‌بندی نتایج جستجو، عملکرد صفحات در نسخه‌ی موبایل را مهم‌تر می‌داند؛ بنابراین هدف‌گذاری برای رسیدن به امتیاز بالای ۹۰ در نسخه موبایل، اقدامی هوشمندانه در مسیر بهبود سئو محسوب می‌شود.

تفاوت گزارش دسکتاپ و موبایل

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

با فهم اجزای اساسی این گزارش و دلیل تمرکز ویژه روی موبایل، قادر خواهید بود نقاط ضعف سرعت سایت را شناسایی کرده و برای بهینه‌سازی عملکرد در هر دو پلتفرم دسکتاپ و موبایل آماده شوید.

آغاز مسیر بهینه‌سازی؛ راهکارهایی برای افزایش سرعت سایت

در بخش‌های قبلی با اهمیت سرعت سایت، نقش Core Web Vitals و نحوه‌ی امتیازدهی در پیج اسپید اینسایت آشنا شدید. حالا زمان آن رسیده تا به سراغ راهکارهای عملی برویم؛ اقداماتی که پیاده‌سازی درست آن‌ها می‌تواند مستقیماً بر عملکرد سایت تأثیر بگذارد و تجربه کاربری را بهبود ببخشد.

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

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

بهینه‌سازی تصاویر؛ قدمی بزرگ برای افزایش سرعت سایت

تصاویر نقش مهمی در جذابیت بصری صفحات وب دارند، اما اگر به‌درستی بهینه‌سازی نشده باشند، می‌توانند به یکی از اصلی‌ترین دلایل کند شدن سایت تبدیل شوند. در بسیاری از گزارش‌های PageSpeed Insights، تصاویر حجیم یا با فرمت نامناسب به‌عنوان یکی از عوامل اصلی کاهش امتیاز سرعت شناسایی می‌شوند. در ادامه هر یک از اقدامات لازم را برای بهینه سازی تصاویر مورد بررسی قرار خواهیم داد.

استفاده از فرمت‌های جدید مانند WebP

این فرمت مدرن حجم بسیار کمتری نسبت به PNG و JPG دارد، بدون اینکه کیفیت تصویر افت محسوسی پیدا کند. ابزارهایی مثل TinyPNG یا Squoosh می‌توانند به تبدیل و فشرده‌سازی تصاویر کمک کنند. البته با نصب پلاگین در فتوشاپ نیز می توانید خروجی تصاویر را به صورت Webp ذخیره کنید.

تغییر سایز تصاویر بر اساس نیاز واقعی سایت

بارگذاری تصویری با عرض ۲۴۰۰ پیکسل برای باکسی که تنها ۴۰۰ پیکسل فضا دارد، باعث هدر رفتن منابع و کاهش سرعت خواهد شد. ابعاد دقیق را بررسی و تصاویر را با اندازه‌ی موردنیاز آپلود کنید.

فعال‌سازی Lazy Load

با این تکنیک، تصاویر تنها زمانی بارگذاری می‌شوند که کاربر به آن بخش از صفحه برسد. این ویژگی باعث می‌شود زمان لود اولیه صفحه به‌طور چشمگیری کاهش یابد. اکثر قالب‌های وردپرس مدرن یا افزونه‌هایی مثل WP Rocket از این قابلیت پشتیبانی می‌کنند.

استفاده از CDN برای نمایش سریع‌تر تصاویر

شبکه‌های تحویل محتوا (CDN) مانند Cloudflare یا BunnyCDN تصاویر را از نزدیک‌ترین سرور به کاربر ارائه می‌دهند و این موضوع منجر به سرعت بهتر و تأخیر کمتر در بارگذاری می‌شود.

کاهش حجم فایل‌های CSS و JS

فایل‌های CSS و JS معمولاً بخش زیادی از منابع سایت شما را تشکیل می‌دهند. اگر این فایل‌ها حجم زیادی داشته باشند، باعث می‌شوند تا بارگذاری صفحه کندتر انجام شود و زمان انتظار کاربر بیشتر شود.

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

فشرده‌سازی فایل‌های CSS و JS

فشرده‌سازی یا Minification یکی از ساده‌ترین روش‌ها برای کاهش حجم فایل‌ها است. در این فرایند، کدهای اضافی مانند فضاهای خالی، کاماهای اضافی، یا کامنت‌ها از فایل‌ها حذف می‌شوند، بدون اینکه بر عملکرد آن‌ها تأثیر بگذارد. ابزارهایی مانندCSS Minifier و JS Minifier این کار را به‌راحتی انجام می‌دهند و حجم فایل‌های شما را تا حد زیادی کاهش می‌دهند.

حذف کدهای اضافی

بسیاری از فایل‌های CSS و JS ممکن است شامل کدهایی باشند که در هیچ‌کدام از صفحات سایت استفاده نمی‌شوند. حذف این کدهای اضافی به کاهش حجم فایل‌ها و تسریع بارگذاری سایت کمک می‌کند. ابزارهایی مانند PurgeCSS یا UnCSS می‌توانند به شناسایی و حذف این کدها کمک کنند. این کار باعث می‌شود که تنها کدهای موردنیاز و ضروری در سایت شما باقی بماند.

بارگذاری غیرهمزمان یا تأخیری فایل‌های JS

معمولاً فایل‌های JS در بارگذاری اولیه صفحه اختلال ایجاد می‌کنند، چون مرورگر باید منتظر بماند تا این فایل‌ها بارگذاری شوند تا بعداً بتواند صفحه را نمایش دهد. با استفاده از ویژگی‌های “async” یا “defer” می‌توانید این فایل‌ها را به‌صورت غیرهمزمان یا با تأخیر بارگذاری کنید. این کار باعث می‌شود که سایر بخش‌های صفحه سریع‌تر بارگذاری شوند، در حالی که اسکریپت‌های JS در پس‌زمینه بارگذاری می‌شوند.

• Async این ویژگی به فایل‌های JS اجازه می‌دهد تا به‌طور همزمان با بارگذاری صفحه، دانلود شوند و بدون تأثیر بر روند بارگذاری صفحه اجرا شوند.
• Defer این ویژگی باعث می‌شود فایل‌های JS پس از بارگذاری کامل HTML، بارگذاری و اجرا شوند.

استفاده از فایل‌های مشترک

به‌جای بارگذاری مجدد فایل‌های CSS و JS برای هر صفحه از سایت، می‌توانید این فایل‌ها را به‌گونه‌ای تنظیم کنید که در تمام صفحات مشترک باشند. با این کار، مرورگر نیاز ندارد تا فایل‌ها را هر بار بارگذاری کند، بلکه آن‌ها را در کش خود ذخیره می‌کند و تنها در صورت تغییر در این فایل‌ها، آن‌ها دوباره بارگذاری می‌شوند. این روش به‌طور قابل‌توجهی زمان بارگذاری صفحات بعدی را کاهش می‌دهد.

کاهش زمان بارگذاری صفحات با کش مرورگر؛ تکنیکی که نباید از آن غافل شوید!

کش مرورگر یکی از تکنیک‌های مؤثر در بهینه‌سازی سرعت سایت است که نقش مهمی در تجربه کاربری ایفا می‌کند. وقتی کاربر به سایت شما وارد می‌شود، مرورگر آن‌ها فایل‌هایی مانند تصاویر، CSS، JS و HTML را ذخیره می‌کند. این فایل‌ها در کش مرورگر ذخیره می‌شوند تا در بازدیدهای بعدی، نیازی به بارگذاری مجدد آن‌ها نباشد. در نتیجه، زمان بارگذاری صفحات کاهش می‌یابد و کاربر می‌تواند سریع‌تر به محتوای موردنظر دسترسی پیدا کند.

این ویژگی باعث بهبود تجربه کاربری و کاهش فشار روی سرور می‌شود، زیرا درخواست‌های اضافی برای بارگذاری فایل‌های مشابه از سرور به مرورگر فرستاده نمی‌شود. در نهایت، کش مرورگر می‌تواند تأثیر قابل توجهی در کاهش زمان بارگذاری سایت و بهبود رتبه‌بندی صفحات در نتایج جستجو داشته باشد.

افزونه‌هایی مانند WP Rocket این امکان را فراهم می‌کنند که کش مرورگر را به طور خودکار و بهینه مدیریت کنید. این افزونه به شما کمک می‌کند تا تنظیمات کش مرورگر را برای فایل‌های مختلف به‌طور مؤثر انجام دهید و به سرعت سایت شما افزوده شود.

با تکنولوژی CDN زمان سرعت لود سایت را نصف کنید

یکی دیگر از راهکارهای مؤثر برای افزایش سرعت سایت، استفاده از CDN یا همان شبکه توزیع محتوا است. این سیستم با ایجاد نسخه‌هایی از سایت شما در سرورهای مختلف در سراسر جهان، کاری می‌کند که کاربران به نزدیک‌ترین سرور دسترسی پیدا کنند. در نتیجه، زمان پاسخ‌دهی به درخواست کاربر کاهش پیدا می‌کند و سایت با سرعت بیشتری بارگذاری می‌شود.

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

CDN علاوه بر افزایش سرعت، در امنیت و کاهش مصرف پهنای باند نیز مؤثر است. بسیاری از سرویس‌های معتبر مانند Cloudflare، این امکان را با تنظیمات ساده و حتی پلن رایگان در اختیار وب‌سایت‌ها قرار می‌دهند. در نتیجه، استفاده از CDN یک گام هوشمندانه در مسیر بهینه‌سازی عملکرد سایت محسوب می‌شود. از سرویس‌های CDN ایرانی نیز می‌توان به موارد زیر اشاره کرد:

• ابر آروان
• هاست‌دی‌ال
• پارس‌پک
• ابر زس

این سرویس‌ها گزینه‌های مناسبی برای سایت‌هایی با مخاطب داخلی هستند و می‌توانند بهبود قابل‌توجهی در سرعت و پایداری سایت ایجاد کنند.

حذف افزونه‌های غیرضروری؛ گامی ساده اما حیاتی برای افزایش سرعت سایت

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

افزونه‌های غیرضروری باعث سنگین شدن پایگاه داده، تداخل‌های سیستمی، مصرف بی‌رویه منابع و افزایش درخواست‌های HTTP می‌شوند. در نتیجه، سرعت بارگذاری کاهش می‌یابد و امتیاز PageSpeed Insights نیز افت می‌کند. این موضوع نه‌تنها بر تجربه کاربری تأثیر منفی دارد، بلکه می‌تواند باعث کاهش رتبه سایت در نتایج جستجوی گوگل شود.

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

سرعت سایت، عامل کلیدی در موفقیت سئو

سرعت سایت نه‌تنها تجربه کاربری را بهبود می‌بخشد، بلکه یکی از فاکتورهای مهم در رتبه‌بندی نتایج گوگل محسوب می‌شود. کاربری که در کمتر از چند ثانیه به محتوای موردنظرش دسترسی پیدا کند، با احتمال بیشتری در سایت باقی می‌ماند و این یعنی کاهش نرخ پرش و افزایش نرخ تعامل.

در این مسیر، ابزارهایی مانند PageSpeed Insights به عنوان یک راهنمای دقیق و قابل اعتماد، نقاط ضعف سایت را به شما نشان می‌دهند. از تصاویر سنگین گرفته تا فایل‌های CSS و JS پرحجم یا افزونه‌های بلااستفاده، هر کدام می‌توانند بر عملکرد سایت تأثیرگذار باشند. همچنین راهکارهایی مانند استفاده از شبکه توزیع محتوا (CDN)، فعال‌سازی کش مرورگر و بهینه‌سازی فایل‌ها، از جمله اقداماتی هستند که می‌توانند بهبود چشمگیری در سرعت سایت ایجاد کنند.

به یاد داشته باشید که کاربران موبایل در اولویت گوگل قرار دارند. به همین دلیل، کسب امتیاز بالا در نسخه موبایل PageSpeed Insights باید یکی از اهداف اصلی شما در فرآیند بهینه‌سازی باشد.

در این جلسه از آموزش سئو رایگان، به بررسی ابزار پیج اسپید اینسایت و راهکارهای افزایش سرعت پرداختیم. حال نوبت شماست: اگر سوال، تجربه یا نکته‌ای درباره این موضوع دارید، باعث افتخار است که آن را با متخصصین آژانس نوآوری رسام به اشتراک بگذارید. موفق باشید 😎