PageSpeed Insights یکی از ابزارهای کاربردی برای بررسی عملکرد صفحات وب است. این ابزار اطلاعاتی درباره سرعت بارگذاری، تجربه کاربران و مشکلات فنی احتمالی ارائه می‌دهد. با این حال، گاهی گزارش آن شامل توصیه‌هایی است که در نگاه اول پیچیده به نظر می‌رسند یا مشخص نیست برای رفع آن‌ها باید از کجا شروع کرد.
اگر با وردپرس کار می‌کنید، احتمالا با پیشنهادهایی مانند حذف منابع مسدودکننده رندر، کاهش زمان پاسخ‌گویی سرور، بهینه‌سازی تصاویر و کاهش زمان اجرای JavaScript روبه‌رو شده‌اید. هرکدام از این موارد به بخشی از فرایند بارگذاری صفحه مربوط است و راهکار یکسانی برای همه سایت‌ها ندارد.
گزارش PageSpeed Insights را می‌توان به دو بخش مهم تقسیم کرد:
- فرصت‌ها (Opportunities): پیشنهادهایی برای بهبود عملکرد که معمولا به منابع، تصاویر، زمان پاسخ‌گویی و نحوه بارگذاری صفحه مربوط هستند.
- تشخیص‌ها (Diagnostics): اطلاعات و بررسی‌هایی درباره مشکلات فنی و الگوهای توسعه که می‌توانند به شناسایی عوامل مؤثر بر عملکرد کمک کنند.
این دسته‌بندی به معنی آن نیست که تمام موارد بخش فرصت‌ها ضروری یا تمام موارد بخش تشخیص‌ها کم‌اهمیت هستند. برای تصمیم‌گیری باید نوع مشکل، تأثیر آن بر شاخص‌های واقعی سرعت و هزینه اصلاح را در نظر گرفت.
در این راهنما، رایج‌ترین توصیه‌های PageSpeed Insights را به زبان ساده بررسی می‌کنیم و برای هرکدام، راهکارهای عملی و نکات مهم پیاده‌سازی در وردپرس را توضیح می‌دهیم.
بخش فرصت‌ها (Opportunities) در PageSpeed Insights
در بخش فرصت‌ها، PageSpeed Insights مشکلات یا زمینه‌هایی را مشخص می‌کند که اصلاح آن‌ها ممکن است عملکرد صفحه را بهتر کند. در بعضی گزارش‌ها، ابزار میزان صرفه‌جویی احتمالی در زمان بارگذاری را هم تخمین می‌زند.
این اعداد برآورد هستند و تضمین نمی‌کنند که پس از اجرای پیشنهاد، دقیقا همان مقدار از زمان بارگذاری کم شود. نتیجه نهایی به ساختار صفحه، تنظیمات سرور، دستگاه کاربر، وضعیت شبکه و سایر منابع وابسته است.
برخی از توصیه‌های رایج این بخش عبارت‌اند از:
- حذف منابع مسدودکننده رندر و CSS استفاده‌نشده
- کاهش زمان پاسخ‌گویی سرور
- کوچک‌سازی فایل‌های CSS و JavaScript
- حذف ریدایرکت‌های غیرضروری
- فعال‌سازی فشرده‌سازی متن
- برقراری ارتباط زودهنگام با مبدأهای موردنیاز
- بارگذاری زودهنگام منابع حیاتی
- بارگذاری تنبل تصاویر خارج از محدوده دید
- ارائه تصاویر با ابعاد مناسب
- بهینه‌سازی فشرده‌سازی تصاویر
- استفاده از فرمت‌های تصویری مدرن مانند WebP و AVIF
۱. حذف منابع مسدودکننده رندر و CSS استفاده‌نشده
مرورگر برای نمایش یک صفحه ابتدا HTML را پردازش می‌کند و بر اساس ساختار آن، منابعی مانند فایل‌های CSS و JavaScript را دریافت و اجرا می‌کند. بعضی از این منابع برای نمایش صحیح صفحه ضروری هستند، اما برخی دیگر ممکن است بارگذاری و نمایش محتوای قابل مشاهده را به تأخیر بیندازند.
منبع مسدودکننده رندر، منبعی است که پردازش آن می‌تواند نمایش اولیه صفحه را به تعویق بیندازد. برای مثال، فایل CSS که باید پیش از نمایش صحیح صفحه دریافت و پردازش شود، ممکن است در مسیر رندر اولیه قرار بگیرد. اسکریپت‌های JavaScript نیز بسته به نحوه درج و اجرا می‌توانند مانع ادامه پردازش HTML شوند.
در مقابل، CSS استفاده‌نشده به کدهای استایلی گفته می‌شود که در صفحه فعلی کاربردی ندارند. این کدها ممکن است از قالب، افزونه یا فایل‌های مشترک سایت بارگذاری شوند، در حالی که صفحه فقط به بخشی از آن‌ها نیاز دارد.
برای مثال، ممکن است یک افزونه فرم‌ساز فایل‌های CSS و JavaScript خود را در تمام صفحات بارگذاری کند، در حالی که فرم فقط در صفحه تماس وجود دارد. در چنین شرایطی، محدود کردن بارگذاری منابع به صفحات موردنیاز می‌تواند به کاهش حجم دانلود و پردازش مرورگر کمک کند.
هدف این نیست که همه فایل‌های CSS و JavaScript را حذف کنیم. برخی منابع برای نمایش صحیح صفحه یا عملکرد منوها، فرم‌ها و بخش‌های تعاملی ضروری هستند. حذف یا به‌تعویق‌انداختن نادرست آن‌ها می‌تواند باعث به‌هم‌ریختگی ظاهر یا از کار افتادن امکانات سایت شود.
چگونه منابع مسدودکننده رندر را در وردپرس بهینه کنیم؟
ابتدا مشخص کنید کدام فایل‌ها واقعا بر نمایش اولیه صفحه تأثیر می‌گذارند. برای این کار می‌توانید از گزارش PageSpeed Insights، تب Network در ابزار توسعه‌دهندگان مرورگر و ابزارهای تحلیل آبشاری مانند WebPageTest استفاده کنید.
سپس متناسب با ساختار سایت، این اقدامات را بررسی کنید:
- CSS ضروری برای نمایش بخش قابل مشاهده صفحه را شناسایی و در صورت امکان بهینه کنید.
- بارگذاری CSS غیرضروری را به تعویق بیندازید یا آن را فقط در صفحات موردنیاز بارگذاری کنید.
- برای اسکریپت‌هایی که به اجرای فوری نیاز ندارند، استفاده از ویژگی‌های
deferیا در شرایط مناسبasyncرا بررسی کنید. - فایل‌های CSS و JavaScript افزونه‌هایی را که در یک صفحه استفاده نمی‌شوند، با دقت مدیریت کنید.
افزونه‌هایی مانند WP Rocket می‌توانند بخشی از این فرایند را خودکار کنند. این افزونه قابلیت‌هایی برای بهینه‌سازی تحویل CSS و به‌تعویق‌انداختن اجرای JavaScript دارد. نام گزینه‌ها و رفتار آن‌ها ممکن است با نسخه افزونه تغییر کند.
پس از فعال‌سازی هر قابلیت، صفحات مهم سایت را در موبایل و دسکتاپ آزمایش کنید. به‌ویژه منوها، فرم‌ها، اسلایدرها، پنجره‌های بازشو و فرایند خرید را بررسی کنید. اگر ظاهر یا عملکرد صفحه مختل شد، تنظیمات را بازبینی کنید و فایل‌های ناسازگار را از فرایند بهینه‌سازی مستثنا کنید.
نکته مهم این است که رسیدن به امتیاز کامل PageSpeed نباید به قیمت خراب شدن سایت تمام شود. بهینه‌سازی موفق یعنی بهبود واقعی تجربه کاربر با حفظ عملکرد صحیح صفحه.
۲. کاهش زمان پاسخ‌گویی سرور (TTFB)
TTFB مخفف عبارت Time to First Byte است و مدت‌زمانی را نشان می‌دهد که از شروع درخواست تا دریافت نخستین بایت پاسخ از سرور سپری می‌شود. این شاخص شامل مراحل مختلفی از برقراری ارتباط تا پردازش درخواست و آغاز پاسخ سرور است.
اگر سرور برای پاسخ‌گویی زمان زیادی صرف کند، مرورگر دیرتر دریافت HTML صفحه را آغاز می‌کند. این تاخیر می‌تواند بر بارگذاری محتوای اصلی و شاخص‌هایی مانند LCP تاثیر بگذارد، به‌ویژه زمانی که صفحه به‌صورت پویا و با وردپرس تولید می‌شود.
برای کاهش TTFB، فقط به ارتقای پلن میزبانی اکتفا نکنید. ابتدا مشخص کنید تأخیر از کدام بخش ناشی می‌شود.
- کش صفحه را برای صفحات عمومی و قابل کش فعال و به‌درستی تنظیم کنید.
- نسخه PHP و تنظیمات پردازش آن را متناسب با سازگاری سایت بررسی کنید.
- زمان اجرای کوئری‌های پایگاه داده و کدهای سنگین وردپرس را ارزیابی کنید.
- افزونه‌ها و قابلیت‌هایی را که پردازش غیرضروری ایجاد می‌کنند شناسایی کنید.
- وضعیت منابع سرور، مانند CPU، حافظه و محدودیت‌های پردازش را بررسی کنید.
- در صورت نیاز، از CDN و کش در لایه‌های مناسب استفاده کنید.
TTFB پایین به‌تنهایی تضمین‌کننده سرعت بالای صفحه نیست. پس از دریافت پاسخ سرور، مرورگر همچنان باید منابع را دانلود و پردازش کند. بنابراین این شاخص را در کنار LCP و سایر معیارهای عملکرد بررسی کنید.
۳. کوچک‌سازی فایل‌های CSS و JavaScript
کوچک‌سازی یا Minification به حذف بخش‌های غیرضروری از کد، مانند فاصله‌ها، خطوط خالی و توضیحات، گفته می‌شود. این فرایند معمولا حجم فایل‌های HTML، CSS و JavaScript را کاهش می‌دهد، بدون آنکه رفتار مورد انتظار کد تغییر کند.
کاهش حجم فایل‌ها می‌تواند انتقال آن‌ها از شبکه را سریع‌تر کند، به‌ویژه زمانی که منابع حجیم باشند یا ارتباط اینترنت کاربر محدودیت داشته باشد. با این حال، مقدار بهبود به حجم اولیه فایل‌ها، نحوه فشرده‌سازی انتقال و سایر عوامل بستگی دارد.
کوچک‌سازی با ترکیب فایل‌ها متفاوت است. ترکیب یا Combination چند فایل را به یک فایل تبدیل می‌کند. در سایت‌های امروزی که از HTTP/2 یا HTTP/3 استفاده می‌کنند، ترکیب فایل‌ها لزوما باعث افزایش سرعت نمی‌شود و گاهی به دلیل ایجاد فایل‌های بزرگ‌تر یا بارگذاری منابع غیرضروری، نتیجه معکوس دارد.
چگونه CSS و JavaScript را کوچک‌سازی کنیم؟
می‌توانید از ابزارهای فرایند ساخت پروژه برای تولید فایل‌های بهینه‌شده استفاده کنید یا قابلیت کوچک‌سازی یک افزونه کش وردپرس را به کار بگیرید. WP Rocket و برخی افزونه‌های بهینه‌سازی دیگر امکاناتی برای کوچک‌سازی CSS و JavaScript دارند.
کوچک‌سازی و به‌ویژه ترکیب فایل‌ها را ابتدا در محیط آزمایشی یا با امکان بازگشت سریع امتحان کنید. پس از اعمال تغییرات، کش را پاک کنید و صفحات مهم را بررسی کنید تا مطمئن شوید ظاهر سایت و قابلیت‌های آن بدون مشکل کار می‌کنند.
۴. حذف ریدایرکت‌های غیرضروری
ریدایرکت زمانی استفاده می‌شود که یک آدرس باید کاربر یا مرورگر را به آدرس دیگری منتقل کند. این قابلیت برای تغییر دامنه، اصلاح URL، انتقال صفحات و مدیریت نسخه‌های مختلف آدرس ضروری است. مشکل زمانی ایجاد می‌شود که برای رسیدن به مقصد نهایی، چند انتقال پشت سر هم اتفاق بیفتد.
برای مثال، اگر آدرس یک صفحه ابتدا به نسخه HTTPS، سپس به نسخه دارای اسلش انتهایی و در نهایت به URL دیگری منتقل شود، مرورگر باید چند مرحله را طی کند. این زنجیره می‌تواند زمان رسیدن به محتوای نهایی را افزایش دهد.
برای رفع مشکل، لینک‌های داخلی را به آدرس نهایی تغییر دهید، ریدایرکت‌های تکراری را اصلاح کنید و در صورت امکان، زنجیره انتقال را به یک ریدایرکت مستقیم تبدیل کنید. ریدایرکت‌های ضروری را صرفا برای بهبود امتیاز حذف نکنید و هنگام تغییر URLهای قدیمی، ارتباط صفحات و وضعیت سئو را حفظ کنید.
۵. فعال‌سازی فشرده‌سازی متن
فایل‌های HTML، CSS، JavaScript و سایر منابع متنی را می‌توان پیش از انتقال از سرور فشرده کرد تا حجم داده‌های ارسالی کاهش یابد. Gzip و Brotli از روش‌های رایج فشرده‌سازی هستند.
اگر PageSpeed Insights پیشنهاد فعال‌سازی فشرده‌سازی متن را نشان می‌دهد، ابتدا بررسی کنید سرور یا CDN چه نوع فشرده‌سازی‌ای را برای منابع مناسب ارائه می‌کند. در بسیاری از زیرساخت‌های امروزی، این قابلیت از قبل فعال است و نیازی به نصب افزونه جداگانه ندارد.
برای بررسی، می‌توانید هدرهای پاسخ HTTP را در ابزار توسعه‌دهندگان مرورگر یا ابزارهای بررسی هدر مشاهده کنید. وجود هدرهایی مانند Content-Encoding: gzip یا Content-Encoding: br نشان می‌دهد پاسخ با یکی از این روش‌ها فشرده شده است. پیکربندی باید به‌گونه‌ای باشد که منابع مناسب فشرده شوند و فایل‌های فشرده دوباره به‌اشتباه فشرده نشوند.
۶. برقراری ارتباط زودهنگام با مبدأهای موردنیاز
گاهی صفحه برای بارگذاری منابعی مانند فونت، تصویر یا اسکریپت به دامنه‌های دیگری نیاز دارد. مرورگر باید برای دریافت این منابع با مبدأ خارجی ارتباط برقرار کند و این مرحله ممکن است تأخیر ایجاد کند.
سه تکنیک مرتبط وجود دارد که کاربردهای متفاوتی دارند:
- DNS Prefetch: مرورگر نام دامنه را از قبل به آدرس IP تبدیل می‌کند تا بخشی از تأخیر درخواست آینده کاهش یابد.
- Preconnect: مرورگر را به برقراری زودهنگام ارتباط با مبدأ خارجی، از جمله مراحل لازم برای اتصال، راهنمایی می‌کند.
- Preload: به مرورگر اعلام می‌کند که یک منبع مهم باید زودتر دریافت شود.
این روش‌ها جایگزین یکدیگر نیستند. انتخاب آن‌ها باید بر اساس نوع منبع و نقش آن در بارگذاری صفحه انجام شود. برای مثال، اگر فونت خارجی واقعا برای نمایش اولیه ضروری باشد، Preconnect می‌تواند مفید باشد، اما اگر امکان میزبانی فونت به‌صورت محلی وجود داشته باشد، این گزینه هم ارزش بررسی دارد.
از اضافه کردن تعداد زیادی Preconnect یا Preload بدون بررسی خودداری کنید. ارتباط‌های زودهنگام و دانلودهای با اولویت بالا منابع مرورگر را مصرف می‌کنند و اگر به منابع غیرضروری اختصاص پیدا کنند، ممکن است به بارگذاری منابع مهم‌تر آسیب بزنند.
۷. بارگذاری زودهنگام منابع حیاتی (Preload)
بعضی منابع برای نمایش سریع محتوای اصلی صفحه اهمیت زیادی دارند. اگر مرورگر آن‌ها را دیر شناسایی کند، ممکن است پس از دانلود و پردازش منابع دیگر تازه درخواستشان را آغاز کند. Preload به مرورگر کمک می‌کند یک منبع مهم را زودتر شناسایی و دریافت کند.
این روش ممکن است برای فونت ضروری یا تصویر اصلی صفحه که عامل LCP است مفید باشد. با این حال، پیش‌بارگذاری هر فایل CSS یا تصویر به‌صورت خودکار سرعت را بهتر نمی‌کند. اگر منبع اشتباه انتخاب شود یا منابع زیادی با اولویت بالا درخواست شوند، رقابت بر سر پهنای باند می‌تواند نتیجه نامطلوبی ایجاد کند.
در وردپرس، ابتدا با بررسی Waterfall یا گزارش LCP مشخص کنید منبع اصلی با تأخیر کشف می‌شود یا خیر. سپس از روش مناسب برای اعلام زودهنگام آن استفاده کنید. برخی افزونه‌های کش و بهینه‌سازی نیز برای منابع منتخب چنین امکاناتی دارند.
۸. به‌تعویق‌انداختن بارگذاری تصاویر خارج از محدوده دید (Lazy Loading)
وقتی کاربر صفحه‌ای را باز می‌کند، معمولا همه تصاویر آن را به‌طور هم‌زمان نمی‌بیند. تصاویر پایین صفحه ممکن است تا زمانی که کاربر به بخش مربوطه برسد، ضرورتی برای دانلود فوری نداشته باشند.
Lazy Loading یا بارگذاری تنبل روشی است که دریافت تصاویر خارج از محدوده دید را تا نزدیک شدن آن‌ها به بخش قابل مشاهده صفحه به تعویق می‌اندازد. این کار می‌تواند حجم دانلود اولیه را کاهش دهد و منابع شبکه را برای محتوای مهم‌تر آزاد کند.
در بسیاری از سایت‌های وردپرسی، بارگذاری تنبل تصاویر با امکانات داخلی وردپرس یا افزونه‌های کش و بهینه‌سازی مدیریت می‌شود. بهتر است ابتدا بررسی کنید کدام قابلیت‌ها از قبل فعال هستند تا چند ابزار یک کار را هم‌زمان انجام ندهند.
نکته مهم: تصویر اصلی بالای صفحه، به‌خصوص تصویری که عنصر LCP محسوب می‌شود، معمولا نباید Lazy Load شود. به‌تعویق‌انداختن این تصویر ممکن است نمایش محتوای اصلی را کندتر کند. بارگذاری تنبل را برای تصاویر غیرضروری در ابتدای صفحه و تصاویر پایین‌تر به کار ببرید و نتیجه را آزمایش کنید.
۹. ارائه تصاویر با ابعاد مناسب
اگر یک تصویر بزرگ در فضایی کوچک نمایش داده شود، مرورگر ممکن است داده‌هایی را دانلود کند که برای نمایش فعلی ضروری نیستند. برای مثال، استفاده از تصویر ۲۰۰۰ پیکسلی در بخشی با عرض ۳۰۰ پیکسل، در صورتی که نسخه کوچک‌تری قابل استفاده باشد، می‌تواند حجم دانلود را بی‌دلیل افزایش دهد.
برای رفع این مشکل، ابعاد تصویر را متناسب با فضای نمایش انتخاب کنید و از ویژگی‌هایی مانند srcset و sizes بهره ببرید تا مرورگر بتواند نسخه مناسب را برای اندازه صفحه و وضوح دستگاه انتخاب کند. وردپرس برای بسیاری از تصاویر بارگذاری‌شده، نسخه‌های مختلف تولید می‌کند، اما قالب و نحوه درج تصویر هم در استفاده صحیح از آن‌ها مؤثر است.
اگر می‌خواهید جزئیات بیشتری درباره کاهش حجم و انتخاب ابعاد مناسب بدانید، راهنمای بهینه‌سازی تصاویر سایت را مطالعه کنید.
۱۰. فشرده‌سازی و بهینه‌سازی تصاویر
بهینه‌سازی تصاویر تنها به کوچک کردن ابعاد آن‌ها محدود نمی‌شود. انتخاب فرمت مناسب، تنظیم سطح فشرده‌سازی و حذف داده‌های غیرضروری می‌توانند حجم فایل را کاهش دهند، بدون آنکه کیفیت بصری به شکل محسوسی افت کند.
برای بهینه‌سازی تصاویر سایت، این موارد را بررسی کنید:
- انتخاب فرمت متناسب با نوع تصویر، مانند عکس، تصویر شفاف یا گرافیک ساده
- کاهش ابعاد فایل متناسب با اندازه نمایش
- استفاده از فشرده‌سازی متعادل با حفظ کیفیت قابل قبول
- تولید نسخه‌های مناسب برای اندازه‌های مختلف صفحه
- جلوگیری از بارگذاری فایل‌های حجیم در بخش‌هایی که به آن‌ها نیازی نیست
ابزارهایی مانند Imagify و سایر سرویس‌های بهینه‌سازی تصویر می‌توانند بخشی از این فرایند را خودکار کنند. پیش از فعال‌سازی تبدیل خودکار، کیفیت تصاویر، پشتیبانی مرورگرها و نحوه ارائه نسخه جایگزین را بررسی کنید.
۱۱. استفاده از فرمت‌های تصویری مدرن مانند WebP و AVIF
WebP و AVIF فرمت‌هایی هستند که می‌توانند در بسیاری از موارد تصاویر را با حجم کمتری نسبت به JPEG و PNG ارائه کنند. میزان صرفه‌جویی به نوع تصویر، تنظیمات فشرده‌سازی و کیفیت موردنیاز بستگی دارد.
برای استفاده از این فرمت‌ها، می‌توانید تصاویر را هنگام بارگذاری یا با ابزارهای بهینه‌سازی به فرمت مناسب تبدیل کنید. سپس مطمئن شوید سرور یا افزونه، فایل مناسب را به مرورگر ارائه می‌کند و در صورت نیاز، نسخه جایگزین نیز در دسترس است.
تبدیل همه تصاویر به یک فرمت بدون بررسی نتیجه همیشه بهترین تصمیم نیست. تصاویر شفاف، گرافیک‌های ساده و عکس‌ها ممکن است به تنظیمات متفاوتی نیاز داشته باشند. کیفیت نهایی و سازگاری با روش ارائه تصاویر سایت را بررسی کنید.
بخش تشخیص‌ها (Diagnostics) در PageSpeed Insights
بخش تشخیص‌ها اطلاعاتی درباره ساختار صفحه، نحوه اجرای کدها و عواملی ارائه می‌دهد که می‌توانند بر عملکرد تأثیر بگذارند. این موارد همیشه به معنی وجود یک خطای فوری نیستند، اما به شما کمک می‌کنند ریشه مشکلات را بهتر پیدا کنید.
از جمله توصیه‌های رایج این بخش می‌توان به موارد زیر اشاره کرد:
- نمایش متن هنگام بارگذاری فونت‌های وب
- کاهش زمان اجرای JavaScript و کار پردازشی صفحه
- استفاده از سیاست مناسب کش مرورگر
- کاهش حجم انتقال داده‌های صفحه
- جلوگیری از بزرگ شدن بیش از حد DOM
- کاهش زنجیره درخواست‌های حیاتی
۱. نمایش متن هنگام بارگذاری فونت‌های وب
فونت‌های وب به مرورگر اجازه می‌دهند متن را با ظاهر و هویت بصری موردنظر سایت نمایش دهد. اما اگر دریافت فونت به تأخیر بیفتد، ممکن است نمایش متن نیز به تأخیر بیفتد یا در زمان بارگذاری، تغییر ظاهری قابل توجهی رخ دهد.
ویژگی CSS به نام font-display می‌تواند نحوه نمایش متن در زمان بارگذاری فونت را کنترل کند. مقدار swap به مرورگر اجازه می‌دهد ابتدا از یک فونت جایگزین استفاده کند و پس از آماده شدن فونت اصلی، آن را جایگزین کند.
این روش می‌تواند از نامرئی ماندن متن جلوگیری کند، اما ممکن است تغییر فونت باعث جابه‌جایی برخی عناصر شود. برای کاهش این تغییرات، فونت جایگزینی انتخاب کنید که از نظر اندازه و ویژگی‌های نوشتاری به فونت اصلی نزدیک باشد.
برای بهبود بارگذاری فونت، تعداد وزن‌ها و سبک‌های موردنیاز را محدود کنید، فایل‌های فونت را در صورت امکان بهینه کنید و فقط فونت‌های ضروری برای نمایش اولیه را در اولویت قرار دهید. پیش‌بارگذاری فونت هم فقط زمانی توصیه می‌شود که آن فونت برای نمایش محتوای مهم صفحه ضروری باشد.
۲. کاهش زمان اجرای JavaScript و کار پردازشی صفحه
مرورگر برای اجرای JavaScript باید کد را دریافت، تجزیه و در صورت نیاز کامپایل کند و سپس آن را اجرا کند. اگر صفحه اسکریپت‌های زیادی داشته باشد یا کدهای سنگین در زمان نامناسب اجرا شوند، ممکن است پردازش صفحه طولانی شود و تعامل با آن با تأخیر همراه باشد.
برای کاهش این مشکل، ابتدا اسکریپت‌هایی را شناسایی کنید که بیشترین زمان پردازش را مصرف می‌کنند. سپس بررسی کنید آیا همه آن‌ها برای همان صفحه ضروری هستند یا خیر.
- اسکریپت افزونه‌هایی را که در صفحه استفاده نمی‌شوند، در صورت امکان از بارگذاری خارج کنید.
- اجرای کدهای غیرضروری را به زمان مناسب‌تری منتقل کنید.
- اسکریپت‌های سنگین را به بخش‌های کوچک‌تر تقسیم کنید یا بارگذاری آن‌ها را در صورت امکان به تعویق بیندازید.
- تعداد ابزارهای ردیابی، تبلیغاتی و اسکریپت‌های شخص ثالث را کنترل کنید.
- عملکرد صفحه را پس از غیرفعال کردن هر منبع آزمایش کنید تا قابلیت‌های ضروری از کار نیفتند.
ابزارهایی مانند Asset CleanUp می‌توانند برای مدیریت بارگذاری فایل‌ها در صفحات مختلف مفید باشند. با این حال، غیرفعال کردن اسکریپت‌ها باید با شناخت وابستگی‌های قالب و افزونه‌ها انجام شود. یک فایل ممکن است در ظاهر غیرضروری به نظر برسد، اما بخشی از عملکرد فرم، منو یا فرایند پرداخت را مدیریت کند.
۳. تنظیم سیاست مناسب کش مرورگر
کش مرورگر به مرورگر اجازه می‌دهد برخی منابع را برای بازدیدهای بعدی نگه دارد تا نیازی به دریافت مجدد آن‌ها نباشد. این قابلیت برای فایل‌هایی مانند تصاویر، فونت‌ها، CSS و JavaScript بسیار کاربردی است.
هدرهایی مانند Cache-Control مشخص می‌کنند منابع تا چه مدت و تحت چه شرایطی می‌توانند در کش ذخیره شوند. اگر فایل‌های ثابت سایت سیاست کش مناسبی نداشته باشند، ممکن است در بازدیدهای بعدی دوباره دانلود شوند.
برای تنظیم کش، ابتدا نوع منبع و میزان تغییرپذیری آن را در نظر بگیرید. فایل‌هایی که نام نسخه‌دار دارند و با تغییر محتوا نامشان عوض می‌شود، معمولا می‌توانند مدت طولانی‌تری کش شوند. در مقابل، برای محتوای پویا و اطلاعات شخصی باید سیاست‌های دقیق‌تری به کار برد.
افزونه‌های کش وردپرس ممکن است بخشی از این تنظیمات را مدیریت کنند، اما نتیجه نهایی به پیکربندی وب‌سرور و CDN هم بستگی دارد. در سرورهایی مانند NGINX، تنظیمات هدرهای کش لزوما از طریق فایل .htaccess انجام نمی‌شود. پس روش مناسب را بر اساس زیرساخت واقعی سایت انتخاب کنید.
۴. کاهش حجم انتقال داده‌های صفحه
حجم انتقال داده یا Payload به داده‌هایی گفته می‌شود که برای نمایش و اجرای صفحه باید از شبکه دریافت شوند. تصاویر بزرگ، فایل‌های JavaScript حجیم، CSS اضافی و محتوای غیرضروری می‌توانند حجم دانلود اولیه را افزایش دهند.
برای کاهش حجم، ابتدا منابع حجیم را در گزارش شبکه مرورگر یا ابزارهای تحلیل عملکرد شناسایی کنید. سپس تصاویر را بهینه کنید، فایل‌های غیرضروری را حذف کنید و بارگذاری منابع را متناسب با نیاز صفحه تنظیم کنید.
تعداد درخواست‌ها را هم بررسی کنید، اما صرفا برای کاهش این عدد، همه فایل‌ها را ترکیب نکنید. با HTTP/2 و HTTP/3، مرورگر می‌تواند درخواست‌های متعدد را به شکل کارآمد مدیریت کند. مهم‌تر از تعداد خام درخواست‌ها، حجم انتقال، اولویت منابع و زمان لازم برای دریافت محتوای اصلی است.
۵. جلوگیری از بزرگ شدن بیش از حد DOM
DOM یا Document Object Model ساختاری درختی از عناصر HTML صفحه است که مرورگر آن را ایجاد می‌کند. هرچه عناصر و روابط میان آن‌ها پیچیده‌تر باشند، ممکن است محاسبه استایل‌ها، چیدمان صفحه و اجرای برخی عملیات JavaScript به منابع بیشتری نیاز داشته باشد.
صفحه‌ای با ساختار بسیار بزرگ و تو‌در‌تو می‌تواند پردازش مرورگر را دشوارتر کند، به‌خصوص اگر تعداد زیادی عنصر، بخش‌های تکراری یا محتوای پنهان در آن وجود داشته باشد. با این حال، یک عدد ثابت برای تعداد گره‌ها یا عمق DOM به‌عنوان قانون همگانی برای تمام سایت‌ها وجود ندارد. باید ساختار واقعی صفحه و اثر آن بر عملکرد را بررسی کرد.
برای بهینه‌سازی DOM، بخش‌های غیرضروری را حذف کنید، ساختارهای تکراری را ساده کنید و از ایجاد تعداد زیادی بلوک تو‌در‌تو بدون نیاز خودداری کنید. در وردپرس، صفحه‌سازها، قالب‌ها و افزونه‌ها ممکن است عناصر زیادی به صفحه اضافه کنند، بنابراین بررسی خروجی HTML می‌تواند به پیدا کردن عوامل اصلی کمک کند.
۶. کاهش زنجیره درخواست‌های حیاتی
برخی منابع تا زمانی که منابع دیگر دریافت و پردازش نشوند، قابل شناسایی یا بارگذاری نیستند. برای مثال، مرورگر ممکن است ابتدا فایل CSS را دریافت کند و سپس از طریق آن به یک فونت یا تصویر پس‌زمینه برسد. این وابستگی‌ها می‌توانند یک زنجیره درخواست ایجاد کنند.
هرچه منابع مهم دیرتر کشف شوند یا دریافت آن‌ها به مراحل قبلی وابسته باشد، ممکن است نمایش محتوای اصلی صفحه به تأخیر بیفتد. برای کاهش این مشکل، منابع حیاتی را شناسایی کنید، وابستگی‌های غیرضروری را کاهش دهید و در صورت مناسب بودن از Preload یا روش‌های دیگر برای کشف زودهنگام منابع استفاده کنید.
به‌تعویق‌انداختن CSS و JavaScript غیرضروری هم می‌تواند مفید باشد، اما منابع لازم برای نمایش صحیح صفحه نباید صرفا برای رفع هشدار حذف شوند. هدف، کوتاه‌تر کردن مسیر بارگذاری منابع حیاتی است، نه تغییر تصادفی ترتیب دانلود فایل‌ها.
چطور تشخیص دهیم کدام توصیه PageSpeed مهم‌تر است؟
همه توصیه‌ها ارزش یکسانی ندارند. برای انتخاب اولویت، ابتدا باید مشخص کنید مشکل اصلی سایت چیست و کدام تغییر می‌تواند بیشترین بهبود را با کمترین ریسک ایجاد کند.
- ابتدا شاخص‌های اصلی را بررسی کنید: به‌ویژه LCP، INP و CLS در کنار TTFB و اطلاعات شبکه.
- به محتوای اصلی صفحه توجه کنید: اگر LCP ضعیف است، تصویر اصلی، فونت، CSS ضروری و زمان پاسخ‌گویی سرور را بررسی کنید.
- منابع سنگین را شناسایی کنید: با استفاده از Waterfall و تب Network مشخص کنید کدام فایل‌ها بیشترین حجم یا تأخیر را ایجاد می‌کنند.
- تغییرات را مرحله‌ای اعمال کنید: چند قابلیت بهینه‌سازی را هم‌زمان فعال نکنید، چون تشخیص علت مشکل یا بهبود دشوار می‌شود.
- نتیجه را دوباره اندازه بگیرید: پس از پاک‌سازی کش و اطمینان از بارگذاری نسخه جدید منابع، صفحه را دوباره آزمایش کنید.
- تجربه واقعی کاربران را در نظر بگیرید: در کنار آزمایش‌های آزمایشگاهی، داده‌های میدانی موجود در PageSpeed Insights و گزارش‌های عملکرد را بررسی کنید.
اگر برای بهینه‌سازی سایت وردپرسی خود به راهنمایی کامل‌تری نیاز دارید، مقاله افزایش سرعت وردپرس را هم ببینید.
جمع‌بندی
PageSpeed Insights ابزاری برای شناسایی مشکلات عملکردی و ارائه پیشنهادهای بهینه‌سازی است، اما امتیاز آن به‌تنهایی نشان‌دهنده تمام جنبه‌های سرعت و تجربه کاربر نیست. گزارش این ابزار زمانی بیشترین ارزش را دارد که توصیه‌های آن را بر اساس شرایط واقعی سایت تحلیل کنید.
برای بهبود سرعت سایت، از بررسی TTFB و منابع مسدودکننده رندر شروع کنید، سپس تصاویر، فایل‌های CSS و JavaScript، سیاست کش و زنجیره درخواست‌های حیاتی را ارزیابی کنید. پس از هر تغییر، عملکرد صفحه و صحت امکانات آن را آزمایش کنید.
هدف نهایی، کسب امتیاز کامل در PageSpeed نیست، بلکه ساخت صفحه‌ای سریع، پایدار و قابل استفاده برای مخاطبان است. گاهی اصلاح یک عامل مهم مانند تصویر اصلی یا زمان پاسخ‌گویی سرور، از اجرای ده‌ها تغییر کم‌اثر نتیجه بهتری دارد.
