آموزش دریافت امتیاز ۱۰۰ در Gtmetrix , google page speed و pingdom

چگونه میتوان سرعت سایت را به بهترین شکل ممکن در امتیاز Gtmetrix و دیگر ابزارها رساند ؟

این سوال امروزه برای کسانی که وبسایتشان سرعت رضایت بخشی ندارد پیش می آید. شاید برای شما هم این سوال پیش آمده باشد که چطور سرعت وبسایت خود را به بهترین و مطلوب ترین حالت ممکن برسانید. ما امروز جواب این سوال را به شما میدهیم 🙂

این مقاله به شما آموزش میدهد چگونه فاکتور های امتیاز Gtmetrix و Google page speed را عملی کرده و آنها را به ۱۰۰ برسانید. ما در این مقاله با قالب Enfold به بررسی فاکتور ها و رفع مشکلات Gtmetrix میپردازیم. همراه ما باشید.

در ابتدا از این عنوان زیبا و دلنشین فریب نخورید؛ چون ممکن است قالب انتخابی شما نتواند به ۱۰۰ برسد اما میتوان آن را به بهترین شکل ممکن رساند و سرعت وبسایت را به زیر ۳ ثانیه برسانید (شاید قالب امکان حتی رسیدن به زیر ۱ ثانیه را هم داشته باشد). به طور کلی این مقاله به شما توصیه های بسیار خوبی می کند اما شما وظیفه دارید که تشخیص دهید چه زمانی آنها را انحام دهید و چه زمانی از آن ها چشم پوشی کنید.


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

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

ما در این آزمون و خطا از قالب Enfold استفاده کردیم ۱۲ مرحله را طی و تقریبا ۱۰۰۰ بار بررسی سرعت داشتیم، نتیجه ای که ما به آن رسیدیم این است که یک عدد اغلب ارزشمند نیست و ممکن است بازتاب خوبی نداشته باشد. (برای مثال بهینه کردن بیش از حد تصاویر برای افزایش سرعت کاهش کیفیت را همراه دارد، یا استفاده نکردن از جاوا اسکریپت و css و…)

بنابراین ما چه کار هایی برای افزایش سرعت و صد کردن Gtmetrix میخواهیم انجام دهبم:

  1. ما یک وبسایت جدید راه اندازی خواهیم کرد و قالب Enfold را فعال میکنیم.
  2. دموی قالب Enfold را فعال خواهیم کرد. (دارای اسلایدر ، تصاویر ، محتوا و … زیادی است)
  3. در نهایت آن را باهم بهینه سازی میکنیم تا در تمام ابزار ها به امتیاز ۱۰۰ از ۱۰۰ برسیم
  4. و به شما خواهیم گفت که کدام یک از بخش ها ارزش وقت گذاشتن را ندارد.

۱٫) نصب قالب خودتان:

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

 

بسیاری از مواردی که ما اینجا برای بهینه سازی به شما اعلام میکنیم مربوط به محتوا یا سرور است و هیچ ربطی به قالب Enfold ندارد.

اغلب بهینه سازی ها را به صورت خودکار توسط افزونه ها انجام داده ایم.

این تصاویر (screen shots) تصاویره بهینه بود قالب بدون محتوا است.
در مرحله اول به شما توصیه میکنم که ادغام و فشرده سازی فایل های CSS و JS خود را فعال کنید. برای این کار افزونه های متفاوتی مانند litespeed cache یا wp rocket و هزاران مورد دیگر وجود دارد. توجه داشته باشید این امکان به طور پیش فرض در قالب ما قرار دارد و ما از تنظیمات قالب فشرده سازی را انجام داده ایم.

۲٫) قالب داری محتوا:

بعد از درون ریزی محتوای دمو قالب را مجدد بررسی کردیم و نتیجه زیر حاصل شد:

 

