چگونه طراحی وب سایت خود را برای موارد حیاتی طراحی وب سایت اصلی گوگل بهینه کنید

گوگل ماموریتی برای بهبود عملکرد طراحی وب سایت با Core Web Vitals دارد. چرا؟ از آنجایی که کسب و کار گوگل عمدتاً مبتنی بر طراحی وب سایت است - طراحی وب سایت ‌های کند و برنامه ‌های طراحی وب سایت کاربران را به سمت برنامه ‌های بومی سوق می ‌دهند.

قرارگیری شما در نتایج جستجوی گوگل تا حد زیادی توسط کلمات کلیدی طراحی وب سایت عبارت جستجو، استفاده از آن کلمات کلیدی در صفحه طراحی وب سایت شما و محبوبیت صفحه طراحی وب سایت شما با توجه به تعداد (و کیفیت) لینک ها از جاهای دیگر تعیین می شود. از آگوست 2021، گوگل تلاش می کند تا صفحات طراحی وب سایت را بر اساس عملکرد ارزیابی کند.

این مقاله به شما نشان می دهد که چگونه می توانید طراحی وب سایت خود را برای معیارهای Core Web Vitals گوگل بهینه کنید.

فهرست مطالب طراحی وب سایت

• چرا Core Web Vitals؟
• عوامل کلیدی رتبه بندی گوگل
• گوگل چگونه عملکرد طراحی وب سایت را ارزیابی می کند؟

Core Web Vitals چیست؟

• بزرگترین رنگ محتوایی LCP)) طراحی وب سایت
• تاخیر ورودی اول FID))
• تغییر چیدمان تجمعی CLS))

چرا Core Web Vitals؟

محتوا همچنان حیاتی است. اما اگر دو طراحی وب سایت با متن و محبوبیت مشابه را مقایسه کنید، طراحی وب سایتی که بهترین تجربه طراحی وب سایت را ارائه می دهد در نتایج جستجوی گوگل اولویت بیشتری خواهد داشت.

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

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

وقتی در نظر بگیرید که میانگین صفحه حدود 2 مگابایت است، بیش از 60 درخواست HTTP ارسال می کند، و 16 ثانیه طول می کشد تا به طور کامل بر روی یک دستگاه تلفن همراه ارائه شود، خواهید دید که زمینه ای برای بهبود طراحی وب سایت شما وجود دارد. ما بهترین راه ها را برای دستیابی به این پیشرفت ها به شما نشان خواهیم داد.

عوامل کلیدی رتبه بندی گوگل طراحی وب سایت

قبل از شروع ارزیابی عملکرد، چهار عامل رتبه بندی کلیدی طراحی وب سایت وجود دارد که باید بررسی شود:

HTTPS: HTTPS ضروری است. آیا طراحی وب سایت شما یک ارتباط امن بین مرورگر کاربر و طراحی وب سایت سرور برقرار می کند؟

سازگاری با موبایل: طراحی وب سایت شما باید روی یک دستگاه تلفن همراه به خوبی کار کند. آیا طراحی وب سایت شما در دستگاه های با صفحه نمایش کوچک قابل استفاده است؟ آیا بدون سرریز محتوا رندر می شود؟ آیا متن به اندازه کافی بزرگ است؟ آیا مناطق قابل کلیک برای کنترل لمسی کافی است؟

عدم وجود موارد بینابینی: از بینابینی های مزاحم که نیاز به فضای غیرمنطقی صفحه نمایش دارند اجتناب کنید. آیا محتوای طراحی وب سایت شما همیشه قابل خواندن است؟ آیا تا حدی توسط صفحات بازشو یا بنرها پنهان شده است؟ آیا تبلیغات یا تبلیغات بازاریابی شما استفاده از طراحی وب سایت را دشوار می کند؟

مرور ایمن: طراحی وب سایت شما باید عاری از بدافزار، ویروس، فیشینگ، کلاهبرداری و سایر کلاهبرداری ها باشد.

هنگامی که این شرایط را برآورده کردید، طراحی وب سایت شما از نظر عملکرد ارزیابی می شود.

هر چه طراحی وب سایت شما سریعتر و پاسخگوتر باشد، شانس بیشتری در برابر رقبا دارد.

