آکادمی دیجیتال مارکتینگ گرشا

گوگل امکانی فراهم کرده است تا کاربران بتوانند عملکرد سایت خود را بررسی کنند. در واقع گوگل لایت هوس (Google Lighthouse) قسمت های مختلف سایت را بررسی کرده و مشخص می کند که کدام بخش های سایت مشکل دارند و کدام قسمت ها باید بهبود یابند. این ارزیابی ها در پنج دسته تقسیم بندی می شوند و کاربران از هریک از این  پنج دسته استفاده کرده و سایتشان را آنالیز می کنند. بنابراین می توان گفت لایت هاوس ابزاری برای سنجش کیفیت سایت است. برای آشنایی با گوگل لایت هاوس، آزمون ها و همچنین راهکارهای بهینه سازی آن با آکادمی گرشا همراه شوید.

گوگل لایت هاوس چیست؟

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

Google Lighthouse چه کاربردهایی دارد؟

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

این پنج دسته شامل موارد زیر است:

• Performance : اجرا
• Progressive Web App : وب اپلیکیشن پیش رونده
• Best Practices : رویه برتر
• Accessibility : دسترس‌پذیری
• SEO : بهبود رتبه سایت

لازم به ذکر است ورژن اولیه فقط جهت بررسی  Progressive Web App  بود. در ورژن ۲ قابلیت بررسی عملکرد سایت های معمولی و سئو به آن اضافه گردید. نهایتا در ورژن سوم ابزارهایی جهت ارزیابی در سطح کدهای برنامه نویسی سایت ها از طریق مرورگر کروم قرار گرفت.

در ادامه مقاله، راهنمای انجام تست سایت با کمک گوگل لایت هاوس بیان شده است. کلیه این توصیه ها برای بهبود رتبه سایت به لحاظ تجربه و رابط کاربری  UI/UX ، امنیت، عملکرد، سئو و کاهش هزینه های سایت مفید هستند. حداکثر امتیاز گوگل لایت هاوس ۱۰۰ است که البته کسب آن کار آسانی نیست. البته با انجام نکات گفته شده، کسب رتبه بالا دور از انتظار نخواهد بود.

آزمون Performance

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

شاخص‌ها

شاخص هایی که در ادامه معرفی می شوند، امتیاز نهایی بخش Performance را مشخص می کنند. هر یک از این عوامل، میزان تاثیر متفاوتی دارند. این شاخص ها به مدیران سایت کمک می کند تا بتوانند عملکرد نهایی سایت را از زمان ارسال درخواست از طرف کاربر به سرور، تا زمانی که کاربر شروع به استفاده کند، را تخمین بزنند.

۱-اولین ترسیم محتوا یا First Contentful Paint

فاصله زمانی بین دستور باز کردن سایت تا ظاهر شدن اولین نوشته یا تصویر روی صفحه  FCP نامیده می شود. این کلمه مخفف عبارت First Contentful Paint  است. واحد اندزه گیری بر حسب ثانیه است. که البته به واحد ۰ تا ۱۰۰ تبدیل می‌شود تا در شاخص نهایی قابل اعمال باشد. گوگل لایت هاوس برای تبدیل واحد ثانیه به امتیاز ۰ تا ۱۰۰، زمان به دست آمده را با میانگین سرعت بارگذاری سایت‌های دیگر مقایسه می‌کند. در امتیاز دهی کل عملکرد، ضریب تاثیر FCP ۳ از ۵ می باشد.

۲- اولین ترسیم معنادار یا First Meaningful Paint

اولین ترسیم معنادار که معادل First Meaningful Paint هست و به اختصار FMP نامیده می شود.، مدت زمانی است که طول می‌کشد تا محتوای اصلی صفحه دیده شود. این محتوا بسته به نوع صفحه که گالری یا مثلا وبلاگ باشد می تواند تصاویر، یا عنوان و متن اصلی باشد. لازم به ذکر است که منوی بالایی یا نشانگر بارگذاری صفحه که قبل از بارگذاری کامل ظاهر می‌شود، محتوای اصلی محسوب نمی‌شوند. ضریب تاثیر FMP ۱ از ۵ است که کمترین میزان را نسبت به بقیه شاخص‌های عملکرد دارد.

۳-اولین استراحت پردازنده یا First CPU Idle

