تب سرعت
در ابزار سرعت صفحه میزفا تولز، تب سرعت (Speed) عمیق‌ترین و تخصصی‌ترین گزارش عملکردی وب را بر پایه موتور رسمی Google Lighthouse ارائه میده. این گزارش کدهای جاوااسکریپت، ساختار استایل‌ها، تصاویر، تاخیر سرور و تعاملات صفحه را به دقت کالبدشکافی کرده و راهکارهای عملی برای رساندن سرعت به استانداردهای بین‌المللی در اختیارت می‌گذارد.
گزارش تب سرعت به ۴ ستون اصلی تقسیم می‌شود: کارایی، سئو، دسترسی و بهترین روش‌ها. بالای گزارش دو کنترل هست:
- منوی «خروجی PDF»
- «زبان گزارش» با دو گزینه فارسی و English
مسیر در پنل: ابزار سرعت صفحه ← تب سرعت
بخش اول: کارایی (Performance) و شاخص‌های حیاتی وب
Section titled “بخش اول: کارایی (Performance) و شاخص‌های حیاتی وب”بخش کارایی به سنجش سرعت واقعی لود صفحه و روانی پردازش در دستگاه مخاطب اختصاص دارد. نمره نهایی کارایی مستقیماً از روی ۵ سنجه کلیدی Core Web Vitals محاسبه می‌شود.
سنجه‌های حیاتی سرعت (Core Web Vitals)
Section titled “سنجه‌های حیاتی سرعت (Core Web Vitals)”- اولین تصویر محتوایی (FCP - First Contentful Paint): زمان نمایش اولین متن، عکس یا المان صفحه؛ در حالت بهینه باید کمتر از ۱.۸ ثانیه باشد.
- طولانی‌ترین تصویر محتوایی (LCP - Largest Contentful Paint): زمان لازم برای رندر بزرگ‌ترین بخش محتوایی یا تصویر شاخص صفحه؛ استاندارد مطلوب گوگل کمتر از ۲.۵ ثانیه است.
- کل زمان مسدودی (TBT - Total Blocking Time): مجموع زمانی که رشته پردازشی اصلی مرورگر (Main-Thread) توسط کدهای سنگین مسدود بوده است؛ مقدار ایده‌آل زیر ۲۰۰ میلی‌ثانیه است.
- شاخص سرعت (SI - Speed Index): مدت زمان لازم برای تکمیل بصری تمام بخش‌های قابل مشاهده صفحه؛ هر چه کوتاه‌تر باشد بهتر است.
- ترتیب چیدمان گروهی (CLS): میزان پرش ناگهانی المان‌ها در حین بارگذاری صفحه؛ برای پایداری بصری مناسب باید زیر ۰.۱ باشد.
تحلیل‌ها (Insights)
Section titled “تحلیل‌ها (Insights)”این بخش فرصت‌های طلایی بهینه‌سازی را نشان میده که اصلاح آن‌ها بیشترین تاثیر را روی ارتقای امتیاز کارایی دارد:
۱. دلایل جابجایی ناگهانی چیدمان
Section titled “۱. دلایل جابجایی ناگهانی چیدمان”عناصر یا تصاویری را شناسایی می‌کنه که بدون ابعاد ثابت لود شده و موجب پرش ناگهانی صفحه و افت نمره CLS می‌شوند.
۲. تحلیل LCP
Section titled “۲. تحلیل LCP”مراحل بارگذاری المان شاخص LCP (شامل TTFB، تاخیر لود منبع و زمان رندر) را تفکیک می‌کنه تا متوجه شوی علت تاخیر در کجاست.
۳. کدهای خارجی یا شخص ثالث (3rd parties)
Section titled “۳. کدهای خارجی یا شخص ثالث (3rd parties)”تاثیر اسکریپت‌های بیرونی (مانند افزونه‌های چت آنلاین، آمارگیرها و ترکرها) را بر کندی لود صفحه مشخص می‌کنه.
۴. تنظیم بهتر نمایش در موبایل (Optimize viewport for mobile)
Section titled “۴. تنظیم بهتر نمایش در موبایل (Optimize viewport for mobile)”بررسی می‌کنه که تگ viewport به درستی پیکربندی شده باشد تا صفحه در دستگاه‌های همراه بدون پرش و اسکرول افقی لود شود.
۵. بازآرایی اجباری صفحه (Forced reflow)
Section titled “۵. بازآرایی اجباری صفحه (Forced reflow)”رویدادهایی در کدهای جاوااسکریپت را هشدار میده که مرورگر را پیش از موعد مجبور به محاسبه مجدد ابعاد و استایل اجزا می‌کنند.
۶. درخت وابستگی منابع شبکه
Section titled “۶. درخت وابستگی منابع شبکه”زنجیره درخواست‌های متوالی منابع را نشان میده تا فیلترهای تاخیر در لود فایل‌های بحرانی CSS و فونت‌ها شناسایی شوند.
۷. تنظیم زمان نگهداری موثر در کش (Use efficient cache lifetimes)
Section titled “۷. تنظیم زمان نگهداری موثر در کش (Use efficient cache lifetimes)”پیشنهاد میده فایل‌های استاتیک با طول عمر حداقل چند ماهه (TTL بالا) در هدر Cache-Control تنظیم شوند تا در بازدیدهای بعدی بدون تاخیر لود گردند.
۸. بهینه‌سازی بارگذاری تصاویر
Section titled “۸. بهینه‌سازی بارگذاری تصاویر”فرصت‌های فشرده‌سازی، تغییر ابعاد متناسب با کادر نمایش و تبدیل عکس‌ها به فرمت‌های مدرن مانند WebP و AVIF را ارزیابی می‌کنه.
۹. درخواست‌های مسدودکننده رندر (Render blocking requests)
Section titled “۹. درخواست‌های مسدودکننده رندر (Render blocking requests)”فایل‌های CSS و اسکریپت‌هایی را مشخص می‌کنه که در مسیر رندر صفحه قرار دارند و تا لود نشوند اجازه نمایش محتوا به کاربر داده نمی‌شود.
عیب‌یابی فنی (Diagnostics)
Section titled “عیب‌یابی فنی (Diagnostics)”اطلاعات تکمیلی این بخش به توسعه‌دهندگان در رفع گره‌های عمیق پردازشی کمک می‌کنه:
- پرهیز از وظایف طولانی در نخ اصلی (Avoid long main-thread tasks): تسک‌هایی که اجرای آن‌ها بیش از ۵۰ میلی‌ثانیه زمان برده و مرورگر را قفل می‌کنند شناسایی می‌کنه.
- کاهش زمان اجرای جاوااسکریپت (Reduce JavaScript execution time): زمان صرف‌شده برای پارس، کامپایل و اجرای اسکریپت‌ها را ارزیابی کرده و بخش‌های سنگین را نشان میده.
- حداقل‌سازی کار در نخ اصلی (Minimize main-thread work): زمان کل اختصاص‌یافته به رندر، استایل‌دهی و اجرای اسکریپت در ترد اصلی را تحلیل می‌کنه.
معیارها موفق
Section titled “معیارها موفق”بخش آزمون‌های پاس‌شده در گزارش کارایی با عنوان «معیارها موفق» دیده می‌شود و شمار آن‌ها کنار عنوان می‌آید. در گزارش نمونه‌برداری‌شده این عنوان «معیارها موفق (13)» بود. این تست‌ها عبارتند از:
- کاهش تاخیر در درخواست سند (Document request latency): زمان دریافت فایل اولیه HTML بدون تاخیر نامتعارف بوده است.
- کدهای تکراری جاوااسکریپت (Duplicated JavaScript): هیچ ماژول یا کتابخانه تکراری در باندهای مختلف بارگذاری نشده است.
- نحوه نمایش فونت (Font display): فونت‌ها از خاصیت
font-display: swapبرای جلوگیری از نمایش متن نامرئی در زمان لود استفاده می‌کنند. - کد جاوااسکریپت قدیمی (Legacy JavaScript): عدم استفاده از پُلی‌فیل‌های قدیمی برای مرورگرهای مدرن.
- پروتکل HTTP مدرن (Modern HTTP): تبادل منابع با نسخه سریع HTTP/2 یا HTTP/3 انجام می‌شود.
- فشرده‌سازی CSS و JS (Minify CSS & JS): فایل‌های استایل و اسکریپت کامپکت شده و فاقد فاصله‌ها و کامنت‌های زائد هستند.
- کاهش کدهای استفاده‌نشده (Reduce unused CSS & JS): استایل‌ها و توابع اضافی که در این صفحه کاربرد ندارند به حداقل رسیده‌اند.
- پرهیز از بارهای حجیم شبکه (Avoids enormous network payloads): کل حجم صفحه در محدوده بهینه (زیر چند مگابایت) قرار دارد.
- ابعاد صریح تصاویر (Image elements have explicit width and height): تعیین
widthوheightصریح از جهش ناگهانی چیدمان جلوگیری می‌کنه. - پرهیز از ریدایرکت‌های متوالی (Avoid multiple page redirects): نشانی بدون زنجیره‌های طولانی هدایت لود می‌شود.
- کوتاه بودن زمان پاسخ اولیه سرور (Initial server response time was short): شاخص TTFB هاست در محدوده استاندارد (زیر چندصد میلی‌ثانیه) است.
بخش دوم: سئو (SEO)
Section titled “بخش دوم: سئو (SEO)”این ممیزی‌ها تضمین می‌کنند که صفحه اصول مقدماتی و زیرساخت لازم برای خزش، ایندکس و فهم توسط خزنده‌های موتورهای جستجو را رعایت کرده است.
خزش و ایندکس (Crawling and Indexing)
Section titled “خزش و ایندکس (Crawling and Indexing)”- عدم مسدودیت ایندکس (Page isn’t blocked from indexing): صفحه دارای تگ
noindexناخواسته در هدر یا متادیتا نیست. - کد وضعیت HTTP موفق (Page has successful HTTP status code): پاسخ سرور کد موفقیت‌آمیز
200 OKرا برمی‌گرداند. - لینک‌های قابل خزش (Links are crawlable): پیوندها با تگ استاندارد
<a href="...">ایجاد شده‌اند و ربات‌ها می‌توانند آن‌ها را دنبال کنند. - فایل robots.txt معتبر (robots.txt is valid): ساختار فایل راهنمای خزنده‌ها در ریشه سایت فاقد خطای نحوی است.
بهترین روش‌های محتوا (Content Best Practices)
Section titled “بهترین روش‌های محتوا (Content Best Practices)”- وجود تگ عنوان (Document has a
<title>element): صفحه عنوان متنی معنادار برای نمایش در تب مرورگر و نتایج سرچ دارد. - وجود توضیحات متا (Document has a meta description): اسنیپت توصیفی صفحه برای جلب توجه مخاطبان در گوگل تنظیم شده است.
- متن توصیفی برای لینک‌ها (Links have descriptive text): انکرتکست پیوندها به جای عبارات مبهم مانند «کلیک کنید»، موضوع مقصد را توصیف می‌کنه.
- ویژگی Alt برای تصاویر (Image elements have
[alt]attributes): تصاویر متن جایگزین دارند تا هم توسط موتورهای جستجو و هم توسط کم‌بینایان درک شوند. - تگ hreflang معتبر (Document has a valid hreflang): زبان صفحه و ارتباط آن با سایر نسخه‌های بین‌المللی به درستی تعریف شده است.
- تگ کنونیکال معتبر (Document has a valid
rel=canonical): آدرس مرجع محتوا برای جلوگیری از تکرار مشخص شده است.
موارد اضافی برای بررسی دستی
Section titled “موارد اضافی برای بررسی دستی”- اعتبار داده‌های ساختاریافته (Structured data is valid): کدهای نشانه‌گذاری استاندارد (مانند اسکیماهای JSON-LD) جهت نمایش نتایج غنی (Rich Snippets) در گوگل ارزیابی می‌شوند.
بخش سوم: دسترسی‌پذیری (Accessibility)
Section titled “بخش سوم: دسترسی‌پذیری (Accessibility)”دسترس‌پذیری تضمین می‌کنه صفحه برای تمام افراد، از جمله کاربران دارای معلولیت‌های بینایی و حرکتی که از فناوری‌های کمکی (مانند اسکرین‌ریدرها) استفاده می‌کنند، کاملاً قابل پیمایش و خوانا باشد.
۱. ویژگی‌های ARIA
Section titled “۱. ویژگی‌های ARIA”- انطباق دقیق صفات
[aria-*]با نقش المان و استفاده از مقادیر مجاز و استاندارد. - پرهیز از قرار دادن صفت
aria-hidden="true"بر روی بدنه اصلی سند (<body>). - املای صحیح و مشخص بودن رفتار ویژگی‌های کمکی برای دستگاه‌های خوانش صفحه.
۲. نام‌ها و برچسب‌ها (Names and labels)
Section titled “۲. نام‌ها و برچسب‌ها (Names and labels)”- دکمه‌ها و پیوندها دارای نام قابل دسترس (Accessible Name) و شفاف برای خوانده شدن توسط اسکرین‌ریدر هستند.
- عناصر فرم دارای برچسب‌های متنی (
<label>) مرتبط هستند. - متن‌های جایگزین تصویر فاقد عبارات حشو یا تکرار نامتعارف عنوان هستند.
۳. بهترین روش‌های تعاملی و ابعاد
Section titled “۳. بهترین روش‌های تعاملی و ابعاد”- عدم قفل زوم موبایل: پرهیز از درج
user-scalable="no"در متاتگ ویوپورت تا کاربران کم‌بینا بتوانند روی متن زوم کنند. - اهداف لمسی استاندارد (Touch Targets): دکمه‌ها و لینک‌ها حداقل اندازه ۴۴ در ۴۴ پیکسل با فاصله مناسب از یکدیگر را رعایت کرده‌اند.
- محدوده اصلی سند: وجود تگ معنایی
<main>برای تفکیک بدنه اصلی محتوا از سربرگ و پابرگ.
۴. کنتراست رنگی (Contrast)
Section titled “۴. کنتراست رنگی (Contrast)”نسبت روشنایی متن اصلی نسبت به رنگ پس‌زمینه حداقل نرخ ۴.۵ به ۱ برای متن‌های معمولی و ۳ به ۱ برای متون درشت را تامین می‌کنه تا خوانایی در محیط‌های نوری مختلف افت نکند.
۵. بین‌المللی‌سازی و جدول‌ها
Section titled “۵. بین‌المللی‌سازی و جدول‌ها”- تعیین صفت
langدر تگ ریشه<html>(مانندlang="fa") برای تلفظ صحیح کلمات توسط نرم‌افزارهای خوانش متن. - استفاده از ساختار استاندارد والد/فرزند در لیست‌ها (
<ul>,<ol>,<li>) و نسبت دادن هدرهای جدول با صفت[headers].
۶. ناوبری و بررسی‌های تکمیلی
Section titled “۶. ناوبری و بررسی‌های تکمیلی”- ترتیب نزولی و اصولی هدینگ‌ها (H1 سپس H2 و سپس H3) بدون پرش‌های ناگهانی.
- چینش منطقی ترتیب فوکوس کلید Tab کیبورد روی عناصر فرم و دکمه‌ها.
بخش چهارم: بهترین روش‌ها و استانداردهای وب (Best Practices)
Section titled “بخش چهارم: بهترین روش‌ها و استانداردهای وب (Best Practices)”این بخش تطابق سایت با اصول روز امنیت وب، بهینه‌سازی دارایی‌ها و تجربه‌کاربری استاندارد مرورگرهای مدرن را می‌سنجد.
اعتماد و ایمنی (Trust and Safety)
Section titled “اعتماد و ایمنی (Trust and Safety)”- استفاده از پروتکل امن HTTPS: تمامی داده‌ها در بستر رمزنگاری‌شده جابه‌جا می‌شوند.
- عدم درخواست ناگهانی دسترسی‌ها: پرهیز از درخواست دسترسی به موقعیت مکانی (Geolocation) یا ارسال اعلان (Notification) بلافاصله پس از لود صفحه.
- سیاست‌های امنیتی مرورگر: بهره‌گیری از هدرهای امنیتی نظیر CSP علیه حملات تزریق اسکریپت (XSS)، فعال بودن HSTS، ایزولاسیون مبدا (COOP) و مقابله با حملات کلیک‌دزدی (Clickjacking) با هدرهای X-Frame-Options.
عمومی و تجربه کاربری (General & UX)
Section titled “عمومی و تجربه کاربری (General & UX)”- پرهیز از APIهای منسوخ: عدم استفاده از توابع و متدهای خارج از رده جاوااسکریپت و مرورگر.
- پرهیز از کوکی‌های شخص ثالث: هماهنگی با محدودیت‌های جدید حریم خصوصی مرورگرها.
- عدم وجود خطا در کنسول: کنسول جاوااسکریپت مرورگر در زمان بارگذاری صفحه کاملاً تمیز و عاری از ارور است.
- آزادی عمل در ورودی‌ها: کاربران می‌توانند متن را در تمام فیلدهای ورودی Paste کنند.
- نمایش صحیح تصاویر: دارایی‌های تصویری با نسبت ابعاد طبیعی (Aspect Ratio) و رزولوشن متناسب نمایش داده می‌شوند.
سازگاری با مرورگر (Browser Compatibility)
Section titled “سازگاری با مرورگر (Browser Compatibility)”- وجود اعلان استاندارد
<!DOCTYPE html>در خط اول صفحه. - تعریف صریح مجموعه نویسه با
<meta charset="utf-8">جهت جلوگیری از به‌هم‌ریختگی حروف فارسی.