,

آموزش گام به گام ابزار GTMetrix

ابزار GTMetrix

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

ابزار GTMetrix چگونه کار می‌کند؟

پس از واردشده به سایت و وارد شدن به سایت ابزار GTMetrix در نوار مربوطه آدرس سایت خود را وارد کرده و بر روی دکمه “Analyze” کلیک نهایید.

ابزار GTMetrix

ابزار GTMetrix

با این کار ابزار GTMetrix شروع به بررسی و آنالیز سایت شما می‌کند و دقایقی بعد نتیجه را به نمایش می‌گذارد.

ابزار GTMetrix

ابزار GTMetrix

Page Speed Score

در این قسمت میزان بهینه بودن سایت شما بر اساس موارد موجود در منوی زیر، با یک حرف و درصد(۹۳%) مشخص‌شده است.

YSlow Score

در این قسمت  نیز یک درصد (۸۲%) به شما نمایش داده‌شده با این تفاوت که این بار ملاک‌های موجود در بخش YSlow واقع در Breakdown مدنظر قرارگرفته.

Page Load Time

سرعت بارگذاری سایت شمارا برحسب ثانیه نشان می‌دهد. (۷٫۰ S)

Total Page Size

حجم صفحه‌ای از وب‌سایت که برای بررسی وارد کرده‌اید. (۲٫۵۵ MB)

Requests

تعداد درخواست‌هایی که به سرور جهت بارگذاری سایت ارسال می‌شود.(۳۷)

 

بررسی‌های بخش Page Speed

این بخش  از ابزار  GTMetrixحدود ۲۷ فاکتور از سایت را توسط بررسی‌های الگوریتم‌های گوگل نمایش می‌دهد. برخی از مهم‌ترین آن‌ها عبارت‌اند از :

optimizing images

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

ابزار GTMetrix در این بخش میزان بهینه بودن تصاویر شمارا نشان می‌دهد و حتی چند تصویر که باعث کاهش این مورد شده را به کاهش حجم قرار می‌دهد.

ابزار  GTMetrix

optimizing images

راه‌های زیادی برای کاهش حجم تصاویر وجود دارد مانند کم کردن حاشیه‌ها و  padding های سفید در اطراف تصاویر، استفاده از فرمت های تصاویر کم‌حجم، خروجی گرفتن با ابزار Seve For Web  در برنامه فتوشاپ، ذخیره تصاویر در ابعاد کم و مناسب، و استفاده از ابزارها و وب‌سایت‌های کاهش حجم مانند https://tinypng.com/  در جهت کاهش حجم تصاویر شما بسیار کارآمد است.

Enabling Keep-Alive

برای نمایش صفحات وب در مرورگرها باید فایل‌های موردنیاز از یک سرور دریافت شوند. برای این کار مرورگر ابتدا فایل HTML را از سرور درخواست می‌کند، و سپس در ادامه فایل‌هایی مانند CSS و Javascript و حتی تصاویر موردنیاز را درخواست و دریافت می‌کند. حال اگر  Keep-Alive غیرفعال باشد، به معنا است که مرورگر درآن‌واحد بیشتر از یک فایل نمی‌تواند درخواست کند. ازاین‌رو برای دریافت همه فایل‌ها هر بار درخواستی جداگانه ارسال می‌کند و این امر باعث کاهش زمان لود سایت می‌شود.

ابزار  GTMetrixدر این بخش اطلاعاتی از فعال بودن و میزان بهینه بودن این بخش را به شما نشان می‌دهد.

ابزار  GTMetrix

Enabling Keep-Alive

فعال‌سازی  Keep-Alive

قابلیت Keep-Alive در برخی از سرورها فعال است اما این‌یک فرض می‌باشد و نمی‌توان به آن اتکا کرد. برای فعال کردن این قابلیت کافی است کد زیر را در فایل htaccess قرار داده و تغییرات را ذخیره نهایید. اگر بعد از انجام این کار با ارور ۵۰۰ مواجه شدید بدین معنا است که سرور شما با این دستور سازگاری لازم را ندارد.

<ifModule mod_headers.c> Header set Connection keep-alive </ifModul>

 

Optimize the order of styles and scripts

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

Leverage browser caching

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

ابزار GTMetrix در بخش فعال بودن قابلیت Leverage browser caching را نشان می‌دهد.

ابزار GTMetrix

Leverage browser caching

 

فعال‌سازی Leverage browser caching

برای فعال‌سازی این بخش کافی است کد زیر را در فایل htaccess  در بالاترین نقطه قرار داده و تغییرات را ذخیره کنید.

<IfModule mod_expires.c>

  ExpiresActive On

 

   # Images

ExpiresByType image/jpeg “access plus 1 year”

ExpiresByType image/gif “access plus 1 year”

ExpiresByType image/png “access plus 1 year”

ExpiresByType image/webp “access plus 1 year”

ExpiresByType image/svg+xml “access plus 1 year”

ExpiresByType image/x-icon “access plus 1 year”

 