گوگل چگونه عملکرد طراحی وب سایت را ارزیابی می کند؟

بارگذاری سریع طراحی وب سایت شما، رندر سریع و پاسخ گویی زودتر ضروری است. اما آیا به کاربران طراحی وب سایت احساس سرعت می دهد؟

برنامه ‌های اندازه‌ گیری عملکرد مانند مرورگر DevTools اندازه‌ گیری‌ های فنی مانند:

زمان مسدود کردن طراحی وب سایت: زمانی که صرف انتظار برای شروع دانلود می‌شود، معمولاً به این دلیل که سایر دارایی‌ها مانند شیت ‌ها و اسکریپت‌ طراحی وب سایت ها اولویت بیشتری دارند.

وضوح DNS طراحی وب سایت : زمان حل یک نام میزبان به یک آدرس IP برای بازیابی یک دارایی.

زمان اتصال طراحی وب سایت: زمان مقداردهی اولیه اتصال TCP.

زمان تا اولین بایت طراحی وب سایت TTFB) ): کل زمان بین درخواست و اولین بایت پاسخ.

زمان دریافت: زمان بازیابی کل دارایی طراحی وب سایت.

زمان بارگذاری طراحی وب سایت DOM : زمان دانلود و ارائه مدل شی سند HTML. این معمولاً اولین نقطه ای است که در آن اسکریپت هایی که DOM را تجزیه و تحلیل یا اصلاح می کنند می توانند به طور قابل اعتماد اجرا شوند.

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

وزن کل صفحه طراحی وب سایت: اندازه کل همه دارایی ها. اغلب در اندازه فشرده (دانلود) و اندازه غیر فشرده گزارش می شود.

تعداد عناصرDOM : تعداد کل عناصر HTML در صفحه. هرچه عناصر بیشتر باشد، پردازش صفحه طراحی وب سایت بیشتر طول می کشد.

:First Contentful Paint (FCP): : مدت زمانی است که مرورگر اولین پیکسل محتوا طراحی وب سایت را ارائه می کند.

First Meaningful Paint (FMP): : مدت زمانی که طول می کشد تا محتوای صفحه اصلی برای کاربر طراحی وب سایت قابل مشاهده شود.

Time to Interactive (TTI): : زمان صرف شده قبل از اینکه یک صفحه طراحی وب سایت کاملاً تعاملی باشد و می تواند به طور قابل اعتماد به ورودی کاربر پاسخ دهد.

First CPU Idle : زمانی که CPU صفحه طراحی وب سایت را رندر می کند و تمام اسکریپت های اولیه سازی را اجرا می کند و منتظر ورودی بیشتر است.

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

طرح ‌بندی در ثانیه: سرعتی که مرورگر باید سبک‌ها و طرح‌ بندی‌های صفحه طراحی وب سایت را دوباره محاسبه کند.

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

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

یک برنامه چت می‌تواند به طور مداوم داده‌ها را با ارسال پیام‌های کاربران طراحی وب سایت بارگیری کند. یک ابزار ارزیابی ممکن است فرض کند که هرگز بارگیری را کامل نکرده است، علیرغم اینکه صفحه پاسخگو است.

Core Web Vitals تلاش گوگل برای حل این معضلات است.

Core Web Vitals چیست؟

هسته طراحی وب سایت حیاتی گوگل (CWV ) سه معیار عملکردی است که تجربه کاربر طراحی وب سایت در دنیای واقعی را ارزیابی می کند:

بزرگترین رنگ محتواییLCP)): عملکرد بارگیری

تاخیر ورودی اول (FID) : عملکرد تعاملی

تغییر چیدمان تجمعی CLS) ): عملکرد پایداری بصری

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

امتیازهای LCP، FID و CLS یک صفحه بر اساس معیارهای کاربر طراحی وب سایت واقعی 28 روز گذشته است که به صورت ناشناس از طریق مرورگر Chrome جمع‌آوری شده است. این اندازه‌ گیری‌ ها می‌ توانند به دلیل دستگاه، اتصال و سایر فعالیت‌ های همزمان کاربر طراحی وب سایت متفاوت باشند، بنابراین صدک ۷۵ به جای میانگین محاسبه می‌ شود.

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

