آموزش بهبود سرعت speed index یا SI در جی تی متریکس

یکی دیگر از معیارهای مهمی که در GTmetrix وجود دارد، Speed Index یا SI است. در گذشته برای بررسی تجربه کاربری سایت (UX) از شاخص‌های کلی مثل سرعت بارگذاری کل صفحه استفاده می‌کردند. اما از آنجایی که این شاخص‌ها برای بررسی تجربه کاربری کافی نبودند، شاخص‌های دیگری مثل FCP، LCP، CLS، TTI، SI و TBT معرفی شدند. در مقالات گذشته همه این موارد را به جز SI به طور کامل بررسی کرده‌ایم که توصیه می‌کنیم حتما آن‌ها را مطالعه کنید. در حالت کلی، Speed Index مدت زمان لود قسمت بالای صفحه یا همان above the fold را نشان می‌دهد. هر چقدر مدت زمان SI کمتر باشد، کاربران خیلی سریع محتوای بالای صفحه را مشاهده می‌کنند. در نتیجه تجربه کاربری خوبی را به دست می‌آورند. در ادامه همراه ما باشید تا این شاخص را به طور کامل بررسی کرده و روش‌های بهبود آن را با شما به اشتراک بگذاریم.

نکته مهم: Speed Index جزو معیارهای Core Web Vitals نیست. این معیار در سال 2012 توسط WebPageTest معرفی شد. با این حال بهبود آن نقش بسیار مهمی در تجربه کاربری و سئو سایت دارد. بنابراین توصیه می‌کنیم موارد مطرح شده را به طور کامل مطالعه کرده و در سایت پیاده کنید.

برای اینکه با این شاخص به طور دقیق آشنا شوید، ابتدا باید مفهوم above the fold را به طور کامل توضیح دهیم.

above the fold یا قسمت بالای صفحه چیست؟

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

Speed Index یا SI چیست؟

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

معیارهای قبلی مثل LCP یا FCP مدت زمانی را نشان می‌دادند که بزرگترین محتوا یا اولین محتوا به کاربر نشان داده می‌شد. اما این معیار مدت زمان لود کامل بخش بالای صفحه را اندازه‌گیری می‌کند.

در واقع، Lighthouse از همه مراحل بارگذاری سایت فیلم گرفته و سپس تفاوت بین تمامی فریم‌ها را محاسبه می‌کند. سپس با استفاده از ماژول Speedline Node.js امتیاز نهایی SI را به دست می‌آورد. اگر می‌خواهید در این زمینه اطلاعات بیشتری به دست آورید، به صفحه این ماژول در گیت هاب مراجعه کنید.

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

شاخص SI چه تاثیری در عملکرد سایت دارد؟

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

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

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

بهترین زمان برای Speed Index چقدر است؟

برای اینکه کاربران تجربه خوبی را به دست آورند، بهتر است مدت زمان SI کمتر از 3.4 ثانیه باشد.

• Green (Good): اگر مدت زمان بین 0 الی 3.4 ثانیه باشد، نیاز نیست کاری انجام دهید.
• Orange (Moderate): در صورتی که مدت زمان SI بین 3.4 الی 5.8 ثانیه باشد، باید یک سری بهبودهایی را در سایت انجام دهید.
• Red (Slow): اگر مدت زمان Speed Index بیشتر از 5.8 ثانیه بود، نمره ضعیفی را دریافت می‌کنید و باید بهینه‌سازی‌های بیشتری را بر روی سایت اعمال نمایید.

چطور مدت زمان SI را به دست آوریم؟

حال که با مفهوم Speed Index آشنا شدید، نوبت آن رسیده تا مدت زمان آن را محاسبه کنید. برای اینکار ابزارهای مختلفی وجود دارد که از بهترین آن‌ها می‌توان به GTmetrix، PageSpeed Insight وWebPageTest اشاره کرد. همه این ابزارها گزارش دقیقی را از عملکرد سایت، سئو و تجربه کاربری در اختیارتان قرار می‌دهند.

لازم به ذکر است، ما در مقاله جداگانه‌ای با عنوان «GTmetrix چیست؟ آموزش تست سرعت سایت با جی تی متریکس» نحوه کار کردن با جی تی متریکس را توضیح داده‌ایم که توصیه می‌کنیم حتما آن را مطالعه کنید.

