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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بهینه سازی تصاویر که یک مهارت محسوب می شود و می تواند به دو صورت دستی و یا افزونه انجام شود. در روش دستی، شما باید با استفاده از ابزار فتوشاپ تصویر را به نحوی بهینه کنید که کیفیت آن افت نکند. همیشه باید بین حجم و کیفیت تصاویر تعادل را حفظ کنیم؛ اگر تصاویر بیش از اندازه بهینه سازی شوند ممکن است برای ابزار هایی مانند 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 را فشرده کنند و لینک آن را به فوتر انتقال دهند.

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

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

همانطور که در تصویر بالا می بینید من (emojis و jquery migrate) را غیرفعال کردم زیرا واقعا برای سایت لازم و ضروری نیست و تمام این ها را می توانید با یک افزونه بهینه سازی مانند لایت اسپید انجام دهید. (توجه کنید اگر با غیر فعال کردن این گزینه ها وبسایتتان دچار مشکل شد، تمام تیک ها را به ترتیب بردارید تا ببینید مشکل از کجاست و گزینه ای که باعث بهم ریختگی شده را غیرفعال کنید.)