گوگل Lighthouse چیست؟ فانوس دریایی گوگل یا Google Lighthouse شامل مجموعه‌ای از راهنمایی‌ها و راهکارهای گوگل جهت بهینه سازی هرچه بهتر محتوای سایت می‌باشد. بهینه سازی سایت و رعایت نکاتی که در این زمینه حائز اهمیت هستند، کمک میکنند تا بهره‌وری کاربران از خدمات و مطالب موجود در سایت افزایش یافته و تعامل با مشتریان به بهترین شکل صورت گیرد.
ابزار Lighthouse ابعاد مختلف وب سایت شما را ارزیابی کرده و پیشنهادات سازنده‌ای در زمینه سئو، افزایش سطح امنیت، بهبود تعامل با کاربران، کارکرد سایت و ... ارائه می‌دهد. در حقیقت بررسی جزئیات توسط این ابزار بحث برانگیز است اما استفاده از راهکارهای ارائه شده مفید و کارساز خواهد بود.
Lighthouse برای کاربران وب و مدیران سایت‌های گوناگون امتیازاتی را بر اساس میزان شایستگی‌های هر وب سایت در نظر می‌گیرد. کسب امتیاز کامل (۱۰۰ امتیاز) از این ابزار تنها با رعایت همه جانبه نکات و توصیه‌های عنوان شده از جانب Lighthouse امکان پذیر خواهد بود.
گرچه بخش گسترده‌ای از خدمات Lighthouse به وب مسترها و طراحان سایت مرتبط بوده و در امور تخصصی طراحی و بهینه سازی وب سایت کاربرد دارد اما این ابزار برای عموم کاربران نیز توصیه‌ها و پیشنهاداتی دارد و می‌توان برای بررسی سطح کیفیت سایت گزارش گوگل لایت هاوس را مورد توجه قرار داد.
آشنایی با Google Lighthouse
در دنیای وسیع وب سایت‌های گوناگونی با ارائه خدمات، عرضه محصولات یا در اختیار قرار دادن مطالب و محتواهای مختلف سعی در جلب توجه و رضایت کاربران دارند. در این میان تنها وب سایت‌هایی در صدر فهرست سایت‌های پرمخاطب و کاربرپسند قرار می‌گیرند که به لحاظ عملکرد کیفی، طراحی، سرعت، امنیت، قوانین سئو و ... در سطح مطلوب قرار گیرند.
به منظور بهبود جنبه‌ها و ابعاد مختلف سایت لازم است به راستی آزمایی و سنجش دقیق و جزئی پرداخته و در صورت وجود هر گونه نقص و اختلال از ابزارهای کاربردی جهت مرتفع نمودن این ایرادات استفاده نمود. ابزار گوگل لایت هاوس با هدف سنجش صفحات و قسمت‌های مختلف سایت از جانب گوگل برای مدیران، طراحان و سایر کاربران وب سایت آماده سازی شده است تا در زمان مناسب نقاط ضعف و مشکلات بخش‌های مذکور را یادآوری نماید.
به این ترتیب عملیات کاوش در اعماق بخش‌های سایت و یافتن نقص‌های احتمالی با سرعت بیشتری صورت گرفته و به تبعیت از آن، فرایند رفع این ایرادات نیز سریعتر انجام می‌شود. Google Lighthouse نکاتی که ورای دید و تصور وب مسترها وجود دارد را نمودار کرده و جزئیات موجود در این زمینه را نشان می‌دهد.
اهمیت استفاده از خدمات Google Lighthouse
این ابزار شاخصه‌هایی را برای بررسی و ارزیابی دقیق نوع اجرا، استفاده از ضوابط سئو، تجربه برتر، وب اپلیکیشن پیشرو و دسترسی پذیری ارائه می‌دهد. هر یک از عناوین ذکر شده ممکن است دارای ضعف‌ها و مشکلاتی باشند و این اختلالات در خروجی و نتیجه نهایی عملکرد سایت اعمال اثر کند.
گوگل لایت هاوس با تمرکز بر پنج بخش یاد شده، موازین کنش گرایی صحیح را یادآوری کرده و نقص‌های احتمالی را یادآور می‌شود. این ابزار سنجش بهترین گزینه برای ساختار بندی و ایجاد اولویت‌های اساسی تلقی می‌شود و می‌توان از خدمات آن برای بهبود بخش‌هایی که دچار مشکل هستند استفاده نمود.
نحوه استفاده از ابزار Google Lighthouse
لایت هاوس برای بررسی و سنجش قسمت‌های مختلف سایت ۴ راهکار قابل دسترسی در اختیار کاربران قرار می‌دهد:
روش اول
استفاده از DevTools جستجوگر گوگل کروم: برای اینکه بتوانید ابزار گوگل لایت هاوس را از طریق Devtools گوگل کروم اجرا کنید لازم است در این مرورگر صفحه مورد نظر را باز کرده و پس از آن کلید F12 را بفشارید. در اغلب رایانه‌ها استفاده از Fn + F12 یا ترکیب کلیدهای Control + Shift + I در ویندوز و مک Command +Option + I، بخش Developer Tools را برای شما باز می‌کند. راست کلیک و فشردن گزینه Inspect نیز برای انجام همین عمل کمک کننده است. پس از آن لازم است بر روی تب Audits که در قسمت بالایی داک باز شده قرار دارد کلیک کنید.
در این روش حالت دسکتاپ و موبایل از یکدیگر مجزا هستند. از آنجایی که نسخه دسکتاپ و موبایل در بسیاری از سایت‌ها با هم متفاوت هستند، می‌توانید آزمون Lighthouse را برای حالت دلخواه خود به اجرا در آورید.
روش دوم
نصب کردن افزونه Lighthouse بر روی جستجوگر گوگل کروم: ابتدا باید این افزونه را از وب استور گوگل دانلود کرده و بر روی گوگل کروم نصب کنید. آنگاه وارد صفحه مورد نظر در سایت شده و آن را از قسمت بالای صفحه (گوشه سمت راست) اجرا نمایید.
توجه داشته باشید از آنجایی که Google Lighthouse برنامه‌ای متن باز محسوب می‌شود، آپدیت‌ها و تغییراتی که در قسمت‌های گوناگون آن شکل می‌گیرند آهسته و در زمان‌های متفاوت در ابزار Devtools افزونه گوگل لایت هاوس که بر روی مرورگر کروم وجود دارند اعمال خواهد شد. نتیجتا امکان ارائه گزارش‌های مختلف پس از اجرایی شدن روش‌های اول و دوم وجود دارد.
روش سوم
استفاده از ابزارهای واسطه: این ابزارهای پس از ارزیابی گزارش لایت هاوس، نمودارها، پیام‌های دوره‌ای و ... را به عنوان گزارش‌های خروجی در اختیار کاربران قرار می‌دهند. مثلا ابزار Foo-Software گزارش‌های مبتنی بر زمان را از وب سایت تهیه کرده و آن را به شکل دائمی در اختیار شما قرار می‌دهد. به این ترتیب می‌توان در صورت بروز هر گونه ضعف در کارکرد سایت، هشدارهای این ابزار را دریافت نمود.
روش چهارم
اتصال به ماژول‌های برنامه نویسی شده یا اجرای گوگل لایت هاوس از توسط خط فرمان: بهره‌مندی از این روش باعث می‌شود مدیران وب سایت بتوانند به صورت هوشمند و دائمی بر بخش‌های مختلف سایت تسلط داشته و گزارشات اختصاصی را دریافت نمایند.
در اجرای سنجش Lighthouse و انتخاب گزینه‌های قابل دسترس به چه نکاتی باید توجه نمود؟
روش‌های اول و دوم مناسب طراحان و مدیران سایتی است که قصد دارند در حد فاصل مشخصی از زمان، ابزار لایت هاوس را به صورت دستی اجرایی کرده و از خدمات آن برای آزمودن بخش‌هاس مختلف وب سایت بهره بگیرند. در نظر داشتن نکات و دستورالعمل‌های زیر پیش از اجرای آزمون Google Lighthouse الزامی می‌باشد:
گرچه سنجش گوگل لایت هاوس به صورت جزئی و با فاکتورهای سخت گیرانه در نظر گرفته شده است، اما به منظور افزایش سطح سختی این آزمون می‌توان از شبیه سازی آزمون سخت یعنی Simulated Throttling که در خلال این تست وجود دارد استفاده نمود. به این طریق پردازشگر و اینترنت تا حد مشخصی افت سرعت پیدا میکنند تا سیستمی با سرعت اینترنت و سخت افزار ضعیف شبیه سازی شود.
پیش از اجرای تست Lighthouse بهتر است سایر افزونه‌هایی که بر روی جستجوگر کروم نصب هستند را موقتا غیر فعال کنید. این افزونه‌ها می‌تواننر شامل آنالیزگرهای صفحات یا حذف کننده‌های تبلیغات باشند.
وب اپلیکیشن‌ها یکی از بخش‌های اصلی گزارش لایت هاوس به شمار می‌آیند. بنابراین چنانچه سایت دارای نسخه وب اپ باشد، در این بخش شاهد نمودار شدن نتایج گزارش خواهید بود. نسخه وب اپ را می‌توان بر روی بسیاری از فروشگاه‌های اینترنتی و سرویس‌های آنلاین نظیر اوبر یا جیمیل مشاهده کرد. در این صورت به نصب اپلیکیشن نیازی نخواهد بود و می‌توان در فضای مرورگر تمامی خدمات را حتی به شکل آفلاین مورد استفاده قرار داد.
در زمان عملیاتی شدن تست لایت هاوس نرم افزارهایی که برای انجام فعالیت‌های خود به مصرف پهنای باند می‌پردازند یا منابع سخت افزاری را مورد استفاده قرار می‌دهند باز نکنید.
مراحل اجرای ابزار Google Lighthouse
- ابتدا صفحه مورد نظر خود را در سایت باز کنید
- به منظور اجرای تست، افزونه لایت هاوس را انتخاب کرده یا بر روی گزینه DevTools کلیک کنید.
- تست‌های مورد نیاز شما در بخش Option افزونه یا فهرست تنظیمات Devtools قرار دارد و می‌توانید از میان گزینه‌های موجود نمونه دلخواه را انتخاب نمایید.
- گزینه‌هایی که قادر به انتخاب آن‌ها هستید، بخش‌های مختلف آزمون مانند اجرا، ضوابط سئو، تجربه برتر، وب اپلیکیشن پیشرو و دسترسی پذیری هستند و هر یک از آن‌ها می‌توانند بنا به خواست شما غیر فعال شوند.
- حالا لازم است در فضای Devtools از میان موبایل و دسکتاپ گزینه مورد نظر را انتخاب کنید.
- Run Audit در Dectools یا Generate Report در افزونه را انتخاب کنید و منتظر بمانید تا گزارش مربوطه در یک پنجره جدید باز شود.
- گزارش‌های دریافت شده را می‌توان به صورت فایل pdf، HTML و ... پس از انتخاب از منوی (سه نقطه) سمت راست بالای صفحه ذخیره نمایید.
- اعداد ۰ تا ۱۰۰ که درون دایره‌های رنگی در بخش بالایی گزارش مشاهده می‌شوند، امتیاز نهایی هر قسمت از این سنجش را نمایان می‌کند. مطابق این مقیاس رنگ قرمز شرایط ضعیف، زرد شرایط متوسط و سبز شرایط عالی را نشان می‌دهد. جزئیات شاخصهای ایجاد کننده این اعداد در ادامه گزارش مشهود هستند.
اما استفاده از چه تکنیک‌هایی کسب امتیاز بالا در این گزارش را مقدور می‌سازد؟
تست کارکرد و میزان سرعت آپلود صفحه
نوع فرایند و میزان سرعت بارگذاری محتوای صفحه مولفه‌هایی با درجه اهمیت بالا محسوب می‌شوند. بنابراین میزان بهینه سازی صفحه مورد نظر توسط این آزمون مشخص می‌شود تا به این ترتیب کارایی صفحه برای مشاهده و ایجاد ارتباط با کاربران مشخص شود.
کاربر زمانی فرایند بارگذاری صفحه را مشاهده می‌کند که سرعت اینترنت محدود و محتوای قابل ارائه در صفحه پر حجم باشد. بارگذاری صفحه دارای مراحل مختلف است. اما آنچه سبب بهبود کارکرد سایت می‌شود، اطلاع از مراحل قابل انجام و معین کردن شاخصی جهت ارزیابی چیزی است که در فرایند آپلود رویت می‌شود. این شاخص‌ها به مدیران سایت و طراحان برای مطلع شدن از نوسانات کوچک در سایت کمک میکنند.
شاخص‌ها
برای دریافت امتیاز نهایی بخش اجرا از شاخص‌هایی بهره گرفته می‌شود. برای اعمال اثر این نوع شاخص‌ها می‌توان سهمی مجزا در نظر گرفت. برای درک بهتر این موضوع بهتر است با FCP آشنا شوید. FCP یا نخستین ترسیم محتوا، اولین ترسیم معنادار حد فاصل زمانی میان فرمان به باز شدن سایت و رویت اولین محتوای بارگذاری شده در صفحه آن است. برای اندازه‌گیری این پارامتر از واحد ثانیه استفاده می‌شود. بنابراین زمان به واحدهایی از ۰ تا ۱۰۰ تقسیم بندی می‌شود تا شاخص نهایی قابل استناد باشد.
نحوه محاسبه FCP توسط Lighthouse
لایت هاوس زمان به دست آمده در آزمون را در قیاس با میانگین سرعت بارگذاری سایر سایت‌ها قرار می‌دهد تا واحد ثانیه به امتیاز ۰ تا ۱۰۰ تبدیل شود. مثلا چنانچه FCP در ۹۹ درصد سایت‌های موجود ۱.۵ ثانیه برآورد شده و سایت شما نیز در تست FCP طی ۱.۵ ثانیه آپلود شود، امتیاز نهایی آن ۹۹ از ۱۰۰ خواهد بود. این شیوه در سایر شاخصهای زمانی همین شیوه محاسبه و تبدیل به امتیاز عددی را خواهد داشت.
شاخص نخستین ترسیم معنادار
این شاخص مدت زمان لازم برای مشاهده محتوای اصلی صفحه را نشان می‌دهد. نوع صفحه محتوای اصلی را تعیین می‌کند. مثلا محتوای اصلی در گالری، تصاویر هستند و در وبلاگ‌ها محتوای متنی و عنوان مقاله را محتوای اصلی در نظر می‌گیریم. بنابراین منوی بالایی یا نشانگر بارگذاری صفحه که پیش از آپلود کامل به نمایش در می‌آید را نمی‌توان محتوای اصلی در نظر گرفت.
First CPU ldle یا نخستین استراحت پردازنده (FCI)
مدت زمان کمترین تعامل به واسطه این شاخص محاسبه می‌شود. مثلا زمانی که کاربر قصد کلیک بر روی فهرستی بازشونده را داشته باشد، معنای تعامل حداقلی صفحه پدیدار می‌شود. در غالب وب سایت‌ها این زمان پیش از بارگذاری کامل مشاهده می‌شود اما به معنای آن نیست که کاملا قابل تعامل است. محدوده ۰ تا ۴.۷ ثانیه بهترین برای تعامل حداقلی است.
Time To Interactive یا زمان تعامل (TTF)
با این شاخص می‌توان مدت زمانی را که صفحه کاملا قابل تعامل است اندازه گرفت. به این معنا که تمامی نوارهای ورودی، منوها، دکمه‌ها و ... برای استفاده آماده سازی شوند. در این زمینه مدت زمان ۰ تا ۵.۲ ثانیه بهترین و سریعترین امتیاز به شمار می‌آید.
زمان ورودی تقریبی
حد فاصل زمانی که کاربر تصور می‌کند صفحه قابل تعامل است تا زمانی که واقعا قابلیت تعامل داشته باشد به واسطه این شاخص محاسبه می‌شود. اکثر اپلیکیشن‌های تحت وب از این شاخص استفاده میکنند. به این ترتیب کاربر نباید در انتظار تحلیل‌های پس زمینه‌ای جهت آغاز تعامل باشد.
Speed Index (ایندکس سرعت)
میزان سرعت لازم برای نمایش محتوا در طول آپلود توسط این شاخص اندازه‌گیری می‌شود. شاخص سرعت ایندکس در وب سایت‌هایی بالا است که تمامی محتوای صفحه را پله پله و در زمان بندی‌های محدود آپلود کند. در مقابل سایت‌هایی که سرعت ایندکس در آن‌ها محدود است، تا زمان تکمیل بازگذاری صفحه (پس از اینتر زدن روی آدرس) تنها صفحه سفید مشاهده می‌شود. بازه زمانی ۰ تا ۴.۳ ثانیه بهترین حالت برای این شاخص در نظر گرفته می‌شود.
نتیجتا باید اظهار داشت که شاخصهای یاد شده به طراحان و مدیران سایت کمک میکنند تا از زمان ارسال تقاضای کاربر به سرور تا وقتی که او استفاده از محتوای سایت را آغاز می‌کند، کارکرد نهایی وب سایت یا وب سرور تخمین زده شود.
راه حل‌های بهینه سازی سایت و ارزیابی گزارش کارکرد
شاخصهای سرعت بارگذاری بر اساس ثانیه که سبب بهینه سازی عملکرد سایت می‌شوند تحت تاثیر عوامل مختلف قرار دارند. لذا نوسانات صحیح ممکن است با اعمال اثر در هر یک از شاخص‌ها سبب ارتقای امتیاز نهایی آن‌ها شود. در بخش عملکرد، بیشترین تاثیر مربوط به کد نویسی و طراحی سایت می‌باشد.
البته راهکارهای ساده‌ای نیز وجود دارند که به کاربران برای ایجاد تاثیرات لازم کمک میکنند. بخش‌های مختلف ابزار Google Lighthouse شامل موارد زیر هستند:
- Diagnostics (فرصت‌ها)
- Opportunities (تشخیص‌ها)
- Passed Audits (موفقیت‌ها)
دو قسمت اول مشکلات موجود، منشا ایجاد مشکل و راه حل پیشنهادی را نشان می‌دهد و بخش سوم به ارائه فهرستی از آزمون‌های فاقد ایراد می‌پردازد. راهکارهای قابل ارائه شامل راهکارهای تخصصی و غیر تخصصی هستند. بدیهی است که به کارگیری راه حل‌های تخصصی به مهارت و تجربه نیازمند است اما توصیه‌های ساده می‌تواند توسط کاربران مختلف مورد استفاده قرار گیرد.
در ادامه هر یک از راه حل‌های ساده و تخصصی را معرفی می‌نماییم. توجه داشته باشید که لازم است پیش از استفاده از هر گونه راه حل یا توصیه جهت ایجاد تغییر در فضای وب سایت ابتدا از تمام محتوای سایت بکاپ گرفته و نسخه پشتیبان را در دسترس داشته باشید.
راه حل‌های ساده جهت افزایش کارایی سایت
تاخیر نمایش تصاویر خارج از نخستین نمایش
استفاده از دکمه‌ای خاص یا اسکرول کردن به پایین توسط کاربر سبب به نمایش در آمدن بخشی از وب سایت به نام Offscreen می‌شود. در مرحله نخست نیازی به آپلود محتواهای تصویری این بخش نخواهد بود و می‌توان از شیوه Lazy Load جهت بارگذاری به سبک تاخیر دار استفاده نمود. به این ترتیب با اسکرول کردن به سمت پایین صفحه تصاویر بارگذاری می‌شوند.
افزونه‌های زیر برای انجام این راه حل ساده در وب سایت‌های وردپرسی کمک کننده هستند:
- Image Optimization
- Lazy Load By WP Rocket
- Smush Autoptimize
تنظیم سایز و ابعاد محتواهای تصویری
مطابق این روش اندازه حقیقی تصاویر آپلود شده با ابعاد تصاویر ارائه شده مقایسه می‌شوند و چنانچه تفاوت حجم تصاویر از ۲۵ کیلو بایت بیشتر باشد، نتیجه موفقی در آزمون کسب نخواهد شد. توجه داشته باشید که اختلاف در حجم این تصاویر بلاعث می‌شود تا موتور جستجو تصویری با ابعاد بزرگ‌تر را دریافت نموده و سپس آن را در اندازه کوچکتر به نمایش بگذارد.
در بیشتر سیستم‌های مدیریت محتوا مثل وردپرس و قالب‌های واکنش گرا تصاویر بارگذاری شده از قسمت محتوا به فایل‌هایی با اندازه‌های استاندارد تبدیل می‌شوند. از این رو لازم است تصاویر آپلود شده دارای سایز مناسب باشند. برای اینکه تسلط بیشتری بر این کار داشته باشید بهتر است پیش از بارگذاری محتواهای تصویری، اندازه مورد نیاز برای نمایش آن‌ها را بدانید و از فتوشاپ برای ذخیره تصاویر در همان اندازه بهره بگیرید.
همچنین استفاده از قابلیت‌های افزونه Smush Autoptimize نیز در این امر به کمک شما خواهد آمد. در بخش تنظیمات این افرونه برای تغییر سایز تصاویر به شیوه خودکار و در زمان بارگذاری محتوا گزینه‌ای وجود دارد.
کم کردن حجم تصاویر
از آنجایی که لازم است تصاویر موجود در وب حجم محدودی داشته باشند، می‌توان از راهکارهای کاهش حجم تصاویر مانند ابزار Tinypng یا Save for Web در فتوشاپ استفاده کرد. به این طریق حجم تصاویر مورد نظر به حداقل رسیده و برای استفاده آماده می‌شوند.
کاهش حجم در لایت هاوس گوگل چگونه است؟
در این آزمون دریافت تمامی تصاویر از جانب صفحه صورت می‌گیرد. از درجه فشرده سازی ۸۵ برای کاهش حجم این تصاویر استفاده می‌شود. در این صورت چنانچه تفاوت حجم تصویر اصلی و تصویر فشرده سازی شده از ۴ کیلو بایت بیشتر باشد، این تصاویر در لیست تصاویر قابل فشرده سازی به نمایش در می‌آید.
در کنار توجه به حجم مناسب محتواهای تصویری لازم است میزان کیفیت آن‌ها نیز مورد توجه قرار گیرد. در بسیاری از مواقع با کاهش حجم تصاویر از محدوده قابل تایید Lighthouse کیفیت تصاویر نیز کاهش می‌یابد. بنابراین ویژگی‌های زیبایی شناسی، نوع تصویر قابل ارائه و جایگاهی که در آن مورد استفاده قرار می‌گیرد، میان حجم و کیفیت تصویر ترازی قابل قبول ایجاد خواهد کرد.
ذخیره سازی محتواهای تصویری در فرمت‌های جدید
از آنجایی که فرمت‌های جدیدی مانند JPEG XR، JPEG 2000 و WEB P نسبت به فرمت‌هایی نظیر PNG و JPEG برای فشرده سازی تصاویر بهتر بوده و این محتواها را با سرعت بالاتری آپلود میکنند، از دید Lighthouse جایگاه بهتری داشته و بیشتر مورد تایید هستند. مثلا تصاویری که فرمت WebP دارند، بعد از ذخیره شدن از گوگل در برنامه فوتوشاپ قابل تغییر نخواهند بود. تصاویری با این فرمت از طرف گوگل گسترش یافته‌اند اما در حال حاضر چندان رواج ندارند.
این نوع فرمت‌ها توسط ابزارهای ادیت تصاویر مانند فتوشاپ پشتیبانی می‌شوند. به کمک افزونه Smush Image یا Autoptimize در ورد پرس هم می‌توان فرمت را به WebP تغییر داد
کش کردن المان‌های استاتیک در صفحه
چنانچه کاربر سایت از سایر صفحات وب سایت استفاده کند یا پس از مدتی مجددا وارد فضای وب سایت شود، موتور جستجو از Cache یا اطلاعات ذخیره شده، بارگذاری محتوای صفحات را با سرعت بیشتری به انجام می‌رساند. به این ترتیب لازم است عناصر غیر قابل تغییر و ثابت در صفحات را به عنوان محتواهای قابل کش شدن در اختیار موتور جستجو قرار داده و تاریخ انقضای آن‌ها را نیز تا حد زیادی طولانی تعیین کنید. نصب و استفاده از افزونه‌هایی مانند W3 total cache و WP Super Cache انجام این عملیات را در وب سایت‌های وردپرسی سهل الوصول خواهند کرد.
کوچک کردن فایل‌های CSS
کدهای مربوط به وب سایت قابلیت کوچک شدن و فشرده سازی دارند و به همین جهت بهترین توصیه اقدام به استفاده از ترفندهای مناسب برای کوچک کردن کدهایی است که به میزان بیشتر بر سرعت سایت اثر می‌گذارند. فایل‌های CSS در دسته همین کدهای حائز اهمیت قرار می‌گیرند. این فایل قادر به ذخیره سازی تمامی مشخصات ظاهری و شاخصه‌های بصری سایت است؛ لذا لازم است برای آپلود هر صفحه روند دریافت و پردازش را طی کند. در این صورت کاهش میزان حجم سایت سرعت آپلود را بالا می‌برد.
ترکیب چند خط کد در یک خط و از بین بردن فاصله‌های اضافی به خلاصه سازی فایل‌ها دارد. البته باید یادآوری کرد که در کنار حذف فاصله و خلاصه سازی، کد نویسی و شیوه تقسیم بندی و اجرای کدهایی که به واسطه موتور جستجو تحلیل می‌شوند نیز در کارکرد و میزان سرعت سایت اثرگذار هستند. در سایت‌های مبتنی بر وردپرس می‌توان جهت انجام این تنظیمات از افزونه‌هایی نظیر Hummingbird، W3 total Cache و Autoptimize استفاده نمود.
کوچک کردن فایل‌های جاوا اسکریپت
برای کوچک کردن این نوع فایل‌ها استفاده از فرمت Brotli و Gzip متداول است. البته افزونه‌های معرفی شده در بخش‌های قبلی نیز قابلیت فشرده سازی فایل‌های جاوا اسکریپت را دارند.
جایگزین کردن ویدئوها به جای گیف‌های پرحجم
تصاویر متحرک گیف در بسیاری از وب سایت‌ها به عنوان محتوای تصویری وجود دارد اما چنانچه حجم این تصاویر بالا باشد، مدت زمان بیشتری برای آپلود صفحه صرف خواهد شد. بنابراین استفاده از فرمت‌های ویدئویی مثل WebM یا mp4 توصیه بهتری محسوب می‌شود.
کسب اطمینان از خوانا بودن فونت محتواهای متنی در هنگام بارگذاری
گاهی در زمان باز شدن سایت ممکن است متون و محتواهای نوشتاری چند ثانیه پس از بارگذاری تمام قالب نمایان شوند. زمانی که موتور جستجوگر دریافت فونت نوشتاری را با تاخیر انجام دهد به نمایش در آمدن نوشته‌ها نیز با تاخیر صورت می‌گیرد.
حالا می‌توان با استفاده از کدهایی ساده مرورگر را مطلع کنیم تا فاصله زمانی لازم برای دریافت فونت اصلی را با استفاده از فونت‌های موجود در موبایل یا رایانه برای نمایش متن‌ها پر کند. از این طریق وقفه ایجاد شده برای نمایش متن جبران شده و از بروز چنین نقص‌هایی ممانعت می‌شود. به این ترتیب حالت نوشته‌ها به نمایش در آمده و پس از آنکه فایل فونت توسط مرورگر دریافت شود، فونت متن تغییر می‌یابد. استفاده از دستورالعمل Swap : font – display در فایل استایل یا فونت‌های سایت کار شما را آسان‌تر می‌کند.
راه حل‌های تخصصی جهت افزایش کارایی سایت
پیش از بهره‌گیری از این راهکارها باید به تهیه نسخه پشتیبان ازسایت پرداخته و از مهارت و دانش تخصصی برای به کارگیری این ترفندها برخوردار باشید.
منابعی را که مانع رندر می‌شوند حذف کنید
مطابق الگوها و استانداردهای تعیین شده از جانب Lighthouse لازم است فرایند بارگذاری سایت در صفحه توسط کاربر رویت شود و این موضوع ور شاخصهای تعیین شده مشخص است. در زمان بارگذاری سایت فایل‌های مختلفی در زمان واحد از سمت سرور به کاربر ارسال می‌شوند و تعدادی از فایل‌های دریافتی نیز به شکل همزمان تحلیل می‌شوند. به همین جهت فایل‌های متنی و تصویری به شکل مستقیم بر روی صفحه قابل رویت هستند.
برخی از فایل‌ها نیز در قسمت پس زمینه توسط موتور جستجو دریافت می‌شوند و همین موضوع سبب می‌شود تا بخش‌های مختلف به لحاظ ظاهری مناسب و بی‌نقص باشند. ابعاد و رنگ نوشته‌های موجود در صفحه و رنگ منوها، شاکله ظاهری یا استایل صفحه را نشان می‌دهند.
برای اینکه قسمت‌های مختلف با ترتیب مشخص و سرعت مناسب آپلود شوند باید اولویت بندی کاربردی وجود داشته باشد تا مرورگر بر حسب میزان اهمیت هر داده فایل‌ها (مانند JS و CSS) و کدهای موجود را دریافت و تحلیل نماید. طراحی به واسطه جاوا اسکریپت و CSS سه حالت کلی دارد که لازم است در مکان مناسب از آن‌ها استفاده نمود. استفاده از این رویکردها همچنین دارای مزایا و معایبی است که باید نسبت به آن‌ها آگاه باشید.
حالات طراحی به کمک CSS و JS:
- استایل شیت داخلی که به معنای تخصیص بخشی از کدهای موجود در صفحه به قواعد لازم الاجرا است.
- استایل شیت خارجی که وجود چند فایل مجزا حاوی مشخصات ظاهری مورد نیاز نوشته شده است.
- استایل شیت درون خطی امکان قرار گیری تگ استایل در قسمت‌های مورد نیاز کدهای صفحه را فراهم کرده و اعمال ضوابط مورد نیاز را مقدور می‌سازد.
- به این ترتیب چنانچه استایل کلی سایت از نوع شیت خارجی با فایل نسبتا پرحجم باشد که در این صورت هر صفحه به دریافت این فایل نیاز خواهد داشت. مسلما در این حالت هیچ کدام از قسمت‌های صفحه تا زمانی که استایل شیت دریافت و پردازش نشده باشد برای کاربر نمودار نمی‌شود. این نوع پردازش‌ها مانع رندر شدن و دریافت صفحات توسط موتور جستجوگر می‌شوند و باید آن‌ها را حذف و بهینه سازی نمود.
- با توجه به نوع وب سایت و محتوای موجود در آن می‌توان از استایل شیت داخلی یا درون خطی به منظور افزایش سرعت آپلود صفحه استفاده نمود. توصیه گوگل در مواقع ضروری استفاده از استایل شیت درون خطی است.
استایل‌های غیر کاربردی را حذف کنید
ممکن است قسمت‌هایی از کد CSS به هر دلیل غیر قابل استفاده باشند. به این ترتیب مرورگر روند دریافت و تحلیل کدها را به انجام می‌رساند اما آن‌ها را مورد استفاده قرار نمی‌دهد. در این صورت می‌توانید Developer Tools در مرورگر کروم را باز کرده و وارد تب Coverage شوید تا این کدهای بلااستفاده و میزان حجم اشغال شده توسط آن‌ها را مشاهده نمایید. از این رو چنانچه این کدها در هیچ یک از بخش‌های سایت مورد استفاده قرار نمی‌گیرند بهتر است آن‌ها را حذف کنید.
اتصال زود هنگام را مورد توجه قرار دهید
در بسیاری از موارد برای آپلود صفحه‌ای از سایت به دریافت فاکتورهایی چون فونت، تصویر و ... از سرورهای مجزا نیاز است و در این حال باید وجود اتصالات امن را نیز بررسی نمود. برای انجام این اتصالات و دریافت منابع یاد شده فقط به چند میلی ثانیه زمان نیاز است. جهت افزایش سرعت بارگذاری صفحه می‌توان از مرورگر درخواست کرد که برخی منابع را قبل از ارسال فرمان استفاده از آن دریافت و ذخیره سازی نمایند.
فونت‌های گوگل در بسیاری از سایت‌ها مورد استفاده قرار می‌گیرند؛ لذا می‌توان به جای انتظار برای بررسی CSS توسط مرورگر اتصال به سرور و دریافت فونت بعد از مشاهده فونت گوگل، به موتور جستجو اطلاع دهیم که گوگل فونت در این صفحه مورد استفاده قرار گرفته و می‌تواند در عین حال که فایل CSS را دریافت و تحلیل می‌کند، به سرور آن نیز اتصال یابد. Preconnect دستورالعمل‌هایی ایده‌آل جهت اتصال‌های زود هنگام یا استفاده از چند منبع محسوب می‌شوند.
مدت زمان پاسخ سرور را کاهش دهید
مدت زمان دریافت آدرس از سوی کاربر توسط سرور به عنوان اولین داده و دستور دریافتی باید کمتر از ۶۰۰ میلی ثانیه به طول انجامد. عوامل زیر در تعیین سرعت و مدت زمان یاد شده دخیل هستند:
- نوع و میزان حجم پردازشی که لازم است پیش از پاسخ صورت گیرد
- قدرت سرور به لحاظ مولفه‌های سخت افزاری و نرم افزاری
میزان حجم اطلاعات مورد نیاز
ارسال درخواست از جانب کاربر به سمت سرور مستلزم تحلیل گزارش، اتصال به پایگاه اطلاعاتی و پردازش تمامی داده‌های موجود دارد. به همین جهت لازم است از روش‌های برنامه نویسی کاربردی برای کاهش کاهش مدت زمان دریافت و تحلیل داده‌ها استفاده شود. از این رو انتخاب سرویس میزبانی مناسب بسیار حائز اهمیت است و بهتر است از قابلیت سرویس‌های CDN بهره بگیرید.
کدهای شخص ثالث را کاهش دهید
کدهای شخص ثالث مربوط به برنامه یا سایتی دیگر هستند و برای پیشبرد هدفی مشخص به داده‌های وب سایت شما افزوده می‌شوند. کدهایی که برای جمع آوری اطلاعات گوناگون یا رصد کردن عملکرد و علایق کاربران از طریق تست A/B، سرچ کنسول یا گوگل آنالیتیکس مورد استفاده قرار می‌گیرند در حقیقت همان کدهای شخص ثالث به شمار می‌آیند زیرا به شخص سوم که اکثرا برنامه‌ای خارج از سایت است تعلق دارند و هدفشان انتقال اطلاعات جمع آوری شده به برنامه مورد نظر است.
اما لازم است از تعداد این کدهای شخص ثالث کاسته شود زیرا بالا بودن تعداد و حجم آن‌ها باعث کاهش سرعت سایت می‌شود. استفاده از نرم افزارهای مربوط به Third-party مانند گوگل تگ منیجر که واسطه‌ای مناسب در این زمینه محسوب می‌شود، بهترین گزینه برای کاهش حجم این کدها به شمار می‌آید. این ابزار باعث می‌شود تنها یک کد (خود تگ منیجر) وارد سایت شما شود و به وارد کردن سایر کدها نیازی نخواهد بود. با ورود به بخش تنظیمات تگ منیجر می‌توان تمامی کدهای Tird Party را مدیریت نمود.
از ریدایرکت‌های متعدد استفاده نکنید
استفاده از دستور ریدایرکت زمانی صورت می‌گیرد که درخواستی مبتنی بر انتقال صفحه، داده و فایلی به آدرس دیگر انجام شود. مثلا ممکن است بارها مشاهده کرده باشید که در زمان نمایش قهرست نتایج جستجوی گوگل، با کلیک بر روی نتیجه مورد نظر به جای آدرسی که در صفحه نتایج وجود دارد، وارد صفحه‌ای جدید شوید.
در این صورت ممکن است صفحه مذکور به دلایل مختلف منتقل یا حذف شده باشد و طراح وب سایت برای انتقال کاربران از آدرس قبلی و هدایت آن‌ها به نشانی جدید از این نوع ریدایرکت استفاده نماید. فرایند ریدایرکت به مراجعه موتور جستجو به سایت اصلی، دریافت نشانی جدید و باز کردن صفحه جدید نیازمند است که انجام این مراحل به مدت زمان مشخصی نیاز دارد.
باید توجه داشت که در هر حالت انجام ریدایرکت زمان بر خواخد بود و از این رو باید از تعداد ریدایرکت‌ها کم شده و لینک‌هایی که به منابع انتقال، داده شده است آپدیت شوند.
از تعداد تقاضاهای ضروری بکاهید
فایل‌هایی که برای پردازش به موتور جستجوی کاربر ارسال می‌شوند باید بر اساس اولویت بندی‌ها مرتب شده باشند. لذا درخواست‌های الزامی و تقاضاهای ضروری نباید دارای حجم و تعداد زیادی باشند تا ارسال آن‌ها با سرعت بیشتری صورت گیرد.
تعداد درخواست‌های ارسال شده از جانب کاربر را کم کنید
تعداد تقاضاهای ارسال شده توسط لایت هاوس شمارش شده و میزان حجم اطلاعات انتقالی برآورد می‌شود. بالا بودن تعداد و حجم درخواست‌ها نشانگر وجود مشکل در سایت است و باید به آن رسیدگی شود. در این زمینه گوگل به ارائه راهکارهای کلی و جامع می‌پردازد اما کاهش حجم و تعداد فایل‌های CSS و مرتفع کردن اختلال آپلود فونت از سایر سرورها برای جلوگیری از ایجاد این مشکلات کارساز خواهد بود.
رشته کارهای اصلی را کم کنید
در این شیوه باید مدت زمان تحلیل و اجرای رشته اصلی را کوتاه کنید.
آپلود غیر استاندارد داده‌ها را متوقف کنید
مجموع حجم داده‌های دریافت شده در آپلود ابتدایی نباید از ۱۶۰۰ کیلو بایت بیشتر شود. بر اساس شاخص TTI و اینترنت نوع 3G حجم زیر ۱۰ ثانیه‌ای یاد شده مطلوب و استاندارد تلقی می‌شود. اما همیشه نمی‌توان به این میزان از حجم دست یافت. به منظور کاهش حجم بارگذاری اولیه می‌توان راهکارهای زیر را مورد استفاده قرار داد:
- کاهش تعداد پست‌ها و قسمت‌های گوناگون موجود در صفحه
- به نمایش در آوردن خلاصه و چکیده متن به جای متن کامل در صفحه اصلی
- استفاده از چند صفحه برای بارگذاری پست‌های طولانی
- آپلود ثانویه قسمت‌هایی چون "بخش نظرات" بنا به درخواست کاربران
زمان اجرای جاوا اسکریپت را محدود کنید
از آغاز روند طراحی سایت باید به محدود کردن‌ندت زمان اجرای کدهای جاوا اسکریپت دقت شود. در غیر این صورت مدت زمان آماده سازی صفحه جهت تعامل با کاربران طولانی خواهد شد. در نتیجه با طولانی شدن زمان اجرا، سرور متحمل فشار بیشتری می‌شود و هزینه‌های نگهداری از سایت در صورت پر بازدید بودن آن افزایش می‌یابد. در این زمینه استفاده از راهکارهای زیر لازم الاجرا است:
- کدهای اضافی را حذف نمایید
- به کش کردن کدها توجه کنید
- فشرده سازی کدها را در اولویت قرار دهید
- از ترفند code-split برای اجرای انحصاری کدهای مورد نیاز کاربر بهره بگیرید.
کلام پایانی
گزارش Google Lighthouse در بهینه سازی بخش‌های مختلف سایت موثر است. توصیه‌ها و قابلیت‌های این ابزار ارائه شده از جانب گوگل باعث می‌شود بتوانید به شیوه بهتر و با دقت بیشتر ابعاد گوناگون وب سایت را رصد کرده و در صورت بروز ایرادات کیفی و فنی، سریعتر به رفع مشکلات بپردازید تا از خسارت‌های احتمالی و افزایش هزینه‌ها جلوگیری شود.
استفاده از فایل‌ها و افزونه‌های مناسب و توجه به نکاتی که در خلال مطلب ارائه شده یادآوری شدند، همگی در بهبود شرایط سایت و ارتقای سطح کیفی آن اعمال اثر میکنند. توجه داشته باشید که انجام هر گونه فعالیت و ایجاد هر نوع تغییر برای بهینه سازی سایت باید بعد از دریافت نسخه پشتیبان صورت گیرد. در استفاده از راهکارهای تخصصی بهینه سازی سایت نیز بهتر است از تجربه و مهارت طراحانی که در این زمینه فعالیت دارند کمک بگیرید تا خروجی کار با استانداردهای معین مغایر نباشد.