اولین استراحت پردازنده یا First CPU Idle  زمان تعامل حداقلی را حساب می‌کند.  به عنوان مثال لحظه‌ای که کاربر بتواند روی یک لیست بازشونده کلیک کند یعنی صفحه تعامل حداقلی را دارد. بنابراین  FCI تعامل حداقلی را در نظر دارد. ضریب تاثیر First CPU Idle  ۲ از ۵ است.

۴-زمان تعامل یا Time to Interactive

زمانی است که تمامی دکمه‌ها، نوارهای ورودی، منوها و به صورت کلی تمامی صفحه برای استفاده آماده باشد. اگر این زمان بین ۰ تا ۵/۲ ثانیه باشد، سرعت خوبی دارد. این زمان را با Time to Interactive  یا TTF  نشان می دهند.

۵-زمان ورودی تخمینی یا Stimated Input Latency

Estimated Input Latency که اکثرا در اپلیکیشن های تحت وب کاربرد دارد. زمانی بین لحظه‌ای که کاربر فکر می‌کند صفحه قابلیت تعامل دارد تا وقتی که واقعاً قادر به تعامل باشد را حساب می‌کند. در واقع هدف از این زمان این است که کاربر نباید منتظر پردازش‌های پس‌زمینه برای شروع تعامل باشد.

۶- ایندکس سرعت یا Speed Index

سرعت نمایش محتوا در طول بارگذاری، ایندکس سرعت یا Speed Index نامیده می شود. سایتی که کل محتوای صفحه را مرحله به مرحله و در زمانبندی‌های کوتاه‌تر بارگذاری کند، ایندکس سرعت بالاتری دارد. به همین دلیل سایت هایی که بعد از اینتر زدن فقط صفحه ای سفید را به کاربر نمایش می دهند و به صورت ناگهانی صفحه لود شده را به او نشان می دهند، Speed Index پایین تری دارند. ضریب تاثیر Speed Index ۴ از ۵ است.

 Best Practices

آزمون های این بخش شامل ۱۶ تست است که بر جنبه های امنیتی سایت تمرکز دارد. در واقع گوگل لایت هاوس بررسی می کند که آیا سایت  از HTTPS استفاده می کند یا HTTP/2  . به علاوه میزان آسیب پذیری جاوا اسکریپت را نیز بررسی می کند. و چک می کند که آیا این منابع از منبع امنی وارد می شوند. بررسی ارتباطات امن دیتابیس و عدم استفاده از فرمان های غیر امن مانند document.write  و یا استفاده از  APIهای منسوخ شده نیز جزو وظایف این دسته تقسیم بندی می شود.

SEO

تست سئوی گوگل لایت هاوس یکی از سخت ترین آزمون هاست. میزان شناسایی سایت یا اپلیکیشن توسط خزندگان موتورهای جستجو و نمایش آنها در صفحه نتایج، از جمله وظایف این بخش است. در این بخش ۱۳ تست قرار داده شده است. اکثر این تست ها مربوط به میزان تطابق اپلیکیشن یا سایت با گوشی های هوشمند و PWA ها است. به علاوه فاکتورهایی همچون قابلیت پیدا شدن سایت توسط خزندگان موتورهای جستجو و پیاده سازی داده ها و تگ هایی همچون canonical و hreflang به شکل صحیح نیز مورد بازرسی قرار می گیرند.

Accessibility

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

Progressive Web Apps

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

نحوه استفاده از گوگل لایت هاوس

سوالی که ممکن است در ذهن شما پیش آمده باشد این است که چگونه می توانیم از فانوس دریایی گوگل استفاده کنیم؟ در جواب باید پاسخ داد که چندین روش وجود دارد که در ادامه هر یک را توضیح داده ایم:

• کافیست در مرورگر کروم راست کلیک کرده و گزینه Inspect را انتخاب کرده و یا کلید F12 را فشار دهید. (DevTools) در ادامه این روش را توضیح داده ایم.
• می توان افزونه Lighthouse را روی مرورگر کروم نصب کنید.
• می توان از خط فرمان یا اتصال به ماژول های برنامه نویسی شده استفاده کرد. در این روش مدیران و کارشناسان امکان نظارت دائم و خودکار روی سایت را دارند و گزارش های شخصی سازی دریافت می کنند.
• استفاده از ابزارهای واسطه همچونsoftware که به صورت دائم و به صورت زمان بندی شده از سایت گزارش ارسال می کند و گزارش ها و اعلان هایی در صورت بروز هر گونه افت عملکرد، ارسال می کند.