• استفاده از Pagespeed Insight برای اندازه‌گیری سرعت Speed Index

• استفاده از GTmetrix برای بررسی سرعت SI

Lighthouse چطور سرعت SI را اندازه‌گیری می‌کند؟

Lighthouse با استفاده از داده‌هایی که از وب‌سایت‌های واقعی به دست آورده، امتیازی را برای هر یک از معیارها در نظر می‌گیرد. سپس این امتیاز را با امتیاز سایت شما مقایسه کرده و نشان می‌دهد که سایتتان در چه وضعیتی قرار دارد. با توجه به اهمیت هر یک از معیارها در تجربه کاربری، سئو و عملکرد سایت، امتیازهایی را برای هر کدام در نظر گرفته است که در جدول زیر آن‌ها را مشاهده می‌کنید.

معیار	درصد تاثیرگذاری
First Contentful Paint	10 درصد
Speed Index	10 درصد
Largest Contentful Paint	25 درصد
Total Blocking Time	30 درصد
Cumulative Layout Shift	25 درصد

بهتر است بدانید این درصدها بر اساس Lighthouse نسخه 10 است. در این نسخه، شاخص Time to Interactive حذف شده و امتیاز آن به Cumulative Layout Shift منتقل شده است.

Speed Index چه تفاوتی با First Contentful Paint دارد؟

اگر با معیارهای Core Web Vitals آشنا باشید، احتمالا با این سوال مواجه شده‌اید که Speed Index چه تفاوتی با FCP دارد؟ با اینکه هر دو این‌ها یک معیار بصری به شمار می‌روند، اما تفاوت‌هایی با یکدیگر دارند. FCP مدت زمانی را نشان می‌دهد که اولین محتوای صفحه به کاربر نشان داده می‌شود. اما SI زمانی را نشان می‌دهد که محتوای بالای صفحه به طور کامل لود شود. بنابراین هر چیزی که باعث بهبود سرعت FCP می‌شود، بر روی سرعت SI نیز تاثیر خواهد گذاشت. به همین دلیل توصیه می‌کنیم «بهبود عملکرد وبسایت، آموزش افزایش سرعت FCP با Gtmetrix» را مطالعه کرده و تکنیک‌های آن را اجرا کنید.

در تصویر زیر می‌توانید با تفاوت این دو معیار به طور دقیق آشنا شوید.

بررسی تفاوت‌ SI با Cumulative Layout Shift

CLS یکی از معیارهای مهم در web vitals است که میزان تغییرات ناگهانی المان‌های صفحه را اندازه‌گیری می‌کند. هر چقدر تغییرات ناگهانی صفحه کم باشد، کاربران تجربه خوبی را به دست می‌آورند. بنابراین بهبود امتیاز CLS در افزایش سرعت SI نیز تاثیرگذار است. برای آشنایی بیشتر با این معیار و بهبود آن، توصیه می‌کنیم نوشته «CLS در GTmetrix چیست؟ آموزش بهبود سرعت (CLS) » را در وب آنجل مطالعه کنید.

بهبود سرعت SI چه تاثیری در افزایش مشتریان و مخاطبان سایت دارد؟

با مطالعه موارد مطرح شده در بالا متوجه شدیم که Speed Index نقش بسیار مهمی در سایت دارد. در ادامه قصد داریم به 4 فایده مهم این معیار در بازاریابی و افزایش مشتریان سایت اشاره کنیم.

1. کاهش نرخ پرش (Bounce Rate)

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

حال برای اینکه تا حد زیادی از این مساله جلوگیری کنیم، باید سرعت بارگذاری کامل محتوای بالای صفحه یا همان Speed Index را به حداقل برسانیم. البته در کنار اینکار باید سرعت بارگذاری اولین محتوا یا همان FCP را نیز کاهش دهیم. با انجام اینکارها، کاربر به محض ورود به سایت، محتوای آن را مشاهده کرده و صفحه را ترک نمی‌کند.

2. افزایش مدت زمان ماندن کاربران در سایت (time to spend on page)

