سرعت سایت اپکس کد را با PageSpeed قبل و بعد اندازه گرفتیم: چه کارهایی اثر داشت، چه چیزی هنوز درست نشده و چرا عدد صد قول‌دادنی نیست.
سرعت سایت خودمان را با همان روشی که برای مشتری‌ها انجام می‌دهیم بهینه کردیم و قبل و بعد را با PageSpeed Insights اندازه گرفتیم. در این مقاله اعداد واقعی، کارهایی که واقعاً اثر داشتند و محدودیت‌هایی را که هنوز داریم می‌خوانید.
خلاصه: امتیاز موبایل صفحه فرود سفارش افزونه از ۹۰ به ۹۸ و صفحه اصلی از ۹۴ به ۹۷ رسید. بزرگ‌ترین اثر از یک فونت سنگین بود، نه از افزونه‌های کش.
اعداد قبل و بعد
همه‌ی اعداد از PageSpeed Insights روی موبایل، با آدرس تمیز صفحه و در ۱۲ آبان ۱۴۰۵ گرفته شده‌اند. اعداد این ابزار از اجرایی به اجرای دیگر کمی تغییر می‌کنند، پس آن‌ها را به‌عنوان بازه بخوانید، نه عدد دقیق.
| صفحه | امتیاز | بزرگ‌ترین محتوا (LCP) | جابه‌جایی چیدمان (CLS) |
|---|---|---|---|
| فرود سفارش افزونه، قبل | ۹۰ | ۲٫۳ ثانیه | ۰٫۱۴۴ |
| فرود سفارش افزونه، بعد | ۹۸ | ۱٫۵ ثانیه | ۰ |
| صفحه اصلی، قبل | ۹۴ | ۲٫۳ ثانیه | ۰ |
| صفحه اصلی، بعد | ۹۷ | ۱٫۴ ثانیه | ۰ |
اول سراغ فونت رفتیم
در گزارش PageSpeed بخش «Layout shift culprits» دقیقاً می‌گفت چه چیزی صفحه را جابه‌جا می‌کند: فونت فارسی قالب. فایل آن ۵۲۸ کیلوبایت و از نوع TTF بود، بدون font-display و بدون پیش‌بارگذاری. متن اول با فونت سیستم رسم می‌شد و وقتی فونت اصلی می‌رسید، همه‌چیز پایین می‌رفت.
- فایل را به woff2 تبدیل کردیم و فقط حروف فارسی، لاتین و علامت‌های لازم را نگه داشتیم. حجم به ۱۳۳ کیلوبایت رسید و وزن متغیر فونت سالم ماند.
- در سربرگ صفحه پیش‌بارگذاری فونت گذاشتیم.
font-display: optionalگذاشتیم: اگر فونت زود نرسید، همان صفحه با فونت سیستم می‌ماند و هیچ‌چیز جابه‌جا نمی‌شود. نتیجه‌اش CLS صفر شد.
بعد افزونه کش را درست تنظیم کردیم
افزونه LiteSpeed Cache نصب بود ولی بهینه‌سازی CSS و JS و فونت در آن خاموش بود. فشرده‌سازی CSS و JS، ترکیب فایل‌های CSS و بارگذاری ناهمگام گوگل‌فونت را روشن کردیم. این بخش مهم است که بعد از هر تغییر کش را پاک کنید و صفحه را بدون ورود به حساب مدیر ببینید، چون بهینه‌سازی‌ها برای مدیر وارد شده اعمال نمی‌شوند.
یک خطای پنهان در سربرگ
وقتی نتیجه سئو در PageSpeed یک‌دفعه پایین آمد، دلیلش را از خود HTML پیدا کردیم: یک نقل‌قول و علامت بزرگ‌تر سرگردان وسط سربرگ صفحه بود و مرورگر سربرگ را زودتر می‌بست. برچسب‌های توضیحات، Open Graph و canonical عملاً به بدنه افتاده بودند. با یک خط اصلاح در قالب برگشت. این نوع خطا با چشم دیده نمی‌شود و فقط با خواندن HTML خروجی پیدا می‌شود.
کارهای سمت سرور
- کش دائمی شیء با Redis، چون هاست آن را داشت و افزونه‌اش روشن نبود.
- یک کرون واقعی هر ۵ دقیقه به‌جای وابستگی به بازدید برای اجرای کارهای زمان‌بندی‌شده. وقتی صفحه‌ها از کش می‌آیند، وردپرس کمتر اجرا می‌شود و کارهای زمان‌بندی‌شده دیر می‌رسند.
- به‌روزرسانی افزونه‌ای که منتظر مانده بود.
چه چیزی هنوز درست نشده
شاخص Speed Index هنوز حدود ۴ ثانیه است و جلوی امتیاز ۱۰۰ را می‌گیرد. دلیلش CSS مسدودکننده رندر است و راه استاندارد، CSS حیاتی (Critical CSS) است که نیاز به سرویس جداگانه دارد. این را عمداً بدون ثبت‌نام در سرویس بیرونی انجام ندادیم. همچنین نسخه PHP هاست روی ۸٫۱ ماند، چون روی همه‌ی سایت‌های آن حساب اثر می‌گذاشت.
چه یاد گرفتیم
- اول گزارش را بخوانید، نه فقط عدد را. هر مشکل در PageSpeed نام و عنصر مشخصی دارد.
- هر بار فقط یک چیز را تغییر دهید و دوباره بسنجید.
- برای مقایسه، همیشه همان آدرس تمیز را اندازه بگیرید. آدرسی که پارامتر دارد (مثلاً
?p=در وردپرس) ممکن است صفحه‌ی دیگری باشد. - عدد صد قول‌دادنی نیست. امتیاز صفحه‌ی اصلی ما در دو اجرای فاصله‌دار ۹۹ و ۹۱ شد و بخشی از این تفاوت از نوسان خود ابزار و بخشی از همان خطای سربرگ بود.
راهنمای عمومی‌تر درباره‌ی همین موضوع در مقاله افزایش سرعت سایت وردپرس آمده است. قالب این سایت را هم از صفر خودمان نوشته‌ایم؛ توضیحش در نمونه‌کار قالب اپکس کد هست.
اگر می‌خواهید سایت شما را هم بررسی کنیم
سایت شما ممکن است مشکل متفاوتی داشته باشد: هاست، قالب سنگین، تصاویر یا افزونه‌های اضافه. آدرس صفحه‌ای که کند است را در صفحه سفارش بهینه‌سازی سرعت بنویسید تا اول وضعیت را بسنجیم و بعد بگوییم چه چیزی قابل‌بهبود است و چه چیزی نه.
نظرات (۰)