هر صفحه طراحی وب سایت ای که برای هر سه معیار Core Web Vitals به امتیاز خوب (سبز) دست یابد، رتبه بالاتری در نتایج جستجو دریافت می کند و در چرخ فلک «داستان های برتر» در برنامه Google News گنجانده می شود.

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

بزرگترین رنگ محتوایی LCP))

Largest Contentful Paint عملکرد بارگذاری را اندازه گیری می کند. در اصل، محتوای طراحی وب سایت قابل استفاده با چه سرعتی در صفحه ارائه می شود؟

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

هر یک از عناصر زیر برای بزرگترین تجزیه و تحلیل رنگ محتوایی طراحی وب سایت واجد شرایط هستند:

• تصاویر طراحی وب سایت ( عنصر)
• تصاویر داخل گرافیک برداری طراحی وب سایت یک <تصویر> تعبیه شده
• تصاویر کوچک ویدیو (یک ویژگی پوستری که روی یک URL تصویر در عنصر تنظیم شده است)
• عناصر با تصاویر پس زمینه طراحی وب سایت (معمولاً با ویژگی CSS background-image url() بارگذاری می شوند)
• عناصر سطح بلوک حاوی متن

صفحاتی که بزرگترین رنگ محتوایی در 2.5 ثانیه اول بارگذاری صفحه طراحی وب سایت تکمیل می شود، خوب (سبز) در نظر گرفته می شوند. صفحاتی که بیش از 4.0 ثانیه باشند ضعیف در نظر گرفته می شوند (قرمز):

بزرگترین ابزارهای تحلیل رنگ محتوایی طراحی وب سایت

LCP ساده ترین معیار Core Web Vital برای درک است، اما ممکن است مشخص نباشد که کدام عنصر برای تجزیه و تحلیل انتخاب می شود.

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

صفحاتی که بزرگترین رنگ محتوایی در 2.5 ثانیه اول بارگذاری صفحه طراحی وب سایت تکمیل می شود، خوب (سبز) در نظر گرفته می شوند. صفحاتی که بیش از 4.0 ثانیه باشند ضعیف در نظر گرفته می شوند (قرمز):

اگر به مرورگر مبتنی بر Chromium دسترسی ندارید، می‌توانید اطلاعات یکسانی را در ابزارهای اندازه‌ گیری PageSpeed Insights و web.dev آنلاین ایجاد کنید:

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

افزونه Web Vitals برای Google Chrome در دسترس است اما می‌توان آن را در اکثر مرورگرهای مبتنی بر Chromium طراحی وب سایت نصب کرد. معیارهای Core Web Vitals را برای هر طراحی وب سایتی که بازدید می کنید محاسبه می کند و بسته به نتیجه نماد آن سبز، نارنجی یا قرمز می شود. همچنین می توانید برای مشاهده جزئیات بیشتر LCP روی نماد برنامه افزودنی کلیک کنید:

اگر طراحی وب سایت شما به عنوان دارایی اضافه شود، کنسول جستجوی Google اکنون بخش Core Web Vitals را ارائه می دهد. این گزارش نشان می دهد که چگونه معیارهای CWV در طول زمان تغییر کرده است. توجه داشته باشید که معیارهای LCP خاصی را شناسایی نمی‌کند و فقط طراحی وب سایت ‌هایی با ترافیک بالا در دسترس هستند:

گزارش تجربه کاربر طراحی وب سایت Chrome به شما امکان می ‌دهد آمار استفاده واقعی، از جمله LCP در کشورها، اتصالات و دستگاه‌ های مختلف را برای یک URL طراحی وب سایت خاص جستجو کنید. این یک پروژه عمومی در Google BigQuery است، بنابراین باید برای یک حساب Google Cloud Platform ثبت نام کنید و جزئیات صورتحساب را ارائه دهید. باز هم، گزارش تنها زمانی مفید خواهد بود که یک URL طراحی وب سایت دارای سطح معقولی از ترافیک بالایی باشد.

در نهایت، کتابخانه جاوا اسکریپت web-vitals یک اسکریپت کوچک 1 کیلوبایتی است که می تواند LCP و سایر معیارهای Core Web Vital را برای کاربران طراحی وب سایت واقعی در طراحی وب سایت زنده شما محاسبه کند. از آنجایی که می توان آن را از یک CDN دانلود کرد، می توانید اسکریپت زیر را به HTML