دومین فایده کاهش مدت زمان Speed Index این است که کاربران دوست دارند مدت زمان زیادی را در سایت سپری کنند. شاید با خودتان فکر کنید Time To Spend on Page چه فایده‌ای دارد؟ اگر با یک فیلم کسل کننده و بی‌محتوا مواجه شوید، چه می‌کنید؟ آیا تا آخر آن را تماشا می‌کنید؟ در مورد یک فیلم جذاب و با کیفیت چه نظری دارید؟

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

3. افزایش نرخ تعامل (Conversion rate)

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

4. بهبود سئو سایت

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

چه چیزهایی بر روی سرعت Speed Index تاثیر می‌گذارند؟

اگر می‌خواهید بدانید چه عواملی باعث افزایش سرعت SI شده‌اند، می‌توانید از ابزارهای PageSpeed Insights یا GTmetrix کمک بگیرید. اما در حالت کلی، 4 عامل در افزایش سرعت این فاکتور تاثیرگذار هستند که عبارتند از:

1. وجود کدهای جاوا اسکریپت اضافی و استفاده نشده در سایت (JavaScript code and unused JS)
2. زمان اجرای کدهای جاوا اسکریپت (JavaScript Execution time)
3. بیشتر شدن مدت زمان تحلیل کدها در Main Thread
4. وجود کدهای شخص ثالث (Third-party code)

اگر از Pagespeed Insights برای بررسی سرعت سایت استفاده کرده‌اید، می‌توانید در بخش‌های opportunities و diagnostics با عواملی که مدت زمان SI را افزایش می‌دهند، آشنا شوید. در ابزار جی تی متریکس نیز در تب Structure همه این موارد را مشاهده خواهید کرد.

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

آموزش بهبود سرعت Speed Index

در این بخش از آموزش کاهش سرعت SI به بررسی روش‌های بهبود سرعت این فاکتور خواهیم پرداخت. اما قبل از آن اجازه دهید دو مفهوم Main Thread و Third-Part code را کمی بررسی کنیم.

Main Thread چیست؟

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

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

<img src=”seorooz.jpg” alt=”سئوروز” width=”500″ height=”600″>

هنگامی که مرورگر شروع به تفسیر کدها می‌کند، اگر با یک کد سنگین مواجه شود، تا زمانی که تجزیه آن به اتمام نرسد، هیچ چیزی در صفحه نمایش مشاهده نخواهید کرد. یعنی Main Thread مرورگر مسدود شده است. از آنجایی که مرورگر کدها را به صورت خطی تفسیر می‌کند، این مشکل به وجود می‌آید. یعنی بعد از اینکه خط 1 را تفسیر کرد، به سراغ خط 2 و سپس 3 و… می‌رود. حال اگر این وسط به یک کد سنگین برخورد کند، همه چیز متوقف خواهد شد.

 در اکثر مواقع فایل‌های JS و CSS باعث مسدود شدن Main Thread مرورگر می‌شوند. بنابراین برای اینکه المان‌های صفحه خیلی سریع‌تر برای کاربر به نمایش دربیایند، باید این فایل‌ها را مدیریت کنید. در صورتی که این مشکل در سایت وجود داشته باشد، در ابزارهای تحلیل سایت با خطای Minimize main-thread work مواجه خواهید شد. برای حل این مساله راه‌حل‌های زیادی وجود دارد که یکی از آن‌ها به تاخیر انداختن لود فایل‌های جاوا اسکریپت است که در ادامه به طور کامل آن را بررسی خواهیم کرد.

Third-Part code چیست؟

در حالت عادی فایل‌های JS یا CSS از سرور سایت خودتان دانلود و تجزیه و تحلیل می‌شود. اما گاهی مواقع به دلایل مختلفی، این فایل‌ها را از سایت‌های دیگر دانلود می‌کنیم. از جمله این موارد می‌توان به کدهای گوگل آنالیتیکس، تبلیغات، دکمه‌های اشتراک گذاری در شبکه‌های اجتماعی، کدهای مربوط به CDN، ویجت چت، کدهای embed و کدهای اینماد اشاره کرد.

اگر این کدها بهینه نباشند، می‌توانند سرعت سایت را کاهش داده و باعث مسدود شدن Main Thread شوند. همچنین برخی از این اسکریپت‌ها از لحاظ امنیتی نیز مشکل دارند. بنابراین باید نهایت دقت را در استفاده از این کدها به کار ببرید.