استفاده از DevTools مرورگر کروم در اجرای گوگل لایت هاوس

برای شروع کار، صفحه سایت مد نظر خود را در کروم باز کرده و کلید F12 را فشار دهید. در مک از کلیدهای ترکیبی Command+Option+I استفاده کنید تا developer tools باز شود. اکنون در صفحه باز شده به سربرگ Audits بروید. اکنون شما می توانید انواع تست ها را در دستگاه ها و شرایط شبیه سازی شده مختلف پیاده سازی کنید.

نصب افزونه lighthouse در اجرای گوگل لایت هاوس

به افزونه لایت هاوس در وب استور گوگل بروید و افزونه را با زدن گزینه Add to chrome نصب کنید. از این پس می توانید در هر صفحه آن را از گوشه سمت راست اجرا کنید.

با توجه به توضیحات گفته شده در بالا، یکی از روش ها را انتخاب کنید. سپس از قسمت option تست های مورد نظر (همان پنج مورد که در ابتدای مقاله نام برده شد) را انتخاب کنید.

برای دریافت گزارش در افزونه، روی گزینه Generate Report کلیک کنید. اگر از Devtools استفاده می کنید، گزینه Run Audit را انتخاب کنید. بعد از گذشت چند ثانیه پنجره ای باز می شود و گزارش نمایش داده می شود. همچنین می توانید از طریق منو سمت راست بالا، گزارش را در قالب PDF یا HTML ذخیره کنید.

در گزارش ارائه شده، نمره نهایی هر بخش بین ۰ تا ۱۰۰ و با دایره های رنگی نمایش داده شده است. دایره سبز نشان دهنده وضعیت عالی، دایره زرد به معنای عملکرد متوسط و قرمز به معنای ضعیف بودن است.

استفاده از سایت Web.dev در اجرای گوگل لایت هاوس

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

نتایج بدست آمده در web.dev و کروم تقریباً شبیه به هم هستند، اما معیار اندازه گیری برای وب اپلیکیشن های پیش رونده (PWA) نیز در کروم وجود دارد.

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

راهکارهای ساده بهینه سازی در گوگل لایت هاوس

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

نخست راهکارهای ساده را با هم بررسی می کنیم. و در ادامه راهکارهای تخصصی را نیز توضیح می دهیم.

راهکار اول: تاخیر نمایش تصاویر بیرون از نمایش اولیه

بخشی از سایت که برای نمایش داده شدن به کاربر نیاز به اسکرول شدن یا کلیک کردن روی دکمه خاصی را دارد، Offscreen نامیده می شود. بنابراین تصاویری که در این قسمت هستند نیاز به بارگیری ندارند. و در مرحله اول لازم به نمایش نیست. پس می توان برای تصاویر این قسمت از روش بارگذاری تاخیردار (Lazy loading) استفاده کنید. با این روش با اسکرول کردن کاربران به پایین صفحه، تصاویر لود می شوند. اگر از سایت‌های وردپرس استفاده می کنید، از افزونه‌های Smush Image Optimization ،Autoptimize  و Lazy Load by WP Rocket می توانید استفاده کنید.

راهکار دوم: تنظیم سایز تصاویر

منظور از این بخش، مقایسه اندازه تصاویر ارائه شده با اندازه واقعی تصاویر بارگذاری شده است. چنانچه اختلاف حجم تصاویر مقایسه شده بیشتر از ۲۵ کیلوبایت باشد در آزمون گوگل لایت هاوس رد می‌شوند. همچنین در صورتی که اندازه تصویری که در یک صفحه مشاهده می‌شود ۷۰۰ در ۴۰۰ پیکسل باشد، ولی تصویر آپلود شده ۱۴۰۰ در ۸۰۰ پیکسل باشد، مرورگر تصویر بزرگتر را دریافت کرده و آن را در ابعاد کوچک تر نمایش می‌دهد. پیشنهاد می شود تصاویر آپلود شده در همان اندازه مورد نیاز باشد. بنابراین می توانید بر اساس اندازه تصاویر آپلود شده،  در فتوشاپ عکس ها را ریسایز کنید. البته با افزونه Smush Image Optimization  نیز می‌توانید گزینه ریسایز خودکار تصاویر هنگام آپلود را نیز فعال کنید.