خود اضافه کنید:

getLCP ()یک تابع ناهمزمان است که پس از محاسبه مقدار LCP، یک تماس برگشتی ارسال می ‌شود (اگرچه اگر صفحه طراحی وب سایت در برگه پس ‌زمینه بارگیری شود، ممکن است هرگز راه ‌اندازی نشود). تابع callback یک شی حاوی:

• نام: نام معیار («LCP» در این مورد)
• ارزش: مقدار محاسبه شده
• id: شناسه منحصر به فردی که این معیار را برای صفحه فعلی طراحی وب سایت نشان می دهد
• دلتا: دلتای بین مقدار فعلی و آخرین مقدار گزارش شده
• entries: آرایه ای از ورودی های مورد استفاده در محاسبه مقدار
• اسکریپت بالا شی را به کنسول خروجی می دهد، اگرچه ارسال داده ها به سرور یا Google Analytics برای تجزیه و تحلیل بیشتر عملی تر است.

علل متداول نمرات رنگ ضعیف و بزرگ ترین محتوا طراحی وب سایت

امتیازات ضعیف LCP معمولاً به دلیل بارگذاری آهسته صفحات طراحی وب سایت ایجاد می شود که مانع از ظاهر شدن سریع بزرگترین بلوک می شود:

• پاسخ سرور ممکن است کند باشد زیرا بیش از حد بارگذاری شده است یا کار زیادی برای ارائه یک صفحه طراحی وب سایت انجام می دهد. این ممکن است لزوماً تقصیر طراحی وب سایت شما نباشد - اگر از یک سرویس میزبانی مشترک استفاده می کنید، ممکن است به دلیل محدودیت های سرور باشد.
• CSS- و جاوا اسکریپت با مسدود کردن رندر می‌توانند بارگذاری صفحه طراحی وب سایت را به تاخیر بیندازند اگر در HTML بالای محتوای اصلی طراحی وب سایت ارجاع داده شوند.
• منابع دیگر مانند تصاویر و ویدیوهای بزرگ می توانند پهنای باند موجود را کاهش دهند و زمان بیشتری برای رندر گرفتن نیاز داشته باشند.
• محتوای صفحه طراحی وب سایت تولید شده بر روی کلاینت به جای سرور نیز زمان بیشتری طول می کشد تا ظاهر شود.

چگونه می توان بزرگترین نمرات رنگ های محتوایی طراحی وب سایت را بهبود بخشید

یک ممیزی کامل می تواند مشکلات بارگیری را شناسایی کند، اما به طور کلی کاهش داده های ارسال شده به مرورگر است. نکات زیر به امتیاز LCP سالم تر کمک می کند:

1- سرور و/یا سرویس میزبانی طراحی وب سایت خود را ارتقا دهید. اطمینان حاصل کنید که سرعت دانلود حتی در مواقع استفاده زیاد بالاست.

2- فشرده سازی سرور و HTTP/2+ را فعال کنید. دلیلی وجود ندارد!

3- تلاش سرور را کاهش دهید. کدهای استفاده نشده و افزونه های CMS را حذف کنید، سپس کش موثر را فعال کنید.

4- اطمینان حاصل کنید که مرورگر طراحی وب سایت می ‌تواند فایل‌ها را به ‌طور موثر ذخیره کند. هش های Expires، Last-Modified و/یا ETag مناسب را در هدر HTTP تنظیم کنید تا فایل ها دوباره درخواست نشوند.

5- از یک شبکه تحویل محتوا طراحی وب سایت CDN) ) برای تقسیم بار و دارایی های میزبان در سرورهایی که از نظر جغرافیایی نزدیکتر به کاربران طراحی وب سایت هستند، استفاده کنید.

6- با استفاده از ویژگی کوچک سازی کد که در داشبورد MyKinsta تعبیه شده است، بهینه سازی کلی خود را تقویت کنید.

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

8- بارگذاری تنبل تصاویر با افزودن ویژگی loading="lazy". ویژگی های عرض و ارتفاع را اضافه کنید تا اطمینان حاصل کنید که فضای مناسب در صفحه قبل از بارگذاری کامل طراحی وب سایت تصویر رزرو شده است.