در ادامه یاد می‌گیرید چطور سرعت SI را کاهش داده و آن را به حداقل برسانید.

1. لود فایل‌های JS را به تعویق بیندازید (Defer JS)

اولین کاری که برای کاهش سرعت Speed Index می‌توانید انجام دهید، به تعویق انداختن لود فایل‌های جاوا اسکریپت است. یعنی کاری می‌کنید تا مرورگر بعد از تجزیه و تحلیل همه کدها، فایل‌های جاوا اسکریپت را بررسی کند. با اینکار فایل‌های JS باعث مسدودی Main Thread نخواهند شد و محتواهای سایت در مدت زمان کوتاهی به کاربران نمایش داده می‌شود.

از آنجایی که ما قصد داریم سرعت SI را کاهش دهیم، باید فایل‌های JS غیرضروری در بخش بالای صفحه (above the fold) را به تعویق انداخته و در پایین صفحه لود کنیم.

خطای گزارش شده توسط Lighthouse: اگر فایل‌های JS را به تعویق نیندازید، با خطاهای «Eliminate render-blocking resources»، «Remove unused JavaScript» و «Avoid chaining critical requests» مواجه خواهید شد.

به تعویق انداختن لود فایل‌های جاوا اسکریپت به صورت دستی

اگر می‌خواهید به صورت دستی و با استفاده از کد، فایل‌های JS را به تعویق بیندازید، باید از ویژگی defer در تگ script استفاده کنید. در این حالت، فایل‌های جاوا اسکریپت همزمان با سایر فایل‌ها دانلود شده و تا زمانی که تجزیه کدهای HTML تمام نشود، کدهای جاوا اسکریپت تفسیر نمی‌شوند. در زیر می‌توانید نمونه کد آن را مشاهده کنید.

<script src=”library.js” defer></script>

به تعویق انداختن لود فایل‌های جاوا اسکریپت با استفاده از افزونه‌

اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید، کارتان خیلی راحت است. چرا که تنها با نصب یکی از افزونه‌های Asset CleanUp، WP Rocket، Speed Booster Pack یا Async JS می‌توانید اینکار را خیلی سریع انجام دهید. به طور مثال در افزونه wp rocket کافی است به بخش بهینه‌سازی فایل رفته و تیک تاخیر اجرای جاوا اسکریپت (Load JavaScript deferred) را فعال کنید.

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

2. حذف کدها و فایل‌های استفاده نشده جاوا اسکریپت

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

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

خطای گزارش شده توسط Lighthouse: اگر کدهای اضافی جاوا اسکریپت در سایت وجود داشته باشد، با خطاهای «Reduce unused JS» و «Avoid chaining critical requests» مواجه خواهید شد.

تاخیر در اجرای کدهای جاوا اسکریپت به صورت دستی

برای ایجاد تاخیر در اجرای کدهای جاوا اسکریپت، می‌توانید از کد () setTimeout استفاده کنید. با این تابع، کدها بعد از زمانی که شما تعیین کردید اجرا می‌شود. به طور مثال اگر زمان را بر روی 500 میلی‌ثانیه قرار داده باشید، کدها تا قبل از این زمان اجرا نخواهند شد. برای مطالعه بیشتر به سایت w3schools مراجعه کنید.

نکته مهم: از آنجایی که Lighthouse فایل‌های بیشتر از 20 کیلوبایت را به عنوان کد استفاده نشده علامت‌گذاری می‌کند، پیدا کردن و تغییر کدها به صورت دستی کار مشکلی است.

تاخیر در اجرای کدهای جاوا اسکریپت با کمک افزونه

در صورتی که سیستم مدیریت محتوای شما وردپرس است، از افزونه‌های زیر استفاده کنید.

• Flying Scripts: با کمک این افزونه می‌توانید فایل‌های JS را به تاخیر انداخته و فقط فایل‌های حیاتی و ضروری را لود کنید.
• Wp Meteor: این افزونه کمک می‌کند تا فایل‌های JS را به تاخیر بیندازید. همچنین در افزایش سرعت سایت نیز موثر است.
• Gonzales: با این افزونه می‌توانید فایل‌های JS و CSS را به صورت مشروط غیرفعال کنید.
• Perfmatters: این پلاگین با غیرفعال کردن موارد غیرضروری، به افزایش سرعت سایت کمک می‌کند.

