بالابردن سرعت سایت با google pagespeed insight

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

حذف منابع مسدود کننده ی رندر
پرهیز از زنجیره کردن درخواست های ضروری
کاهش تعداد درخواست ها و حجم اطلاعات ارسالی
minify کردن کدهای CSS
minify کردن کدهای جاوا اسکریپت
حذف کدهای CSS غیرضروری و استفاده نشده

و حالا به توصیه ی شماره ی 7 می رسیم.

توصیه هفتم: Minimize Main-Thread Work

«کاهش بار کاری main-thread» به چه معناست؟ برای توضیح این مورد باید با مفهوم main-thread آشنا شویم. main-thread عنصر اساسی و اولیه ی مرورگر کاربر است که مسئول تجزیه و تفسیر کدها می باشد تا بتواند این کدها را در قالب عناصر دیدنی و تعامل پذیر به کاربر نمایش بدهد.

بگذارید بیشتر توضیح بدهم. احتمالا بسیاری از شما با مفهوم multi thread programming آشنا هستید. تفاوت multi thread programming با single thread programming در این است که process های برنامه در multi thread توسط چندین thread از CPU پردازش می شوند اما در single thread programming فقط یک thread مسئول پردازش process ها است (به زبان ساده process ها بار کاری CPU هستند، یعنی همان برنامه های در حال اجرا).

بر این اساس می گوییم main-thread جایی است که مرورگر کاربر process هایی مانند تجزیه ی کدها و نمایش آن ها و مدیریت event های کاربر و پردازش کلی صفحه را در آن انجام می شود. مفاهیم پیشرفته تری مانند garbage collection (پاکسازی مموری دستگاه) نیز در این قسمت انجام می شود.

از طرفی کدهای جاوا اسکریپت در حالت عادی روی main thread اجرا می شوند بنابراین اگر کدهای اصلی جاوا اسکریپت وب سایت ما سنگین باشند، مرورگر صبر می کند تا تمام این کدها پردازش شوند و سپس می تواند محتوا را به کاربر نمایش دهد. در چنین حالتی تمام فایل های سایت دانلود شده است و فقط باید پردازش شوند بنابراین بالا بردن سرعت اینترنت و غیره این مشکل را برطرف نمی کند. البته اگر از قابلیت هایی مانند Web worker ها و service worker ها استفاده کنید، این مشکل را به حداقل می رسانید و اجرای کدها را از main thread برمی دارید.

شما باید از روش هایی استفاده کنید که بار کاری و پردازشی جاوا اسکریپت را به حداقل برساند. به طور مثال ساختن و وارد کردن عناصر HTML از جاوا اسکریپت به DOM فرآیند کُند و آهسته ای است. روش بهتر این است که چنین عناصری را (در صورت امکان) به صورت hidden در فایل HTML قرار داده و نهایتا با خصوصیت display از طریق جاوا اسکریپت آن را نمایش دهید. همچنین پردازش های سنگین و محاسباتی باعث کند شدن بارگذاری سایت شما خواهد شد. توجه داشته باشید که اگر کار main-thread شما بیشتر از 4 ثانیه طول بکشد، گوگل صفحه ی شما را جریمه می کند و امتیاز شما را کم خواهد کرد.

جدا از web worker ها و service worker ها که در حالت های خاصی کاربرد دارند، روش های پیشنهادی دیگر برای حل این مشکل وجود دارد:

حذف کدهای غیرضروری یا بارگذاری آن ها به صورت غیرهمگام (مثلا استفاده از fetch و then در درخواست های HTTP).
استفاده از caching
تقسیم کدها به «کدهای ضروری» و «کدهای غیرضروری». شما می توانید کدهای ضروری را در همان ابتدا بارگذاری کنید اما کدهای غیرضروری را فقط در صورت نیاز بارگذاری کنید (چنین تکنیکی را با تصاویر نیز انجام می دهیم و به آن lazy loading می گوییم). یکی از ابزارهای قوی و پیشرفته در این زمینه Webpack است که این قابلیت را به نام Code Splitting به شما ارائه می دهد.

توصیه هشتم: Reduce JavaScript Execution Time

«کاهش زمان اجرای کدهای جاوا اسکریپت» در واقع زیر مجموعه ای از همان کاهش بار کاری main-thread است و اگر وب سایت شما در این زمینه مشکل داشته باشد و تجزیه و اجرای کدهای جاوا اسکریپت زمان زیادی ببرد یک هشدار جداگانه برایتان صادر می کند:

توصیه نهم: (Reduce Server Response Times (TTFB

«کاهش دیرکرد پاسخ های سرور» دقیقا همان مبحث TTFB است. من قبلا در رابطه با Time to First Byte صحبت کرده بودم که می توانید به مقاله ی آن مراجعه کنید اما به صورت خلاصه آن را برایتان توضیح می دهم:
Server response time در لغت به معنی «زمان پاسخ سرور» است و آقای Patrick Sexton (از محققین سئو) آن را اینطور تعریف می کند:

Server response time is the amount of time it takes for a web server to respond to a request from a browser.

Server response time مقدار زمانی است که که یک وب سرور برای پاسخ به یک درخواست مرورگر نیاز دارد.

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

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

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

مرحله ی پردازش درخواست، محلی است که Server response time در آن تعریف می شود. سرور شما باید فکر کند و ببیند چه فایل هایی را به کاربر تحویل دهد. هر چقدر این زمان فکر کردن بیشتر باشد می گوییم Server response time بیشتر است و مشخصا سرعت بارگذاری صفحات نیز کندتر!