10 نکته برای بهبود سرعت وب‌سایت

10 راه را بیابید که می‌توانید سرعت صفحه خود را بهینه کنید، تجربه ای عالی برای بازدیدکنندگان خود ارائه دهید و به بهبود رتبه SERP خود کمک کنید.

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

1. از Google Search Console برای بررسی اینکه آیا سرعت صفحه بر SEO شما تأثیر می‌گذارد استفاده کنید.

   گوگل سرچ کنسول شامل یک گزارش کور وب ویتال در سطح بالا است که به شما می‌گوید آیا صفحاتی در وب‌سایت شما وجود دارند که برای سرعت باید بهینه شوند. گوگل این داده‌های سرعت صفحه را از کاربران واقعی کروم جمع آوری می‌کند.
   
   گوگل سرچ کنسول شامل یک گزارش Core Web Vitals سطح بالا است که به شما می‌گوید آیا صفحاتی در وب‌سایت شما وجود دارند که نیاز به بهینه سازی برای سرعت دارند. گوگل این داده‌های سرعت صفحه را از کاربران واقعی کروم جمع‌آوری می‌کند.
   توجه داشته باشید که سرچ کنسول صفحات مشابه را گروه بندی می‌کند، برای مثال، مقدار بزرگ‌ترین محتوای قابل رویت (LCP) برای “آدرس مثال” لزوماً با مقدار LCP گروه کلی مطابقت ندارد.
   

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

   اجرای تست آنلاین سرعت وب‌سایت به شما می‌گوید که وب‌سایت شما چقدر سریع بارگذاری می‌شود، به شما کمک می‌کند تا سرعت صفحه خود را درک کنید و توصیه‌هایی در مورد چگونگی بهبود آن ارائه می‌دهد. برای ایجاد گزارش کافی است URL وب‌سایت خود را وارد کنید.
   
   می‌توانید بر روی هر معیار کلیک کنید تا بیشتر در مورد عواملی که بر آن تأثیر می‌گذارند، بیاموزید. به عنوان مثال، بسیاری از نقاط بارگذاری صفحه را می‌توان با مشاهده نمودار آبشاری آنالیز کرد و از زمان شروع و پایان بارگذاری منابع مختلف صفحه آگاه شد.
   نمای نوار فیلم در بالای نمودار به شما امکان می‌دهد رویدادهای شبکه را با آنچه بازدیدکنندگان شما می‌بینند مطابقت دهید.
   
   همچنین می‌توانید عملکرد وب‌سایت خود را در داده‌های واقعی کاربران Chrome User Experience Report (CrUX) مشاهده کنید. این داده‌ای است که گوگل از آن به عنوان سیگنال رتبه بندی استفاده می‌کند.
   در نهایت، می‌توانید توصیه‌های سرعت صفحه مخصوص وب‌سایت خود را در پایین برگه «نمای کلی» بیابید.
   در نهایت، می‌توانید توصیه‌های سرعت صفحه مخصوص وب‌سایت خود را در پایین برگه «نمای کلی» بیابید.
   

3. تماشای نمایش وب‌سایت شما فریم به فریم

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

   • روی صفحه کلیک راست کرده و “Inspect” را کلیک کنید.
   • تب “Network” را باز کنید.
   • منوی کشویی «No throttling» را باز کرده و «Fast 3G» را انتخاب کنید.
   • صفحه را دوباره بارگیری کنید.
     
     در مثال زیر می‌بینید که:
   • صفحه با یک پس‌زمینه استاتیک شروع به نمایش می‌کند قبل از اینکه تصویر پس‌زمینه ظاهر شود.
   • در ابتدا از یک قلم پشتیبان استفاده می‌شود تا زمانی که قلم وب بارگذاری شود.
   • تصویر در مرکز آخرین بار ظاهر می‌شود.

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