9- درخواست های شخص ثالث را به حداقل برسانید و برای جلوگیری از جستجوی DNS خارجی، دارایی ها را به دامنه اصلی طراحی وب سایت خود منتقل کنید.

10- تعداد و اندازه فایل های درخواستی را به خصوص در بالای HTML خود به حداقل برسانید.

11- مطمئن شوید که فقط فونت های طراحی وب سایت مورد نیاز را بارگیری می کنید. برای حداکثر کارایی، به فونت‌ های ایمن طراحی وب سایت بروید.

12- فایل های جاوا اسکریپت و CSS استفاده نشده را حذف کنید.

13- فایل های جاوا اسکریپت و CSS خود را به هم متصل کرده و کوچک کنید.

14- از دستورات CSS @import اجتناب کنید - آنها رندر-مسدود کننده هستند و سبک ها را به صورت سری بارگذاری می کنند.

15- از رمزگذاری Base64 اجتناب کنید - اندازه فایل طراحی وب سایت را افزایش می دهد و نیاز به پردازش اضافی دارد.

CSS16- درون خطی بحرانی را در نظر بگیرید. CSS ضروری "بالا" را در یک بلوک

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

17- از جاوا اسکریپت ماژول ناهمزمان، معوق یا ES برای اجرای اسکریپت‌ها بعداً استفاده کنید. فرآیندهای جاوا اسکریپت طولانی مدت را در یک سرویس دهنده اجرا کنید.

تاخیر ورودی اول (FID)

تأخیر ورودی اول میزان پاسخگویی صفحه طراحی وب سایت شما را اندازه گیری می کند. در اصل، چقدر سریع به اقدامات کاربر طراحی وب سایت مانند کلیک کردن، ضربه زدن و پیمایش پاسخ می دهد؟

معیار FID به عنوان زمان بین تعامل کاربر طراحی وب سایت و مرورگر پردازش درخواست آنها محاسبه می شود. زمان اجرای تابع کنترلر را که معمولاً ورودی را پردازش کرده و DOM را به روز می کند، اندازه گیری نمی کند.

صفحات طراحی وب سایت با زمان FID 100 میلی ثانیه یا کمتر خوب (سبز) در نظر گرفته می شوند. صفحات طراحی وب سایت بیش از 300 میلی ثانیه ضعیف در نظر گرفته می شوند (قرمز):

اولین ابزارهای تحلیل تاخیر ورودی

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

FID در پنل DevTools Lighthouse یا PageSpeed Insights محاسبه نمی شود. با این حال، آنها می توانند زمان مسدود کردن کل (TBT) را تعیین کنند. این یک تقریب معقول برای اولین تاخیر ورودی است. تفاوت زمان بین:

اولین رنگ محتوایی FCP ، یا زمانی که محتوای طراحی وب سایت صفحه شروع به ارائه می کند، و

زمان تعامل (TTI )، یا زمانی که صفحه می تواند به ورودی کاربر طراحی وب سایت پاسخ دهد. TTI زمانی فرض می شود که هیچ کار طولانی مدتی فعال نباشد و کمتر از سه درخواست HTTP هنوز تکمیل نشده باشد.

افزونه Web Vitals برای Google Chrome همچنین می‌تواند یک متریک FID را پس از تعامل با صفحه طراحی وب سایت با پیمایش یا کلیک کردن نشان دهد. برای نمایش اطلاعات بیشتر روی نماد برنامه افزودنی کلیک کنید:

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

کتابخانه JavaScript web-vitals همچنین می تواند معیارهای FID را برای کاربران واقعی در طراحی وب سایت زنده شما محاسبه کند. می‌توانید اسکریپت زیر را به

HTML خود اضافه کنید.

علل رایج امتیازات تاخیر ورودی اول ضعیف

امتیازهای ضعیف FID و TBT معمولاً به دلیل کدهای سمت کلاینت است که پردازنده را تحت فشار قرار می دهد، مانند:

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

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

نحوه بهبود نمرات تاخیر ورودی اول

ممیزی جاوا اسکریپت سمت مشتری می تواند مشکلات را شناسایی کند، اما به طور کلی موضوع حذف کد اضافی و اطمینان از اجرای سریع وظایف است.

