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

14 71

چگونه می توان سرعت سایت را به بهترین شکل ممکن در امتیاز 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 را فشرده کنند و لینک آن را به فوتر انتقال دهند.

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

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

14 نظرات
  1. بختیاری می گوید

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

  2. مهدی می گوید

    با سلام،
    عکس های این مطلب لود نمیشه، لطفاً رسیدگی فرمایید.
    با تشکر

    1. صادق رشیدیان می گوید

      سلام و درود

      اصلاح شد. ممنون از گزارش تون

      با تشکر

  3. سید امیرمحمد اخوت می گوید

    با سلام و عرض ادب

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

  4. سید امیرمحمد اخوت می گوید

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

    1. صادق رشیدیان می گوید

      سلام و درود

      بعضی از تنظیمات رو در افزونه غیر فعال کنید و مجددا چک کنید

  5. سید امیرمحمد اخوت می گوید

    با سلام

    من از وقتی کد رو وارد هاست کردم و یا از افزونه shortpixel استفاده کردم سایت خراب شده کد رو ورداشتم و افزونرو پاک کردم ولی درست نشد ساتم این هست programbace.com

    1. صادق رشیدیان می گوید

      سلام و درود

      افزونه را غیر فعال کنید و ببینید درست شده یا نه؟

      اگر مشکل همچنان پابرجا بود کد رو بردارید و افزونه فعال باشه

  6. فرید می گوید

    سلام
    خسته نباشید

    توی جی تی متریکس برای من این ارور رو میده
    There are 2893 DOM elements on the page

    لطفا توی آموزش نحوه برطرف کردن این مشکل رو بیشتر توضیح بدید

    1. صادق رشیدیان می گوید

      سلام و درود

      ممنون

      حتما در آموزش به توضیحات بیشتری روی این موضوع خواهیم پرداخت

      با تشکر

  7. میثم کیانی می گوید

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

    https://gtmetrix.com/reports/bonianservice.com/zqapiWVH

    نسخه دسکتاپ سرعتش ۹۲ هستش ولی نسخه موبایل ۶۷ هست
    خواستم بدونم راهی هست بشه سرعتش بیشتر بشه؟
    با تشکر

    1. صادق رشیدیان می گوید

      سلام و درود

      این راه بیشتر برای ابزارهایی مثل gtmetrix هست و بعضی از موارد در گوگل اسپید نیاز به آموزش اختصاصی داره که سعی می کنیم بزودی به گوگل اسپید اختصاصی بپردازیم

  8. سید امیرمحمد اخوت می گوید

    با سلام و عرض ادب

    احتراما من باید چیکار کنم که وقتی CDN رو میزارم سایت خراب نشه و امتیاز رو بگیرم چون وقتی CDN رو میزارم امتیاز داخل Grmetrix فول میشه ولی سایت خراب میشه لطفا توضیح بدین

    با تشکر فراوان

    1. صادق رشیدیان می گوید

      سلام و درود

      از چه cdn استفاده می کنید از cdn هایی مثل ارون کلود و کلود فایر استفاده کنید.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.