# Video

ExpiresByType video/mp4 “access plus 1 year”

ExpiresByType video/mpeg “access plus 1 year”

 

# CSS, JavaScript

ExpiresByType text/css “access plus 1 month”

ExpiresByType text/javascript “access plus 1 month”

ExpiresByType application/javascript “access plus 1 month”

 

# Others

  ExpiresByType application/pdf “access plus 1 month”

ExpiresByType application/x-shockwave-flash “access plus 1 month”

</IfModule>

 

Minify Javascript و Minify HTML و  Minifiy CSS

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

ابزار GTMetrix در این بخش‌ها فایل‌هایی که از قابلیت Minify استفاده نمی‌کنند را نمایش می‌دهد و یک لینک دانلود برای دریافت فایل کم‌حجم شده قرار می‌دهد.

Minify در ابزار GTMetrix

Minify

 

بهتر است که از همان فایل که ابزار GTMetrix در اختیار می‌گذارد استفاده کنید و یا برای کاهش حجم و Minify کردن فایل‌های Javascript، HTML و  CSSاز وب‌سایت‌های زیر استفاده کنید.

https://javascript-minifier.com/

https://cssminifier.com/

http://minifycode.com/html-minifier/

اگر از سیستم‌های تولید محتوا مانند وردپرس استفاده می‌کنید. برای Minify کردن فایل‌های خود می‌تواند از پلاگین های انحصاری وردپرس استفاده کنید.

Enable gzip compression

همه ما با فایل‌ها zip آشنایی داریم. این فایل‌ها درواقع اطلاعات را فشرده‌سازی می‌کنند تا هم فضای کمتری بر روی سیستم اشغال کند و هم انتقال آن‌ها آسان باشد. درواقع قابلیت gzip نیز همین کار را برای فایل‌های وب‌سایت‌ها انجام می‌دهد و فایل‌ها را تا ۷۰ درصد کاهش حجم می‌دهد تا سرعت لود آن‌ها افزایش یابد.

ابزار GTMetrix در این بخش از فعال یا غیرفعال بودن این قابلیت خبر می‌دهد.

gzip در ابزار GTMetrix

gzip

فعال‌سازی gzip compression

برای فعال کردن قابلیت gzip و بهبود رتبه در ابزار GTMetrix و افزایش سرعت لود سایت تا ۷۰ درصد، کافی است کدهای زیر را در فایل htaccess   خود قرار داده و تغییرات را ذخیره کنید.

<IfModule mod_deflate.c>

  # Compress HTML, CSS, JavaScript, Text, XML and fonts

  AddOutputFilterByType DEFLATE application/javascript

  AddOutputFilterByType DEFLATE application/rss+xml

  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

  AddOutputFilterByType DEFLATE application/x-font

  AddOutputFilterByType DEFLATE application/x-font-opentype

  AddOutputFilterByType DEFLATE application/x-font-otf

  AddOutputFilterByType DEFLATE application/x-font-truetype

  AddOutputFilterByType DEFLATE application/x-font-ttf

  AddOutputFilterByType DEFLATE application/x-javascript

  AddOutputFilterByType DEFLATE application/xhtml+xml

  AddOutputFilterByType DEFLATE application/xml

  AddOutputFilterByType DEFLATE font/opentype

  AddOutputFilterByType DEFLATE font/otf

  AddOutputFilterByType DEFLATE font/ttf

  AddOutputFilterByType DEFLATE image/svg+xml

  AddOutputFilterByType DEFLATE image/x-icon

  AddOutputFilterByType DEFLATE text/css

  AddOutputFilterByType DEFLATE text/html

  AddOutputFilterByType DEFLATE text/javascript

  AddOutputFilterByType DEFLATE text/plain

  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)

  BrowserMatch ^Mozilla/4 gzip-only-text/html

  BrowserMatch ^Mozilla/4\.0[678] no-gzip

  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

  Header append Vary User-Agent

</IfModule>

 

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

Specify image dimensions

این ارور در ابزار GTMetrix زمانی رخ می‌دهد که برای تصاویر خود عبارت‌ها طول و عرض (Width و height ) را مشخص نکرده باشید. رفع این خطا در افزایش سرعت سایت شما بسیار مؤثر بوده و باعث می‌شود تصاویر در سندها HTML سریع‌تر رندر شوند.

Avoid bad requests

بارها شده که درجاهای مختلف فایل‌های HTML و CSS یک فایل دیگر یا تصویری را فراخوانی می‌کنید. در این صورت مرورگر درخواست فراخوانی شمارا به سرور ارجاع می‌کند. حال اگر سرور نتواند آن فایل، صفحه و یا تصویر را پیدا کند با خطای ۴۰۴ روبه‌رو می‌شوید. بارها شده کاربران با این خطا روبه‌رو شوند و فایل یا صفحه موردنظر آن‌ها در سرور پیدا نشود.

