با آموختن و به کاربردن ۱۰ نکته طلایی و مهم می‌توانید ضمن بهینه سازی سرعت صفحه خود، تجربه‌ای عالی برای بازدیدکنندگان خود ارائه داده و  رتبه SERP خود را بهبود بخشید.

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

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

آیا می‌دانید چگونه به بهینه سازی Core Web Vitals خود نزدیک شوید؟ در این مقاله 10 نکته مهم و کاربردی در مورد  چگونگی بهینه سازی سرعت صفحه و رفع برخی از رایج ترین مشکلات ارائه شده است.

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

کنسول جستجوی گوگل عبارت است از: یک گزارش Core Web Vitals در سطح بالا که  نشان دهنده‌ی  صفحاتی است در وب سایت شما که نیاز به بهینه سازی برای سرعت را مشخص می‌کند.

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

شمامی‌توانید روی تک تک موارد کلیک کرده و ببینید چه صفحاتی تحت تأثیر این مشکل قرار گرفته‌اند می‌توانید در بخش «چرا URL‌ها خوب در نظر گرفته نمی‌شوند»  این موارد را انجام دهید. در نظر داشته باشید که کنسول جستجو همچنین صفحات مشابه را با هم گروه بندی می‌کند، بنابراین برای مثال مقدار بزرگترین رنگ محتوایی (LCP) برای «نشانی اینترنتی مثال» لزوماً با مقدار کلی «Group LCP» مطابقت ندارد.

2. اجرای تست سرعت صفحه رایگان 

مزایای اجرای تست سرعت وب سایت آنلاین این است که:

• سرعت بارگذاری  وب‌سایت را نشان می‌دهد،
• در درک سرعت صفحه خود به شما کمک می‌کند
•  در مورد چگونگی بهبود آن توضیحاتی ارائه می‌دهد.

 کافی است URL وب‌سایت خود را وارد کرده و گزارش را ایجاد کنید.

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

همچنین در داده‌های گزارش تجربه کاربر واقعی Chrome (CrUX) می‌توانید عملکرد وب‌سایت خود رامشاهده کنید. این داده‌هایی است که  به عنوان سیگنال رتبه بندی توسط گوگل استفاده می‌شود .

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

3. رندر وب‌سایت خود به طور فریم به فریم 

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

همواره می‌توانید ظاهر شدن محتوا را به تدریج تماشا کرده و از درک فرآیند بارگذاری در طول تلاش‌های بهینه‌سازی خود استفاده کنید. اگر می‌خواهید  وب سایت خود با اتصال کندتربارگیری کنید این مراحل را انجام دهید:

1.  کلیک راست روی صفحه و انتخاب "Inspect" 
2. باز کردن تب "شبکه" 
3. باز کردن منوی کشویی «No throttling»  و انتخاب «Fast 3G» 
4. بارگیری دوباره ی صفحه 

در مثال زیر: قبل از ظاهر شدن تصویر پس زمینه، مشاهده می‌کنید که صفحه با پس‌زمینه ایستا رندر می‌شود. در ابتدا تا زمانی که فونت وب بارگیری شود یک فونت بازگشتی در ابتدا استفاده شده و تصویر در مرکز آخرین بار ظاهر می‌شود.

همچنین برای گذر از فرآیند رندرینگ فریم به فریم می‌توانید از تست رایگان DebugBear استفاده کرده. یا با اشتراک پولی DebugBear، ضبط را به صورت MP4 دانلود کنید.

4.تمرکز برروی بخش‌های اصلی وب به جای امتیاز فانوس دریایی خود

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

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

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

5.بهینه سازی منابع مسدود کننده رندر 

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

فایل‌هایی که باید قبل از نشان دادن محتوا بوسیله  مرورگرها، در وب‌سایت شما بارگذاری شوند. فایل‌های CSS و جاوا اسکریپت در صفحه <head> اغلب باعث مسدود شدن رندر می‌شوند. در این قسمت نمونه درخواست آبشار آورده شده است که نشان دهنده‌ی چگونگی تاثیر گذاری فایل‌های مسدود کننده رندر بر روند وب‌سایت شما است.