4. به جای امتیاز Lighthouse خود، بر روی موارد حیاتی وب اصلی تمرکز کنید

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

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

   منابع مسدود کننده رندر (Render-Blocking Resources) فایل‌هایی هستند که باید در وب‌سایت شما بارگذاری شوند تا مرورگرها بتوانند محتوا را به کاربر نشان دهند. فایل‌های CSS و جاوا اسکریپت در صفحه <head> اغلب رندر را مسدود می‌کنند.
   در اینجا نمونه‌ای از درخواست (Request Waterfall) وجود دارد که نشان می‌دهد چگونه فایل‌های مسدود کننده رندر بر فرایند رندر وب‌سایت شما تأثیر می‌گذارند:

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

   بارگذاری بسیاری از منابع مسدود کننده رندر باعث می‌شود محتوای صفحه کندتر ظاهر شود و به نمره Largest Contentful Paint شما آسیب می‌رساند.
   بهبود زمان پاسخ سرور
   بارگذاری سند HTML اولیه اولین قدم برای بارگذاری یک وب‌سایت است. معیار Time to First Byte (TTFB) سرعت پاسخگویی سرور وب شما به درخواست برای این منبع را اندازه گیری می‌کند.
   کاهش تعداد درخواست‌های مسدودکننده رندر
   بهترین راه برای سریع‌تر کردن بارگذاری وب‌سایت شما، کاهش تعداد منابعی است که رندر را مسدود می‌کنند. اگر فایلی برای شروع رندر محتوا ضروری نیست، نباید رندر را مسدود کند.
   به عنوان مثال، کلیدواژه‌های defer و async در برچسب اسکریپت به مرورگر می‌گویند که یک فایل JavaScript باید بارگذاری شود، اما صفحه می‌تواند قبل از آن شروع به رندر کند.
   <script src=”app.js” async>
   منابع رندر مسدود کننده را سریع‌تر بارگیری کنید
   برای کوتاه نگه داشتن مدت زمانی که رندر مسدود می‌شود، می‌توانید حجم فایل‌های مسدود کننده رندر را کاهش دهید تا سرعت دانلود افزایش یابد.
   بارگذاری این منابع از دامنه همان وب‌سایت که سند HTML از آن برخوردار است نیز این درخواست‌ها را سریع‌تر می‌کند، زیرا نیازی به اتصالات اضافی سرور وب نیست.
   

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

   برخی از منابع صفحه برای بارگذاری صفحه ضروری هستند و برخی دیگر می‌توانند بعداً در چرخه حیات صفحه بارگذاری شوند. فقط مقدار محدودی پهنای باند در اتصال شبکه در دسترس است، بنابراین شما می‌خواهید به مرورگرها نکات مناسبی در مورد اینکه آیا یک منبع مهم است یا می‌تواند تا بعداً منتظر بماند، بدهید.
   این موضوع برای تصاویر وب‌سایت شما به ویژه درست است. زمانی که فقط HTML را بررسی می‌کنید، مرورگرها نمی‌توانند ببینند که یک تصویر به عنوان یک تصویر اصلی (Hero Image) ظاهر می‌شود یا به عنوان یک آیکون کوچک در پایین وب‌سایت. تنها زمانی که مرورگر شروع به نمایش محتوا می‌کند، متوجه می‌شود کدام تصاویر مهم هستند.
   برای تصاویر مهم، می‌توانید از ویژگی 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 ارجاع داده می‌شود. بر این اساس، درخواست شبکه برای تصویر تنها پس از پایان دانلود شیت آغاز می‌شود.
   
   در این موارد، نکات پیش از بارگذاری (preloads hints) در سند HTML می‌توانند به مرورگر بگویند که منابع را قبل از اینکه در غیر این صورت کشف شوند، بارگذاری کند. به عنوان مثال:
   <link rel=”preload” href=”background.png” as=”image” />

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

   برنامه‌های تک صفحه‌ای (Single-Page Apps) وب‌سایت‌هایی هستند که محتوای صفحه توسط کد JavaScript در مرورگر تولید می‌شود. آنها اغلب با استفاده از چارچوب‌های کدنویسی مانند React، Vue یا Angular ساخته می‌شوند.
   مزیت برنامه‌های تک صفحه‌ای این است که انتقالات صفحه بدون بارگذاری مجدد کامل تمام محتویات صفحه اتفاق می‌افتد. پس از بارگذاری یک صفحه، ناوبری به یک URL متفاوت در وب‌سایت اغلب سریع است.
   با این حال، بارگذاری اولیه با برنامه‌های تک صفحه اغلب کندتر است، زیرا کد برنامه باید بارگذاری و اجرا شود تا محتوای صفحه نمایش داده شود. بازدیدکنندگان ممکن است ابتدا یک اسپینر یا قطعه کد محتوا ببینند در حالی که منتظر بارگذاری کامل صفحه هستند.
   
   برای رفع این مشکل، محتوای صفحه اولیه باید با استفاده از رندر سمت سرور بر روی سرور ارائه شود. به این ترتیب محتوای صفحه ابتدا مانند یک سند سنتی HTML بارگیری می‌شود و سپس به یک برنامه سمت مشتری منتقل می‌شود.

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

    اجرای تست سرعت نشان می‌دهد که امروز وب‌سایت شما چقدر سریع است و برای بهبود آن چه کاری می‌توانید انجام دهید.
    با این حال، نظارت مداوم وب‌سایت شما با DebugBear به تیم شما کمک می‌کند تا در صدر مسائل مربوط به عملکرد وب‌سایت قرار گیرند و اطمینان حاصل کنند که در صورت بروز مشکل به شما هشدار داده می‌شود. داشتن سابقه در دسترس در طول زمان به شما کمک می‌کند تا با مدیریت ارتباط برقرار کنید و بررسی مسائل جدید معرفی شده را آسان‌تر می‌کند.
    داده‌های Google Core Web Vitals در طول یک دوره 28 روزه جمع‌آوری می‌شوند، بنابراین زمانی که یک پسرفت رخ می‌دهد، مدتی طول می‌کشد تا در داده‌های گوگل نشان داده شود. برنامه‌ریزی تست‌های روزانه تضمین می‌کند که قبل از اینکه مشکلات جدید روی رتبه‌بندی شما تأثیر بگذارند، به شما اطلاع داده می‌شود.
    در این تصویر، یک مثال از یک انحراف در Largest Contentful Paint نشان داده شده است که ابتدا در داده‌های آزمایشگاهی ظاهر می‌شود و سپس به تدریج در داده‌های گوگل به‌صورت ثابت می‌شود.
    
    DebugBear همچنین ویژگی Experiments را ارائه می‌دهد که به شما امکان می‌دهد بهبودهای سرعت سایت را بدون نیاز به توسعه کد امتحان کنید. به این ترتیب می‌توانید با ایده‌های ملموس و برآوردی از تأثیر آنها بر عملکرد به توسعه خود بروید.
    شما می‌توانید از بیش از 20 مکان آزمایشی انتخاب کنید، صفحاتی را که نیاز به ورود به سیستم دارند یا بر روی یک سرور مرحله بندی میزبانی می‌شوند را تجزیه و تحلیل کنید و نمرات عملکرد فانوس، دسترسی و سئوی خود را پیگیری کنید.
    DebugBear علاوه بر اجرای تست‌های آزمایشگاهی برنامه ریزی شده، نظارت بر سرعت صفحه کاربر واقعی را نیز ارائه می‌دهد. با نصب یک قطعه تجزیه و تحلیل می‌توانید ببینید بازدیدکنندگان شما در کجای وب‌سایت شما تجربه خوبی دارند و در چه صفحاتی باید کار کنید.
    در حالی که داده‌های آزمایشگاهی به یک نوع تجربه ثابت نگاه می‌کنند، داده‌های کاربر واقعی، تنوع کامل تجربیات بازدیدکنندگان را بهتر به تصویر می‌کشند. برخی از بازدیدکنندگان از اتصالات تلفن همراه آهسته استفاده می‌کنند، از مرورگر قدیمی استفاده می‌کنند یا از سایت شما از مکانی دور از سرور وب‌سایت شما بازدید می‌کنند.
    
    نظارت بر کاربر واقعی همچنین به شما این امکان را می‌دهد که معیار تعامل تا نقطه بعدی (INP) جدیدی را که در مارس 2024 یکی از Core Web Vitals گوگل خواهد شد، را دیباگ (اشکال زدایی) کنید.
    اینکه چقدر وب‌سایت شما برای یک کاربر واکنش گراست بستگی زیادی به پاسخ وب‌سایت شما دارد: کاربر با کدام عنصر صفحه سعی در تعامل دارد؟ DebugBear RUM ردیابی می‌کند که کاربران اغلب با چه عناصر رابط کاربری تعامل دارند و این عناصر چقدر سریع به ورودی کاربر می‌رسند.
    با این داده‌ها می‌دانید وقتی تصمیم به بهینه‌سازی INP می‌گیرید، روی چه تعاملاتی تمرکز کنید.
    

منابع: https://www.searchenginejournal.com/10-top-tips-to-improve-your-website-speed-spa/499273/