همانطور که در تصاویر بالا می بینید سرعت وبسایت در ۲ حالت پایین و امتیاز Gtmetrix در دو نسخه موبایل و دسکتاپ بسیار پایین است. و به این دلیل است که سرعت وبسایت به شدت تحت تاثیر بهینه بودن تصاویر قرار دارد. با توجه به این که ما هیچ کاری برای بهینه سازی انجام نداده ایم اما بسیاری از میله ها (نمودار ها) در Gtmetrix سبز است و این نشان دهنده کیفیت قالب است ( اکثر قالب های Themeforest این امتیازها را برخوردار هستند.) با توجه به حرف هایی که بالا زدیم ابتدا بگذارید یک افزونه (plugin) بهینه سازی تصویر به شما معرفی کنیم.

۳٫) بهینه سازی تصاویر

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

ما یک لیست طولانی از افزونه ها را آزمایش کرده ایم و دریافتیم که Shortpixel و Optimus به بهترین حالت ممکن بهینه سازی را انجام میدهند.

افزونه Optimus با بررسی موقعیت تصاویر در سایت ما آنها را نسبت به مکانشان بهینه میکند و افزونه Shortpixel با قرار دادن گزینه های فراوان در بهینه سازی ما را یاری میکند.

Shortpixel با استفاده از روش فشرده سازی “lossy” تصاویر را به شدت بهینه میکند اما همچنان این روش تاثیر زیادی ندارد. اگر این افزونه متوجه شود که تصاویر سایت بهینه سازی نیاز دارند از روش “Glossy” برای فشرده سازی استفاده می کند. به علاوه برخی تصاویر سایزشان نسبت به مکانی که در آنجا استفاده شده اند کمتر است و از طریق کد ها تغییر سایز داده اند که شما میتوانید انتخاب کنید در همان سایز باشند یا سایزشان از طریق افزونه تغییر داده شود. اگر همچنان در انتخاب افزونه مانده اید یا از افزونه هایی مانند smush برای بهینه سازی استفاده میکنید به بررسی امکانات افزونه ها بپردازید و بهترین را انتخاب کنید.

بهینه سازی تصاویر

 

پس از بررسی ها و برای آزمایش با اسفاده از افزونه Optimus تصاویر سایت دموی خود را بهینه سازی کردیم و بازتاب فوق العاده ای دریافت کردیم و امتیاز Gtmetrix را افزایش دادیم . متاسفانه ممکن است برخی تصاویر به اندازه بزرگ در سایز کوچک با استفاده از کدها در سایت استفاده شوند که شما باید آن را به صورت دستی انجام دهید و به سایز مناسب تغییر دهید. این امکان در افزونه بهینه سازی Optimus وجود ندارد ولی افزونه shortpixel با استفاده از برخی روش ها این کار را به بهترین شکل ممکن برایتان انجام میدهد و در نهایت باعث افزایش سرعت سایت شما می شود. نتایج و بازتاب را بعد از بهینه سازی تصاویر می بینیم 🙂

بهینه سازی تصاویر هر چند بر روی Yslow تاثیر چندانی نگذاشتند اما مشاهده می کنید که نمودار بهینه سازی تصویر با امتیاز ۸۵ سبز شد و این یعنی نزدیک شدن به صد کردن امتیاز Gtmetrix

۴٫)  کش مرورگر یا (leverage browser caching):

مرحله بعدی که ما در این مسیر پیش رو داریم کش مرورگر است که همان رفع خطای کش مرورگر یا leverage browser caching است. این یعنی فایل های استاتیک سایتتان مانند html css js و… را هنگام بادید اول در مرورگر کاربر به صورت کش ذخیر کنید تا کاربر در بازدید بعدی نیازی به بارگذاری مجدد آن فایل ها نداشته باشد. نامی که نمودار به این گزینه داده است Add Expires headers است.

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

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

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

همانطور که می بینید انجام بهینه سازی سرور مهم است و تاثیر خود را بر امتیاز Gtmetrix و سرعت سایت ما می گذارد. (این بهینه سازی وظیفه ماست نه هاستینگ)

۵٫) حذف خطای  render-blocking JavaScript and CSS /Defer parsing of JavaScript