1. شروع مرورگر با یک صفحه خالی .
2. بارگیری سند HTML .
3. بارگذاری چندین منبع مسدودکننده رندر  ( تمرکز روی app.css به عنوان بزرگ‌ترین و کندترین فایل ).
4. رندر صفحه هنگام بارگذاری  app.css (همانطور که وظیفه CPU نارنجی در آبشار نشان داده شده است).
5. در نهایت، قابلیت مشاهده محتوای صفحه در نمای فیلم استریپ قابل.

بارگیری بسیاری از منابع مسدودکننده رندر باعث کندتر ظاهر شدن محتوای صفحه و آسیب رساندن به بزرگترین امتیاز رنگ محتوای شما می‌شود.

بهبود زمان پاسخگویی سرور

 اولین گام برای بارگذاری یک وب‌سایت بارگیری سند اولیه HTMLاست. متریک Time to First Byte (TTFB) سرعت پاسخ سرور وب شما به درخواست این منبع را اندازه گیری می‌کند.

کاهش تعداد درخواست‌های مسدود کردن رندر

یکی از بهترین راه‌ها برای سرعت بارگذاری وب‌سایت، کاهش دادن تعداد منابعی است که رندر را مسدود می‌کنند. چنانچه فایلی برای شروع رندر محتوا ضرورتی ندارد، نباید رندر را مسدود کند. برای مثال، کلیدواژه‌های defer و async در تگ اسکریپت برای  مرورگر نشخص کننده ی این است که یک فایل جاوا اسکریپت باید بارگذاری شود، اما صفحه می‌تواند قبل از آن شروع به رندر کند.

بارگذاری سریع منابع رندر مسدود کننده 

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

6. بارگذاری تصاویر با اولویت مناسب 

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

این امر به ویژه برای تصاویر موجود در وب‌سایت شما نیز صدق می‌کند  مرورگرهای HTML به تنهایی قابلیت تشخیص یک تصویر به عنوان یک تصویر قهرمان یا ظاهر شدن  عنوان یک نماد کوچک در فوتر وب‌سایت را ندارد.

فقط  زمانی که مرورگر شروع به نمایش محتوا می‌کند متوجه  تصاویر مهم می‌شود . برای تصاویر مهم، می‌توانید از ویژگی fetchpriority استفاده کنید تا مرورگرمتوجه شود که زودتر بارگذاری تصویر را شروع کند:

<img src="hero.jpg" fetchpriority="high">

برعکس، تصاویر پایین‌تر در صفحه را می‌توان اولویت بندی کرد  و به مرورگر گفت که  فقط زمانی که نزدیک به نمایش در ویوپورت هستند شروع به بارگیری آن‌ها کند،  ویژگی img loading  این پیاده سازی آسان می‌کند:

<img src="icon.png" loading="lazy">

7.به حداقل رساندن  وزن صفحه 

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

 از فرمت‌های تصویر مدرن مانند WebP یا Avif می‌توانید برای کاهش اندازه تصاویراستفاده کنید. این فرمت‌ها نسبت به فایل‌های PNG یا JPEG از فضای کمتری برای ذخیره محتوای مشابه استفاده می‌کنند. اگر فایل‌های متنی مانند اسناد HTML، شیوه نامه CSS یا کد جاوا اسکریپت در وزن صفحه شما نقش دارند، 

استفاده از الگوریتم ها فشرده سازی HTTP مانند Brotli را بررسی کنید.

8. درک زنجیره‌های درخواست شبکه 

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

در مثال زیر، تصویر پس‌زمینه تنها از داخل یک stylesheet CSS ارجاع داده می‌شود. بر این اساس، درخواست شبکه برای تصویر تنها پس از پایان دانلود شیت آغاز می‌شود.

در این موارد، نکات پیش بارگیری در سند HTML به مرورگر می‌گوید که منابع را قبل از اینکه در غیر این صورت کشف شوند، بارگیری کند. مثلا:

<link rel="preload" href="background.png" as="image" />

9. استفاده از رندر سمت سرور برای برنامه‌های تک صفحه ای 