• Plugin Organizer: ترتیب و اولویت بارگذاری فایل‌ها را تغییر می‌دهد.
• Asset CleanUp: به شما اجازه می‌دهد تا بارگذاری فایل‌های غیر ضروری CSS و JS را متوقف کنید.
• Wp Rocket: با کمک این افزونه می‌توانید اجرای کدهای JS را فقط با یک کلیک به تاخیر بیندازید. برای اینکار کافی است در بخش بهینه‌سازی فایل، گزینه تاخیر اجرای جاوا اسکریپت (Delay JavaScript execution) را فعال کنید. در بخش مشخص شده نیز می‌توانید کدهای مستثنی شده را قرار دهید.

3. فشرده کردن فایل‌های JS و CSS

قدم بعدی برای بهبود سرعت Speed Index، فشرده کردن و حذف کاراکترهای غیرضروری از این فایل‌ها است. با کاهش حجم، زمان تجزیه و تحلیل کدها در Main Thread نیز به طور قابل توجهی کاهش پیدا می‌کند. همچنین دانلود آن‌ها نیز در مدت کوتاهی اتفاق می‌افتد. بنابراین سرعت SI به طور قابل ملاحظه‌ای بهبود خواهد یافت.

خطای گزارش شده توسط Lighthouse: اگر حجم فایل‌های CSS/JS بیشتر باشد، با خطاهای «Reduce JavaScript Execution Time»، «Minimize main thread work» و «Minify JS and Minify CSS» مواجه خواهید شد.

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

کاهش حجم فایل‌های JS/CSS به صورت دستی

• ابتدا یک برنامه ادیت متن مثل Sublime یا Visual Studio Code نصب کنید.
• سپس فایل مورد نظر با یکی از این برنامه‌ها باز نمایید.
• همه فاصله‌ها، کامنت‌های غیرضروری، تو رفتگی‌ها و هر چیز غیرضروری را از کدها حذف کنید.
• همچنین در صورت امکان، ID و نام کلاس‌ها را نیز کوتاه کنید.
• در نهایت فایل را ذخیره کنید.

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

کاهش حجم فایل‌های JS/CSS به کمک افزونه‌ها

با کمک افزونه‌هایی که در ادامه معرفی خواهیم کرد می‌توانید با یک کلیک، حجم فایل‌های JS/CSS را کاهش دهید.

• Closure Compiler
• UglifyJS
• Autoptimize
• YUI Compressor Tool
• WP Super Minify
• CSS Nano
• CSSO
• UNCSS
• Wp rocket

در افزونه wp rocket کافی است به بخش بهینه‌سازی فایل رفته و تیک گزینه‌های فشرده‌سازی فایل‌های CSS (Minify CSS files) و فشرده‌سازی فایل‌های جاوا اسکریپت (Minify JavaScript files) را بزنید.

4. بهینه‌سازی فایل‌های CSS

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

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

خطای گزارش شده توسط Lighthouse: در صورتی که فایل‌های CSS سایت بهینه نباشد، با خطاهای «Reduce unused CSS» و «Eliminate render-blocking CSS» مواجه می‌شوید.

بهینه‌سازی فایل‌های CSS به صورت دستی

• فایل‌های CSS را فشرده کرده و با یکدیگر ترکیب کنید. بهتر است کدهای ضروری را در یک فایل قرار داده و بقیه کدها را در یک فایل جداگانه قرار دهید. در این حالت اولا تعداد درخواست‌های http کاهش پیدا می‌کند. در ثانی، ابتدا فقط فایل‌های ضروری را بارگذاری می‌کنید تا Main Thread بیش از اندازه مسدود نشود.
• سعی کنید در ابتدا فقط فایل‌های CSS ضروری بخش بالای صفحه را لود کنید.

بهینه‌سازی فایل‌های CSS با استفاده از افزونه‌ها

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

• Autoptimize
• SpeedUp
• Wp Rocket