این دو گزینه یا پیام تقریبا یکسان هستند و هنگامی که با این خطا روبرو می شوید یعنی فایل هایی مانند html css js fonts وبسایت شما بهینه نیست و باید بهینه سازی شود و به این معناست که شما باید کد های inline خود را درون یک فایل قرار دهید یا به عبارتی html و css را ادغام کنید تا سرعت لود وبسایت افزایش یابد. این کار به این دلیل است که مرورگر قبل از اینکه سایت را به نماش درآورد باید آن را به طور کامل بارگیری کند وقتی تمام کدها در یک صفحه باشند سرعت لود کاهش میابد و زمان بیشتری نیاز است فایل های css وبسایت شما توسط مرورگر اجرا شود. برخی از پلاگین ها مانند پلاگین Layerslider این امکان را دارند که فایل های css و js را فشرده کنند و لینک آن را به فوتر انتقال دهند.

layerslider

اکنون فایل css و js این پلاگین از فوتر فراخوانی میشود و سرعت لود سایت افزایش میابد.

مسئله دیگری که وجود دارد، فونت های سفارشی است. اگر از یک یا چند فونت گوگل استفاده می کنید؛ این نیز به نمره یا امتیاز شما آسیب می رساند. قالب انفولد اجازه میدهد که خوانده شدن فونت ها را به پایین صفحه یا همان فوتر منتقل کنید این باعث لود سریعتر صفحه وبسایت شما می شود. اما همچنان یک مشکلی وجود دارد، قبل از لود فونت پیشفرض ما سایت را با فونتی به اصطلاح پیش پا افتاده یا پیشفرض بارگذاری می کند.
شخصا من این قابلیت را استفاده نمیکنم چون باور دارم کاربر این را دوست ندارد و کمی آزار دهنده به نظر میرسد ولی اگر هر میلی ثانیه سرعت برایتان مهم است این امکان را فعال کنید.
Eliminate render-blocking JavaScript and CSS in above-the-fold content /Defer parsing of JavaScript
همانطور که در تصویر بالا می بینید من (emojis و jquery migrate)  را غیرفعال کردم زیرا واقعا برای وبسایت ما نیاز نیستند تمام این ها را میتوانید بایک افزونه بهینه سازی مانند لایت اسپید انجام دهید. (توجه کنید اگر با غیر فعال کردن این گزینه ها وبسایتتان به مشکل برخورد تمام تیک ها را به ترتیب بردارید تا ببینید مشکل از کجاست و گزینه ای که باعث بهم ریختگی شده را غیرفعال کنید.)
به بررسی مجدد وبسایت و امتیاز Gtmetrix بپردازیم 🙂

 

۷٫) سه مشکل بزرگ باقی مانده است: استفاده از CDN، از Domains Cookieless استفاده کنید، بسیاری از عناصر DOM یا همان ( Using a CDN, use Cookieless  Domains, too many DOM elements )

  • برای استفاده از CDN بهترین گزینه برای ایرانیان cloudflare است که یک پلن رایگان با امکانات عالی دارد.
  • Cookiless domains : هرچند که این گزینه دیگر زیاد مهم نیست و تاثیر خاصی بر سرعت ما ندارد اما برای این یک مقاله خوب پیدا کردیم اینجا کلیک کنید
  • Reducing Dom Elements: این گزینه یا عناصر DOM به این معنا است که محتوای سایت ما بسیار زیاد است که میتوان با کم کردن محتوا آن را رفع کرد (پیشنهاد نمیکنم). اما ما برایتان انجام دادیم.

yslow-96

این دسترنج ماست اما هنوز ۱۰۰ نشده است 🙂 مشکل کجاست ؟

expires

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

امتیاز 100 از 100 در gtmetrix

این هم دست رنج ما. اگر هرجا سوالی پیش آمد از پرسیدن نترسید ما از هم صحبتی با شما خوشحال میشویم بخش نظرات در اختیار شماست.

واقعا عالی بود.
gtmetrixs غلط یا درست همیشه دغدغه ی طراحان سایت بوده.
متشکرم اقای کلهر