برنامه‌های تک صفحه ای: وب سایت‌هایی هستند که محتوای صفحه توسط کد جاوا اسکریپت در مرورگر را تولید می‌کنند. مزیت برنامه‌های تک صفحه ای این است که؛ انتقال صفحه بدون بارگیری مجدد کامل تمام محتویات صفحه را انجام می‌دهند. آنها اغلب با استفاده از چارچوب‌های کدنویسی مانند React، Vue یا Angular ساخته می‌شوند. 

هنگامی که یک صفحه بارگذاری می‌شود، پیمایش به یک URL دیگر در وب‌سایت اغلب سریع‌تر می‌شو د. با این حال، بارگذاری اولیه صفحه معمولا با برنامه‌های تک صفحه ای کندتر پیش می‌رود  بدلیل اینکه برای نمایش محتوای صفحه باید کد برنامه بارگیری و اجرا شود.

بازدیدکنندگان ممکن است در ابتدا فقط یک spinner یا placeholder محتوا را در حالی که منتظر بارگذاری کامل صفحه هستند، ببینند.

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

10. نظارت بر سرعت صفحه به طور مداوم

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

 اگر سابقه در دسترس داشته باشید به مرور می‌توانید  با مدیریت ارتباط برقرار کرده  و بررسی مسائل تازه معرفی شده را به آسانی انجام دهید. داده‌های Google Core Web Vitals در یک دوره 28 روزه جمع‌آوری می‌شوند،

بنابراین وقتی یک رگرسیون رخ می‌دهد مدتی طول می‌کشد تا در داده‌های Google نشان داده شود. همچنبیتن می‌توانید با زمان‌بندی تست‌های روزانه مطلع شدن  از مسائل جدید قبل از تاثیر گذاری  بر رتبه‌بندی شما اطمینان حاصل کنید.

این اسکرین شات نمونه‌ای از رگرسیون Largest Contentful Paint را نشان می‌دهد که ابتدا در داده‌های آزمایشگاهی نشان داده می‌شود و سپس به تدریج شروع به افزایش داده‌های Google می‌کند.

DebugBear همچنین یک ویژگی Experiments را ارائه می‌دهد که به شما امکان می‌دهد ، بهبود سرعت سایت را بدون نیاز به استقرار کد امتحان کنید. به این ترتیب می‌توانید با ایده‌های ملموس و تخمینی از تأثیر عملکردی که خواهند داشت، سمت توسعه خود بروید.

 شما می توانید از بیش از 20 مکان تست انتخاب کنید، صفحاتی را که نیاز به ورود به سیستم دارند یا در یک سرور مرحله بندی میزبانی می‌شوند، تجزیه و تحلیل کنید و نمرات عملکرد فانوس، دسترسی و سئوی خود را پیگیری کنید. DebugBear علاوه بر اجرای تست‌های آزمایشگاهی برنامه ریزی شده، نظارت بر سرعت صفحه کاربر واقعی را نیز ارائه می‌دهد.

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

برخی از بازدیدکنندگان از اتصالات تلفن همراه آهسته ، یا مرورگر قدیمی استفاده کرده  یا از مکانی دور از سرور وب سایت شما،  از وب‌سایت شما بازدید می‌کنند.

نظارت واقعی کاربر همچنین به شما امکان اشکال زدایی معیار جدید Interaction to Next Paint (INP) را که در مارس 2024 به یکی از اصلی‌های وب اصلی Google تبدیل می‌شود،را میدهد. اینکه چقدر وب سایت شما برای یک کاربر واکنش گرا باشد  بستگی زیادی به پاسخ وب‌سایت شما دارد: کاربر با کدام عنصر صفحه در تعامل است؟

DebugBear RUM ردیابی می‌کند که کاربران اغلب با چه عناصر رابط کاربری تعامل دارند و این عناصر با چه سرعتی وارد ورودی کاربر می‌شوند. این داده‌ها به شما کمک می‌کند وقتی تصمیم به بهینه‌سازی INP می‌گیرید، روی چه تعاملاتی تمرکز کنید.

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