در افزونه wp rocket با رفتن به بخش بهینه‌سازی فایل و فعال کردن تیک گزینه‌های فشرده‌سازی فایل‌های CSS، ادغام فایل‌های CSS و بهینه‌سازی تحویل CSS اینکار به سادگی انجام خواهد شد.

5. بهینه‌سازی تصاویر سایت و ویژگی Lazy Load

کم کردن حجم تصاویر و استفاده از قابلیت Lazy Load باعث می‌شود تا سرعت و عملکرد سایت به شدت افزایش پیدا کند. برای کم کردن حجم تصاویر ابزارهای زیادی وجود دارد که بدون کاهش کیفیت، حجم آن‌ها را کم می‌کند. اگر در گوگل عبارت Compress image را جستجو کنید، ابزارهای زیادی را پیدا خواهید کرد. بنابراین اگر می‌خواهید سرعت Speed Index یا SI کاهش پیدا کند، حتما باید از تصاویری با حجم پایین استفاده کنید و هم قابلیت lazy Load در سایت فعال باشد.

خطای گزارش شده توسط Lighthouse: در صورتی که تصاویر سایت بهینه نباشد، با خطاهای «Properly size images»، «Efficiently encode images»، «Serve Images in next-gen formats» و «Defer offscreen images» مواجه خواهید شد.

نکته مهم: برای اینکه حجم تصاویر کاهش پیدا کند، یکی از بهترین راه‌ها استفاده از فرمت webp به جای jpeg یا png است. همچنین سعی کنید از تصاویری با سایز مناسب استفاده کنید. به طور مثال اگر حداکثر اندازه برای یک تصویر 1000 پیکسل است، هرگز از تصاویری با سایر بزرگ مثل 3000 پیکسل برای آن استفاده نکنید.

اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید، افزونه‌های imagify، Imsanity و EWWW Image Optimizer به صورت اتوماتیک تصاویر را بهینه می‌کنند. برای فعالسازی ویژگی Lazy Load نیز می‌توانید از افزونه رایگان lazy load wp rocket استفاده کنید. البته در افزونه wp rocket نیز این قابلیت وجود دارد.

نکته مهم: دقت داشته باشید برای تصاویر بالای صفحه (above the fold) مثل لوگو از lazy load استفاده نکنید. چرا که اینکار باعث کاهش امتیاز LCP و FCP شده و در نتیجه تجربه کاربری بدی را ایجاد می‌کند. اگر از افزونه wp rocket استفاده می‌کنید، کافی است اسم عکس، آیدی یا آدرس آن را در قسمت مشخص شده در تصویر وارد کنید تا از حالت lazy load خارج شود.

6. فشرده کردن فایل‌های وب‌سایت

برای کاهش سرعت Speed Index علاوه بر کارهایی که در بالا گفتیم، باید حجم سایر فایل‌های سایت را نیز به حداقل برسانید. چرا که هر چقدر حجم فایل‌ها کم باشد، تجزیه و تحلیل و رندر آن‌ها توسط مرورگر در مدت کوتاهی اتفاق می‌افتد. برای اینکار کافی است قابلیت Gzip را در سایت فعال کنید. البته در اکثر هاستینگ‌ها به صورت پیش‌فرض فعال است و لازم نیست کاری انجام دهید. اما اگر غیرفعال بود، باید از هاستینگ بخواهید آن را فعال کند. برای تست فعال بودن این قابلیت می‌توانید از سایت giftofspeed.com/gzip-test کمک بگیرید.

همچنین با استفاده از افزونه‌های wp rocket و Gzip compression Plugin نیز امکان فعالسازی این قابلیت وجود دارد.

7. استفاده از شبکه تحویل محتوا یا CDN برای کاهش سرعت Speed Index

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

CDNهای مختلفی در ایران و جهان وجود دارد که می‌توانید از آن‌ها استفاده کنید. در حال حاضر Cloudflare یکی از بهترین‌ها به شمار می‌رود.

8. پیش بارگذاری فونت‌های سایت (Preload Fonts)

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

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

