تحلیل صفحه

Lighthouse

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

این ابزار به عنوان یک افزونه برای Google Chrome و Firefox در دسترس است و می توان آن را از طریق خط فرمان نیز اجرا کرد. این کار برای آزمایش روی محیط توسعه محلی مفید است.

اطلاعات بیشتر از سایت Chrome for Developers: Lighthouse.

می توانید از ابزار آنلاین PageSpeed Insightsاین سایت استفاده کنید.

تصویر زیر بخش اول گزارش PageSpeed Insights را نشان می دهد:

بهبودهای عملکرد

بخش دوم گزارش روش هایی برای بهبود عملکرد پیشنهاد می دهد:

• حذف منابع مسدودکننده رندر - صرفه جویی احتمالی 540 میلی ثانیه. صادقانه بگویم، این کار برای پاداشی به این کوچکی، زحمت زیادی دارد.
• فعال سازی فشرده سازی متن صرفه جویی احتمالی 11 کیلوبایت. در تنظیمات کلی، پنل سرور، گزینه GZip Page Compression را روی بله تنظیم کنید. هنوز فایل های کوچک JavaScript و CSS باقی مانده اند که باید کوچک سازی و فشرده شوند.
• کاهش CSS استفاده نشده صرفه جویی احتمالی 62 کیلوبایت. عامل اصلی فایل های template.min.css و joomla-fontawesome.min.css هستند، اما این به معنای تنظیم دقیق CSS برای هر صفحه سایت است که کاری پرخطا و با پاداش کم است.
• ارائه دارایی های ثابت با سیاست ذخیره سازی کارآمد - 21 منبع یافت شد. مراجع ارائه شده، از جمله مراجع مخصوص جوملا.

پیام کلی این است که برخی پیشنهادها ارزش رفع کردن دارند و برخی دیگر خیر.

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

گزارش دسکتاپ معمولاً با گزارش موبایل متفاوت است. در این مورد چند مشکل اضافی شناسایی شد:

• اندازه مناسب تصاویر - صرفه جویی احتمالی 48 کیلوبایت. تگ تصویر در واقع با تصاویر webp در عرض 768 و 1200 پیکسل بهینه شده است. به نظر می رسد چیزی بین این دو مقدار لازم است.

دسترس پذیری

• پیوندها نام قابل تشخیصی ندارند این به فلش های چپ و راست در پایین صفحه اشاره دارد که برای حرکت به جلو یا عقب استفاده می شوند. متن برای جلوگیری از مشکلات ترجمه حذف شده بود. باید دوباره فکر کرد!
• اهداف لمسی اندازه یا فاصله کافی ندارند این به اندازه آیتم های منو در ستون های چپ و راست اشاره دارد. آن ها به فضای عمودی بیشتری نیاز دارند - نیاز به یک تنظیم CSS است.

بهترین روش ها و سئو

اگرچه هر دو برای موبایل و دسکتاپ امتیاز 100 گرفته اند، اما باید پس از هر تغییر طراحی دوباره بررسی شوند.

خلاصه

تمام مشکلات این سایت برطرف شده است به جز تفکیک فایل های css و کوچک سازی فایل های کوچک JavaScript و CSS کامپوننت.