نکات زیر به نمره FID سالم تر کمک می کند:

1- تا جایی که ممکن است محتوای طراحی وب سایت HTML ایستا را روی سرور تولید و ذخیره کنید. سعی کنید برای ارائه HTML یکسان برای همه به چارچوب های جاوا اسکریپت سمت کلاینت تکیه نکنید.

2- اطمینان حاصل کنید که مرورگر طراحی وب سایت می ‌تواند فایل‌ها را به ‌طور موثر ذخیره کند. هش های Expires، Last-Modified و/یا ETag مناسب را در هدر HTTP تنظیم کنید، بنابراین فایل ها دوباره درخواست نمی شوند.

3- از تکنیک‌های بهبود پیشرونده استفاده کنید، بنابراین رابط در HTML و CSS طراحی وب سایت قبل از اجرای جاوا اسکریپت قابل استفاده است.

4- فایل های جاوا اسکریپت و CSS طراحی وب سایت استفاده نشده را حذف کنید.

5- فایل های جاوا اسکریپت و CSS طراحی وب سایت خود را به هم متصل کرده و کوچک کنید.

6- از استفاده بیش از حد از ویژگی های CSS طراحی وب سایت گران قیمت مانند box-shadow و filter خودداری کنید.

7- از جاوا اسکریپت ماژول ناهمزمان، معوق یا ES برای اجرای اسکریپت‌ها بعداً استفاده کنید.

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

9- بارگذاری طراحی وب سایت تنبل اجزای جاوا اسکریپت در صورت تقاضا، به عنوان مثال. ویجت های چت، پخش کننده های ویدئو و غیره

10- بارگذاری طراحی وب سایت اسکریپت های کمتر مهم مانند تجزیه و تحلیل، تبلیغات و ابزارهای رسانه های اجتماعی را به تاخیر بیندازید.

11- وظایف طولانی ‌مدت جاوا اسکریپت را به مجموعه ‌ای از کارهای کوچک ‌تر تقسیم کنید که پس از یک تاخیر requestIdleCallback، setTimeout یا requestAnimationFrame اجرا می ‌شوند.

12- اجرای فرآیند طراحی وب سایت های جاوا اسکریپت طولانی مدت را در یک طراحی وب سایت کارگر، که از یک رشته پس زمینه استفاده می کند، در نظر بگیرید.

تغییر چیدمان تجمعی CLS))

CLS ثبات بصری صفحه طراحی وب سایت را اندازه گیری می کند. در اصل، آیا محتوای صفحه به طور غیرمنتظره ای حرکت می کند یا می پرد، به خصوص در زمان بارگذاری اولیه طراحی وب سایت ؟

CLS امتیاز را زمانی محاسبه می کند که عناصر بدون هشدار یا تعامل کاربر طراحی وب سایت حرکت کنند. احتمالاً هنگام خواندن مقاله در دستگاه تلفن همراه این را تجربه کرده اید - متن ناگهان از صفحه طراحی وب سایت خارج می شود و شما جای خود را از دست می دهید. بدترین مثال ها می توانند باعث شوند که روی پیوند نادرست کلیک کنید.

مشکلات CLS زمانی برجسته ‌تر می ‌شوند که یک تصویر یا تبلیغ بزرگ بالاتر از موقعیت اسکرول فعلی طراحی وب سایت بارگذاری می‌شود و یک فضای با ارتفاع صفر فوراً چند صد پیکسل افزایش می‌یابد.

نمرات تجمعی Layout Shift با ضرب معیارهای زیر در یکدیگر محاسبه می شود:

کسر ضربه: این کل مساحت همه عناصر ناپایدار در نمای دید است، یعنی آنهایی که "پرش" می کنند. اگر عناصری که 60 درصد از نمای دید را پوشش می دهند در طول بارگذاری صفحه طراحی وب سایت جابه جا شوند، کسر ضربه 0.6 است. توجه داشته باشید که عناصری که باعث این تغییر شده اند، مانند یک تصویر یا تبلیغات، پایدار در نظر گرفته می شوند زیرا لزوماً پس از رندر شدن حرکت نمی کنند.