• FOUT: متن بدون فونت سفارشی و با فونت پیش‌فرض مرورگر به کاربر نشان داده می‌شود. با اینکه در این روش متن با سرعت بالایی لود می‌شود ولی اعمال فونت سفارشی مدت زیادی طول خواهد کشید و تا آن زمان، متن ظاهر جذابی نخواهد داشت.
• FOIT: اما در این حالت، متن تا زمان دانلود فونت سفارشی نمایش داده نمی‌شود. یعنی اگر دانلود فونت تاخیر داشته باشد، کاربر هیچ متنی را در صفحه نخواهد دید. این مساله نیز باعث بالا بردن سرعت SI می‌شود.

برای اینکه با هیچکدام از این موارد مواجه نشویم، توصیه می‌کنیم فونت‌های مهم و ضروری را زودتر از بقیه دانلود کنید.

خطای گزارش شده توسط Lighthouse: در صورتی که از روش پیش بارگذاری فونت استفاده نکنید، با خطاهای «Preload key requests» و «Ensure text remains visible during webfont load» مواجه خواهید شد.

استفاده از کد برای پیش بارگذاری فونت‌ها

برای استفاده از این ویژگی کافی است خاصیت rel=”preload” را به تگ بارگذاری فونت اضافه کنید.

<link rel=”preload” as=”font” href=”/fonts/custom-font.woff” type=”font/woff2″ crossorigin=”anonymous”>

استفاده از افزونه برای پیش بارگذاری فونت‌ها

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

نکته مهم: از خاصیت Preload می‌توانید برای دانلود و بارگذاری تصاویر، فایل‌های جاوا اسکریپت، فایل‌های CSS و هر چیز دیگری استفاده کنید.

9. بارگذاری فایل‌های جاوا اسکریپت Third-part به تعویق بیندازید

همانطور که در بالا نیز اشاره کردیم، اگر فایل‌های Third-Part را مدیریت نکنید، تاثیر بسیار بدی در سرعت سایت خواهند داشت. یکی از بهترین راه‌ها برای مدیریت آن‌ها، استفاده از خاصیت defer است. با اینکار، حتی اگر دانلود آن‌ها مدت زیادی طول بکشد، باعث افزایش سرعت Speed Index نخواهد شد.

10. بهبود زیرساخت سرور برای کاهش سرعت SI

عامل مهم بعدی که در کاهش سرعت Speed Index موثر است، بهبود زیرساخت‌های سرور است. در واقع هر چقدر سرعت سرور زیاد باشد و بتواند درخواست‌ها را بهتر مدیریت کند، به مراتب سرعت بارگذاری سایت نیز بیشتر خواهد شد. از جمله کارهایی که برای بهبود زیر ساخت سرور می‌توانید انجام دهید می‌توان به موارد زیر اشاره کرد.

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

آیا تنها با کاهش سرعت Speed Index می‌توان امتیاز سایر معیارها را نیز بهتر کرد؟

برای اینکه عملکرد سایت را بهتر کنید، باید کارهای زیادی را انجام دهید. بنابراین تنها با کاهش سرعت SI نمی‌توان به نتیجه دلخواه دست پیدا کرد و باید سایر فاکتورها (TTFB, FID, LCP, FCP) را نیز به صورت دقیق بررسی کنید. در واقع می‌توان گفت هر یک از شاخص‌های Lighthouse به صورت جداگانه بر عملکرد سایت تاثیر می‌گذارند و فقط بهبود یکی از آن‌ها کافی نیست.

با این حال بهتر است بدانید هر یک از این معیارها به یکدیگر مرتبط هستند و بهبود یکی می‌تواند بر روی دیگری نیز تاثیر بگذارد. به طور مثال اگر مدت زمان بارگذاری بزرگترین محتوا (LCP) طول بکشد، سرعت Speed Index نیز افزایش پیدا خواهد کرد.

---

جمع‌ بندی

بهینه‌ سازی سرعت Speed Index به بازدید کنندگان سایت کمک می‌کند تا محتوا را در سریع‌ ترین زمان مشاهده کرده و بیشتر از حد معمول منتظر نمانند. بنابراین با استفاده از روش‌هایی که در بالا گفتیم، سعی کنید سرعت SI را تا جای ممکن کاهش داده و آن را به حداقل برسانید. البته در کنار این فاکتور باید سایر فاکتورها مثل FCP و LCP را نیز بهتر کنید.

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