یکی از فاکتورهای مؤثر در سئو، سرعت بارگذاری سایت می‌باشد. ابزارها و وب‌سایت‌های مختلفی برای بررسی سرعت بارگذاری سایت و مشکلات آن وجود دارد که یکی از بهترین آن‌ها ابزار GTMetrix می‌باشید. در این مقاله قصد داریم ابزار GTMetrix را به‌صورت کامل بررسی و آموزش دهیم. با رستا آی تی همراه باشید…
ابزار GTMetrix چگونه کار می‌کند؟
پس از واردشده به سایت و وارد شدن به سایت ابزار GTMetrix در نوار مربوطه آدرس سایت خود را وارد کرده و بر روی دکمه “Analyze” کلیک نهایید.
با این کار ابزار GTMetrix شروع به بررسی و آنالیز سایت شما می‌کند و دقایقی بعد نتیجه را به نمایش می‌گذارد.
Page Speed Score
در این قسمت میزان بهینه بودن سایت شما بر اساس موارد موجود در منوی زیر، با یک حرف و درصد(۹۳%) مشخص‌شده است.
YSlow Score
در این قسمت نیز یک درصد (۸۲%) به شما نمایش داده‌شده با این تفاوت که این بار ملاک‌های موجود در بخش YSlow واقع در Breakdown مدنظر قرارگرفته.
Page Load Time
سرعت بارگذاری سایت شمارا برحسب ثانیه نشان می‌دهد. (۷٫۰ S)
Total Page Size
حجم صفحه‌ای از وب‌سایت که برای بررسی وارد کرده‌اید. (۲٫۵۵ MB)
Requests
تعداد درخواست‌هایی که به سرور جهت بارگذاری سایت ارسال می‌شود.(۳۷)
بررسی‌های بخش Page Speed
این بخش از ابزار GTMetrixحدود ۲۷ فاکتور از سایت را توسط بررسی‌های الگوریتم‌های گوگل نمایش می‌دهد. برخی از مهم‌ترین آن‌ها عبارت‌اند از :
optimizing images
تصاویری که شما در فتوشاپ یا برنامه ایلاستریتور یا دیگر برنامه‌های گرافیکی طراحی می‌کنید. بسیار زیبا و خارق‌العاده هستند، اما این تصاویر دارای حجم بالایی می‌باشد. حدود ۹۰ درصد از صفحات وب‌سایت‌ها به تصاویر و گرافیک‌ها وابسته هستند. ازاین‌رو کاهش حجم تصاویر یکی از مهم‌ترین امرها در بهینه‌سازی سئو سایت می‌باشد.
ابزار GTMetrix در این بخش میزان بهینه بودن تصاویر شمارا نشان می‌دهد و حتی چند تصویر که باعث کاهش این مورد شده را به کاهش حجم قرار می‌دهد.
راه‌های زیادی برای کاهش حجم تصاویر وجود دارد مانند کم کردن حاشیه‌ها و padding های سفید در اطراف تصاویر، استفاده از فرمت های تصاویر کم‌حجم، خروجی گرفتن با ابزار Seve For Web در برنامه فتوشاپ، ذخیره تصاویر در ابعاد کم و مناسب، و استفاده از ابزارها و وب‌سایت‌های کاهش حجم مانند https://tinypng.com/ در جهت کاهش حجم تصاویر شما بسیار کارآمد است.
Enabling Keep-Alive
برای نمایش صفحات وب در مرورگرها باید فایل‌های موردنیاز از یک سرور دریافت شوند. برای این کار مرورگر ابتدا فایل HTML را از سرور درخواست می‌کند، و سپس در ادامه فایل‌هایی مانند CSS و Javascript و حتی تصاویر موردنیاز را درخواست و دریافت می‌کند. حال اگر Keep-Alive غیرفعال باشد، به معنا است که مرورگر درآن‌واحد بیشتر از یک فایل نمی‌تواند درخواست کند. ازاین‌رو برای دریافت همه فایل‌ها هر بار درخواستی جداگانه ارسال می‌کند و این امر باعث کاهش زمان لود سایت می‌شود.
ابزار GTMetrixدر این بخش اطلاعاتی از فعال بودن و میزان بهینه بودن این بخش را به شما نشان می‌دهد.
فعال‌سازی Keep-Alive
قابلیت Keep-Alive در برخی از سرورها فعال است اما این‌یک فرض می‌باشد و نمی‌توان به آن اتکا کرد. برای فعال کردن این قابلیت کافی است کد زیر را در فایل htaccess قرار داده و تغییرات را ذخیره نهایید. اگر بعد از انجام این کار با ارور ۵۰۰ مواجه شدید بدین معنا است که سرور شما با این دستور سازگاری لازم را ندارد.
Header set Connection keep-alive
Optimize the order of styles and scripts
چیدمان صحیح فایل‌های CSS و Javascript وظیفه این بخش از ابزارGTMetrix می‌باشد. درواقع این ارور و خطا در ابزار GTMetrix می‌گوید که ابتدا باید فایل‌های CSS که حجم کمتر و سبک‌تر هستند و سپس فایل‌های Javascript لود شوند. این امر به ترتیب بودن فایل‌ها را نشان می‌دهد.
Leverage browser caching
هر بار که شما وب‌سایتی را در مرورگر خود جستجو و باز می‌کنید، اطلاعات موردنیاز مانند فایل‌های HTML، CSS، Javascript، و تصاویر مانند لوگوی سایت و.. برای نمایش آن صفحه از وب از سرور درخواست می‌شود. این اطلاعات توسط مرورگر در حافظه کش ذخیره می‌شود تا در دفعات بعدی مراجعه شما به این وب‌سایت اطلاعات دیگر نیاز به درخواست از سرور نباشد. این همان دلیل است که سایت در اولین بار بیشترین زمان لود را می‌برد.
ابزار GTMetrix در بخش فعال بودن قابلیت Leverage browser caching را نشان می‌دهد.
فعال‌سازی Leverage browser caching
برای فعال‌سازی این بخش کافی است کد زیر را در فایل htaccess در بالاترین نقطه قرار داده و تغییرات را ذخیره کنید.
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”
Minify Javascript و Minify HTML و Minifiy CSS
عبارتMinify به معنای طراحی سایت با فایل‌های کم‌حجم می‌باشد. به‌عبارت‌دیگر Minify یعنی حذف نقاط و فاصله‌های خالی از فایل‌ها جهت کاهش حجم و افزایش زمان لود سایت می‌باشد.
ابزار GTMetrix در این بخش‌ها فایل‌هایی که از قابلیت Minify استفاده نمی‌کنند را نمایش می‌دهد و یک لینک دانلود برای دریافت فایل کم‌حجم شده قرار می‌دهد.
بهتر است که از همان فایل که ابزار GTMetrix در اختیار می‌گذارد استفاده کنید و یا برای کاهش حجم و Minify کردن فایل‌های Javascript، HTML و CSSاز وب‌سایت‌های زیر استفاده کنید.
https://javascript-minifier.com/
http://minifycode.com/html-minifier/
اگر از سیستم‌های تولید محتوا مانند وردپرس استفاده می‌کنید. برای Minify کردن فایل‌های خود می‌تواند از پلاگین های انحصاری وردپرس استفاده کنید.
Enable gzip compression
همه ما با فایل‌ها zip آشنایی داریم. این فایل‌ها درواقع اطلاعات را فشرده‌سازی می‌کنند تا هم فضای کمتری بر روی سیستم اشغال کند و هم انتقال آن‌ها آسان باشد. درواقع قابلیت gzip نیز همین کار را برای فایل‌های وب‌سایت‌ها انجام می‌دهد و فایل‌ها را تا ۷۰ درصد کاهش حجم می‌دهد تا سرعت لود آن‌ها افزایش یابد.
ابزار GTMetrix در این بخش از فعال یا غیرفعال بودن این قابلیت خبر می‌دهد.
فعال‌سازی gzip compression
برای فعال کردن قابلیت gzip و بهبود رتبه در ابزار GTMetrix و افزایش سرعت لود سایت تا ۷۰ درصد، کافی است کدهای زیر را در فایل htaccess خود قرار داده و تغییرات را ذخیره کنید.
# 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
اگر از سیستم‌های تولد محتوا مانند وردپرس و جوملا استفاده می‌کنیم، برای فعال‌سازی این قابلیت می‌تواند از افزونه‌های انحصاری وردپرس و جوملا استفاده کنید.
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”) ) برای استایل دهی استفاده می‌کنند. حال باید بگوییم استفاده از این بسیار اشتباه است و باعث افت شدید سرعت سایت شما می‌شود. کد جایگزین می‌تواند به‌صورت زیر باشد.
تا اینجای آموزش ابزار GTMetrix برخی از ارور ها و خطاهای بخش Page Speed را بررسی کردیم. در ادامه به بخش Yslow مراجعه کنید.
بررسی بخش‌های 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 موجود در سرور خود قرار دهید و ذخیره نمایید.
# 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”
Use cookie-free domains
کوکی یا به انگلیسی Cookie یک‌تکه از اطلاعاتی هستند که توسط مرورگر از وب‌سایت‌ها در کامپیوتر اشخاص و کاربران ذخیره می‌شود. هر بار که کاربر به آن سایت مراجعه کند. این کوکی‌ها به سرور فرستاده می‌شود و اطلاعات و فعالیت‌های قبلی قابل به نمایش درمی‌آید. هر کوکی دارای زمان انقضای خاصی است که پس از منقضی شدن از کامپیوتر شما حذف می‌شود. کوکی‌ها برای ذخیره اطلاعات کوچک در دوره زمانی کوتاه استفاده می‌شود( حافظه کوکی را با کش اشتباه نگیرید).
برای درک بهتر کوکی یک مثال می‌زنیم. بارها شده در فروشگاه‌های اینترنتی ( پیشنهاد می‌کنیم مقاله فروشگاه ساز ووکامرس را مطالعه کنید)، بدون ثبت‌نام کردن در سایت و ثبت اطلاعات شخصی، اقدام به افزودن محصولات به سبد خرید می‌کنید. این درواقع همان کوکی‌ها هستند که در یک مدت‌زمان کوتاه( زمان افزودن به سبد خرید تا زمان ثبت سفارش) در مرورگر و کامپیوتر شما ذخیره می‌شود.
ابزار GTMetrix در این بخش استفاده از این کوکی‌ها را مفید می‌دانند و باعث می‌شود درخواست‌های مرورگر از سرور شما کاهش یابد و باعث افزایش چشمگیر سرعت سایت شما می‌شود.
بررسی بخش Waterfall
بخش بعدی ابزار GTMetrix بخشی بانام Waterfall می‌باشد. در این قسمت با استفاده از نمودارهای آماری، زمان بارگذاری و لود سایت شما در بخش‌های مختلف را نشان می‌دهد. با استفاده از این بخش می‌تواند اطلاعات مفیدی از نحوه بارگذاری سایت گردآوری کنید.
بخش Timtigs در ابزار GTMetrix
بخش Timtigs که اخیراً به ابزار GTMetrix اضافه‌شده است، زمان onload سایت شمارا نمایش می‌دهد. Onload درواقع همان زمان بارگذاری اولیه می‌باشد.
بخش Video ابزار GTMetrix
در این قسمت از ابزار GTMetrix شما سرعت و بهینه بودن ویدئوها را مشاهده می‌کنید.
بخش History
این قسمت نمودار آماری از خلاصه وضعیت و عملکرد سایت شما درزمینهٔ سرعت و بهینه بودن را به نمایش می‌گذارد.
جمع‌بندی
با افزایش روزافزون استفاده از تلفن همراه برای گشت‌وگذار در اینترنت، اهمیت سرعت سایت‌ها افزایش‌یافته است. مثلا اگر در حوزه موشن گرافیک فعالیت دارید، باید به سرعت سایتتان اهمیت دهید تا سفارش و مشتری بهتری داشته باشید. ابزارهای بسیاری برای تست و بررسی سرعت سایت وجود دارد که یکی از معروف‌ترین و حرفه‌ای‌ترین آن‌ها ابزار GTMetrix می‌باشد. در این مقاله تلاش شد تا نحوه استفاده ازا ین بزار و بخش‌های مختلف آن به‌صورت کامل توضیح داده شود. امیدواریم این آموزش مفید بوده باشد.با رستا ای تی با مقالات بعدی همراه باشد.