این موقع است که ابزار GTMetrix خطایی بانام Avoid bad requests را از سایت شما می‌گیرد. اما حال می‌پرسید که این اتفاق چه ربطی به‌سرعت سایت دارد؟ در پاسخ باید گفت، مدت‌زمانی که سرور جهت پیدا کردن فایلی که اصلاً وجود ندارد می‌گذارد، بسیار بالا می‌باشد و سرعت سایت را به‌اندازه چشم‌گیری کاهش می‌دهد.

Avoid Ianding page redirect

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

امروزه که استفاده از تلفن‌های همراه بسیار زیاده شده است، امر سرعت سایت مهم‌تر شده، بنابراین با رفع خطای Avoid Ianding page redirect و افزایش سرعت سایت، در گوگل رتبه بهتری کسب کنید.

Avoid CSS @import

به ساری از مواقع برنامه نویسان، فایل‌های CSS را جداگانه کد نویسی می‌کنند و سپس در فایل HTML آن را استایل دهی می‌نمایند. اکثراً از کد (@import url(“Adress-other-style.css”) ) برای استایل دهی استفاده می‌کنند. حال باید بگوییم استفاده از این بسیار اشتباه است و باعث افت شدید سرعت سایت شما می‌شود. کد جایگزین می‌تواند به‌صورت زیر باشد.

<link rel=”style.css” href=”style.css” type=”text/css”>

 

تا اینجای آموزش ابزار GTMetrix برخی از ارور ها و خطاهای بخش Page Speed را بررسی کردیم. در ادامه به بخش Yslow مراجعه کنید.

بررسی بخش‌های Yslow

بخش‌ Yslow در ابزار GTMetrix

بخش‌ Yslow

این بخش از ابزار GTMetrix اطلاعات به‌دست‌آمده از سایت شما توسط الگوریتم‌های گوگل را به همراه اخطارها نشان می‌دهد. برخی از مهم‌ترین اخطارهای این بخش عبارت‌اند از :

(Use a Comtent Delivery Network (CDN

CDN یا به‌عبارت‌دیگر (Comtent Delivery Network) به معنای شبکه توزیع محتوا می‌باشد. برای درک بهتر این موضوع به یک مثال ساده می‌پردازیم.

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

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

در مقاله‌های بعدی رستا آی تی سعی می‌کنیم CDN ها را بیشتر توضیح دهیم.

حال ابزار GTMetrix در بخش Yslow یک خطا مبنی بر استفاده از CDN نمایش می‌دهد. بهتر است این خطا را رفع کنید تا سرعت سایت شما در تمامی مناطق بالا باشد( توجه داشته باشید اولویت این خطا پایین می‌باشد).

Add Expires headers

برای آنکه یک صفحه وب در مرورگر قابل‌مشاهده باشید، باید فایل‌های مختلف مانند فایل‌های HTML و CSS و تصاویر شما از سرور درخواست شود. قابلیتی بانام Expires headers وجود دارد که باعث می‌شود این درخواست‌ها در کش مرورگر ذخیره شود و در صفحه بعدی موارد تکراری مانند لوگوی سایت یا CSS های تکراری، درخواست نشود. ازاین‌رو سرعت لود سایت شما بینهایت افزایش پیدا می‌کند .

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

فعال‌سازی Expires headers

برای استفاده از این قابلیت و ذخیره فایل‌ها در کش مرورگر، کافی است کد زیر را در فایل htaccess موجود در سرور خود قرار دهید و ذخیره نمایید.

<IfModule mod_expires.c>

# Enable expirations

ExpiresActive On

# Default directive

ExpiresDefault “access plus 1 month”

# My favicon

ExpiresByType image/x-icon “access plus 1 year”

# Images

ExpiresByType image/gif “access plus 1 month”

ExpiresByType image/png “access plus 1 month”

ExpiresByType image/jpg “access plus 1 month”

ExpiresByType image/jpeg “access plus 1 month”

# CSS

ExpiresByType text/css “access plus 1 month”

# Javascript

ExpiresByType application/javascript “access plus 1 year”

</IfModule>

Use cookie-free domains

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

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

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

بررسی بخش Waterfall

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

بخش Waterfall در ابزار GTMetrix

بخش Waterfall

بخش Timtigs در ابزار  GTMetrix

بخش Timtigs که اخیراً به ابزار GTMetrix اضافه‌شده است، زمان onload سایت شمارا نمایش می‌دهد. Onload درواقع همان زمان بارگذاری اولیه می‌باشد.

بخش Video ابزار GTMetrix

در این قسمت از ابزار GTMetrix شما سرعت و بهینه بودن ویدئوها را مشاهده می‌کنید.

بخش History

این قسمت نمودار آماری از خلاصه وضعیت و عملکرد سایت شما درزمینهٔ سرعت و بهینه بودن را به نمایش می‌گذارد.

بخش History در ابزار GTMetrix

بخش History

جمع‌بندی

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

 

0 پاسخ

دیدگاه خود را ثبت کنید

Want to join the discussion?
Feel free to contribute!

دیدگاهتان را بنویسید

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