لازم به ذکر است در اکثر سیستم‌های مدیریت سایت همچون وردپرس و قالب‌های واکنش‌گرا (Responsive)  عکس های آپلود شده از بخش مدیریت به چند فایل با اندازه‌های مورد نیاز تبدیل می‌شود.

راهکار سوم: کاهش حجم تصاویر

قبل از آپلود تصاویر بهتر است حجم آن ها را کاهش داد. می توانید هنگام ذخیره کردن عکس ها در فتوشاپ آن ها را به صورت Save for web ذخیره کنید و یا از طریق سایت tinypng.com حجم عکس ها را کاهش دهید.

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

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

راهکار چهارم: نحوه ذخیره تصاویر با فرمت های جدید

اگر تا کنون از فرمت‌های JPEG و PNG برای ذخیره تصاویر استفاده می کردید، این نکته را در نظر داشته باشید که گوگل لایت هاوس فرمت‌های جدید تصویری JPEG 2000، JPEG XR و WebP را نسبت به موارد قبلی ترجیح می دهد. زیرا این فرمت‌ها نسبت به فرمت های قبلی، تصویر را بهتر فشرده می‌کنند و بارگذاری سریع‌تری نیز دارند.

چنانچه تصویری را از اینترنت دانلود کرده اید اما نمی توانید با برنامه فتوشاپ آن را باز کنید، تصویرهایی هستند که فرمت WebP دارند که توسط گوگل توسعه یافته اما هنوز خیلی متداول نشده اند. با استفاده از افزونه Autoptimiz یا Smush Image که قبلا معرفی شد تغییر فرمت به WebP را نیز می‌توان انجام داد.

راهکار پنجم: کش کردن عناصر ثابت صفحه

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

اگر از سایت های وردپرس استفاده می کنید می توانید با استفاده از  افزونه‌ های W3 Total Cache یا WP Super Cache  این کار را انجام دهید.

راهکار ششم: کوچک‌سازی فایل‌های css

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

توصیه می شود کدهای فایل css را خلاصه‌سازی کرده و از طریق ادغام چند خط کد در یک خط و حذف فاصله‌های اضافی، آن را بهبود داد.

راهکار هفتم: کوچک‌ کردن فایل‌های جاوا اسکریپت

کوچک و فشرده کردن فایل‌‌های جاوااسکریپت نیز بسیار حائز اهمیت است. برای فشرده‌سازی فایل جاوااسکریپت از فرمت Gzip و فرمت جدید‌ Brotli استفاده می‌شود.

راهکار هشتم: استفاده از ویدیو به جای تصاویر گیف‌ پرحجم

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

راهکار نهم: اطمینان از قابلیت نمایش متن هنگام بارگذاری فونت

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

این مشکل را چگونه می توان برطرف کرد؟

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

بنابراین لازم است در فایل مربوط به استایل یا فونت‌های سایت از دستور font-display: swap استفاده شود.

کلیه ۹ روش ارائه شده در بالا از جمله راهکارهای ساده برای بهبود عملکرد سایت در گوگل لایت هاوس بودند که معرفی کردیم.

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

راهکارهای تخصصی بهینه سازی در گوگل لایت هاوس

راهکار اول: حذف منابع جلوگیری کننده از رندر

بر اساس استانداردهای گوگل لایت هاوس، انتظار می رود سایت به صورت مرحله به مرحله به کاربر نمایش داده شود و به صورت یکباره پس از گذشت چند ثانیه مکث به کاربر نشان داده نشود. بنابراین بارگذاری باید به صورت مرحله به مرحله باشد.

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

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

بنابراین اولویت و ترتیب نمایش هر یک از آن ها امری مهم محسوب می شود. کدهای CSS و جاوا اسکریپت JS بخش مهمی از این فایل‌ها هستند. سه حالت زیر در استفاده از فایل های جاوااسکریپت و css وجود دارد که هر یک معایب و مزایایی دارند. لذا از هر روش بایستی در جای خود استفاده شود.

۱- external style sheet یا استایل شیت خارجی

یک یا چند فایل مستقل وجود دارد که در آن تمامی مشخصات ظاهری مورد نیاز نوشته شده است.

۲- internal style sheet یا استایل شیت داخلی

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

۳- Inline styles یا درون خطی

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

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

راهکار دوم: حذف استایل‌های بدون ‌استفاده