کسر فاصله: این بیشترین فاصله ای است که توسط هر عنصر منفرد ناپایدار در نما منتقل می شود. اگر بیشترین جابجایی روی عنصری رخ دهد که از 0100 به 0800 حرکت می کند، 700 پیکسل عمودی جابجا شده است. اگر نمای دستگاه 1000 پیکسل ارتفاع داشته باشد، کسر فاصله 700 پیکسل / 1000 پیکسل = 0.7 است. بنابراین، نمره تغییر چیدمان تجمعی محاسبه شده 0.6 x 0.7 = 0.42 است.

نمرات تجمعی Layout Shift با ضرب معیارهای زیر در یکدیگر محاسبه می شود:

کسر ضربه: این کل مساحت همه عناصر ناپایدار در نمای دید است، یعنی آنهایی که "پرش" می کنند. اگر عناصری که 60 درصد از نمای دید را پوشش می دهند در طول بارگذاری صفحه طراحی وب سایت جابه جا شوند، کسر ضربه 0.6 است. توجه داشته باشید که عناصری که باعث این تغییر شده اند، مانند یک تصویر یا تبلیغات، پایدار در نظر گرفته می شوند زیرا لزوماً پس از رندر شدن حرکت نمی کنند.

کسر فاصله: این بیشترین فاصله ای است که توسط هر عنصر منفرد ناپایدار در نما منتقل می شود. اگر بیشترین جابجایی روی عنصری رخ دهد که از 0100 به 0800 حرکت می کند، 700 پیکسل عمودی جابجا شده است. اگر نمای دستگاه 1000 پیکسل ارتفاع داشته باشد، کسر فاصله 700 پیکسل / 1000 پیکسل = 0.7 است. بنابراین، نمره تغییر چیدمان تجمعی محاسبه شده 0.6 x 0.7 = 0.42 است.

Google برای سازگاری با شرایط زیر تغییراتی در معیار CLS ایجاد کرده است:

• تغییرات چیدمان به «جلسه‌هایی» گروه‌بندی می‌شوند که پنج ثانیه طول می‌کشند، اما اگر تغییری در طرح‌ بندی ایجاد نشد، پس از یک ثانیه بسته می ‌شوند. اگر دو یا چند جابجایی در یک ثانیه رخ دهد، امتیازات طراحی وب سایت اضافه می شود.
• تغییرات چیدمان به مدت 500 میلی ثانیه پس از تعامل با کاربر طراحی وب سایت ، مانند یک کلیک، ثبت نمی شود. در برخی موارد، به ‌روزرسانی‌های DOM را راه ‌اندازی می‌کند (مانند باز کردن یک منو، نمایش پیام خطا، نمایش یک گفتگوی مدال و غیره).
• برنامه‌های تک صفحه ‌ای طراحی وب سایت که برای دوره‌های طولانی ‌تری باز می ‌مانند و به‌روزرسانی‌های متعدد DOM را انجام می ‌دهند، تأثیر منفی نمی‌گذارند.
• صفحات طراحی وب سایتی که امتیاز CLS 0.1 یا کمتر دارند خوب (سبز) در نظر گرفته می شوند. صفحات طراحی وب سایتی که بیش از 0.25 باشد ضعیف در نظر گرفته می شوند (قرمز):

ابزارهای تجزیه و تحلیل تغییر چیدمان تجمعی

معیارهای CLS در پنل DevTools Lighthouse، PageSpeed Insights و web.dev Measure محاسبه می‌شوند:

افزونه Web Vitals برای Google Chrome نیز معیار CLS را نشان می‌دهد:

علل رایج امتیازات تغییر چیدمان تجمعی ضعیف طراحی وب سایت

امتیازات ضعیف CLS معمولاً ناشی از بارگیری کند دارایی‌های صفحه طراحی وب سایت و عناصر DOM پویا یا بدون اندازه است:

• فضای صفحه طراحی وب سایت برای تصاویر، آی فریم، تبلیغات و غیره در نظر گرفته نشده است.
• محتوا به صورت پویا به DOM تزریق می شود، معمولاً پس از درخواست شبکه برای تبلیغات، ویجت های رسانه های اجتماعی و غیره.
• بارگذاری فونت طراحی وب سایت باعث فلش قابل توجه متن نامرئی (FOIT )یا فلش متن بدون سبک (FOUT )می شود.