اگر به هر دلیلی قسمت‌هایی از کد CSS بدون استفاده است و توسط مرورگر دریافت و پردازش می‌شوند، ولی هیچ استفاده‌ای از آنها نمی‌شود، بهتر است آن ها را حذف کنید. کافیست در مرورگر کروم در Developer tools در تب Coverage مراجعه کرده و  کدها و حجمی که از بارگذاری اشغال می‌کنند را شناسایی کنید. با این روش می توانید کدهای بی‌استفاده را مشاهده کرده و آن ها را حذف کنید.

راهکار سوم: فعال کردن فشرده‌سازی متن

فشرده کردن نوشته های سایت از طریق تنظیمات سرور اعمال می‌شود.

راهکار چهارم: اتصال سریع

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

راهکار پنجم: کاهش زمان پاسخ سرور

مدت زمانی که سرور دستور یا آدرس را از سمت کاربر دریافت می‌کند تا لحظه ای که اولین داده از سمت سرور دریافت شود بایستی کمتر از  ۶۰۰ میلی‌ثانیه باشد. البته این زمان به عوامل زیادی بستگی دارد. به عنوان مثال حجم داده‌هایی موردنیاز، قدرت سخت‌افزاری و نرم‌افزاری سرور و همچنین نوع و حجم پردازشی که باید قبل از پاسخ انجام شود همگی تاثیرگذار هستند. استفاده از سرویس‌های CDN یکی از راهکارهای این موضوع است. پس این روش را هم در نظر داشته باشید.

راهکار ششم: عدم استفاده از ریدایرکت‌های متعدد

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

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

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

راهکار هفتم: عدم بارگذاری بیش از حد اطلاعات

حجم کل داده‌های دریافتی در بارگذاری اولیه نباید بیشتر از ۱۶۰۰ کیلوبایت باشد. با توجه به شاخص Time To Interactive این حجم برای زمان کمتر از  ۱۰ ثانیه و اتصال به اینترنت از نوع ۳G در نظر گرفته شده است که البته رسیدن به آن کار آسانی نیست. از جمله روش هایی که برای برطرف کردن این موضوع می توان ارائه داد شامل کاهش تعداد پست های یک صفحه، نمایش بخش کوتاهی از متن به جای تمامی متن و چند صفحه ای کردن پست های طولانی است. با این روش حجم بارگذاری اولیه تا حدودی کاهش خواهد یافت.

راهکار هشتم: کاهش زمان اجرای جاوا اسکریپت

مدت زمانی که نیاز است صفحه برای استفاده کاربر آماده باشد نباید طولانی باشد. بنابراین از ابتدای طراحی باید این نکته را در نظر داشت. حتی المقدور کدهای اضافی را حذف کنید و آن ها را کش کنید. همچنین می توانید از روش فشرده سازی کدها هم استفاده کنید و با تکنیک code-split فقط کد‌هایی را که کاربر نیاز دارد اجرا کنید.

بررسی GTmetrix و گوگل لایت هاوس

GTmetrix یکی از بهترین ابزارهای تست سرعت سایت هست. سایت GTmetrix در اواخر سال ۲۰۲۰ معیارهای نمره‌دهی به سرعت سایت‌ها را کاملا تغییر داد. این نسخه جدید قدرت گرفته از ابزار Google Lighthouse هست که با تاکید بر تجربه کاربری بهتر، از معیارهای گوگل لایت هاوس استفاده می کند.  از جمله مهم‌ترین تغییرات در آپدیت GTmetrix جدید، حذف دو مورد PageSpeed و YSlow از آن و اضافه شدن دو معیار جدید به نام GTmetrix Grade و Web Vitals برای بررسی و امتیاز دهی به سرعت صفحات است. GTmetrix Grade  هم به میزان سرعت اجرای صفحه و هم به بهینه بودن ساختار صفحه بستگی دارد. در واقع این ابزار با الهام گرفتن از گوگل لایت هاوس، ملاک های سختگیرانه‌تری را برای نمره‌دهی به صفحات اعمال می‌کند. در GTmetrix  وضعیت کلی صفحه ارزیابی می شود و وضعیت سرعت صفحات به صورت حروف A – F گزارش داده می شود. بنابراین می توان گفت کارایی سایت و تجربه کاربری بهتر، مهم تر از ساختار سایت است.

سخن آخر

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