نحوه بهبود نمرات تغییر چیدمان تجمعی طراحی وب سایت

ممیزی سمت مشتری می ‌تواند مشکلات را شناسایی کند، اما به طور کلی باید اطمینان حاصل شود که قبل از دانلود، فضا برای محتوا طراحی وب سایت محفوظ است. نکات بهینه ‌سازی سرور که برای Largest Contentful Paint پیشنهاد شده‌اند، مزایایی خواهند داشت، اما بهبودهای بیشتری ممکن است:

1- ویژگی های عرض و ارتفاع را به تگ های و

2- ابعاد مناسبی را برای عناصر کانتینری تنظیم کنید که محتوای طراحی وب سایت شخص ثالث با سرعت بارگذاری کندتر مانند تبلیغات و ویجت ها را در بر می گیرد.

3- اطمینان حاصل کنید که تصاویر و سایر دارایی‌هایی که در بالای صفحه طراحی وب سایت ظاهر می‌شوند در اسرع وقت درخواست می ‌شوند – بارگذاری اولیه طراحی وب سایت می ‌تواند مفید باشد.

4- استفاده از فونت طراحی وب سایت را به حداقل برسانید و در صورت امکان از فونت های رایج سیستم عامل استفاده کنید.

5- فونت های طراحی وب سایت را بارگیری کنید و نمایش فونت CSS را روی گزینه اختیاری یا تعویض قرار دهید. اطمینان حاصل کنید که از فونت بازگشتی طراحی وب سایت با اندازه مشابه برای به حداقل رساندن تغییر طرح استفاده می کنید.

6- از درج عناصر در بالای صفحه طراحی وب سایت خودداری کنید مگر اینکه به یک اقدام کاربر طراحی وب سایت مانند کلیک پاسخ دهد.

7- اطمینان حاصل کنید که تعاملات کاربر طراحی وب سایت در عرض 500 میلی ثانیه از آغازگر ورودی کامل شده است.

8- از تبدیل و شفافیت CSS برای انیمیشن‌های کارآمدتر که نیاز به طرح‌بندی مجدد ندارند، استفاده کنید.

CSS9- درون خطی بحرانی را در نظر بگیرید. CSS ضروری «بالای تا» را در یک بلوک

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

10-در صورت لزوم، Containment را در نظر بگیرید، یک ویژگی جدید CSS که به شما امکان می دهد زیردرخت های جدا شده از یک صفحه طراحی وب سایت را شناسایی کنید. مرورگر می ‌تواند پردازش را با رندر کردن - یا عدم ارائه - بلوک‌ های محتوای طراحی وب سایت DOM خاص بهینه کند.

آیا می‌خواهید یک طراحی وب سایت سریع ‌تر ببینید... و مطمئن شوید که واجد شرایط ویژگی‌هایی مانند چرخ فلک جستجوی تلفن همراه Google هستید؟

خلاصه

توسعه دهندگان طراحی وب سایت همیشه مایل به رقصیدن با آهنگ گوگل نیستند. این شرکت قدرت قابل توجهی دارد و به روز رسانی های جزئی موتورهای جستجو طراحی وب سایت می تواند بر بهره وری و سودآوری سازمان های مبتنی بر طراحی وب سایت تأثیر منفی بگذارد.

با این حال، Core Web Vitals به جای یک رویکرد "چوب" رویکرد "هویج" را اتخاذ می کند. طراحی وب سایت های بهینه شده و قابل استفاده که از الگوهای تیره چشم پوشی می کنند، شانس موفقیت بیشتری نسبت به طراحی وب سایت های پف کرده و پربازدید دارند که رابط کاربری تلفن همراه ضعیفی ارائه می دهند.

Core Web Vitals یک روش قابل اندازه گیری برای ارزیابی تجربه کاربر طراحی وب سایت ارائه می دهد تا به شما کمک کند بر روی حیاتی ترین پیشرفت ها تمرکز کنید. ممکن است تغییرات در موارد حیاتی شما باعث افزایش درآمد نشود، اما کاربران طراحی وب سایت شما خوشحال تر و وفادارتر خواهند بود.

آیا نکات دیگری در مورد بهبود Core Web Vitals دارید؟ آنها را در بخش نظرات به اشتراک بگذارید!