مقالات آموزشی سئو و بهینه سازی

آموزش رفع خطا GTmetrix

آموزش GTmetrix

آموزش GTmetrix

این بار با آموزشی جامع ، پیرامون خطاها و مشکلاتی که ابزار gtmetrix از سایت شما میگیرد ، در جهت بهینه سازی ، خدمت شما عزیزان وب مستر هستیم.

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

 

رفع مشکل Serve scaled images در gtmetrix

اگه تصاویر روی سایت شما از طریق CSS نسبت به سایز اصلی اون تغییری داده شه ، توسط این گزینه بهتون اعلام و نشان داده می شود.

برای رفع مشکل Serve scaled images در gtmetrix یا باید سایز تعیین شده رو حذف کنید ، یا عکس را با همان سایزی که در سایت استفاده میکنید ، ذخیر کنید.

در جمع بندی میشه گفت این خطا مربوط به تصاویر سایت میشه و اولویت رفع مشکل اون هم بالاست !

برای بهینه سازی تصاویرتون هم چندین روش هست :

  • استفاده از فتوشاپ
  • استفاده از ابزار آنلاین مثل PicResize.com , imageresize.org و …
  • در وردپرس با افزونه Imsanity
  • در جوملا با افزونه ImageResizer

 

رفع ارور Optimize images در gtmetrix

تصاویر در طراحی سایت ، امری جداناپذیر است ! اما باید به گونه ای بهینه کنید که روی سرعت لود سایت شما تاثیر منفی نداشته باشد.

زمانی که از بهینه سازی تصاویر حرف میزنیم ، یعنی کاهش حجم عکس و کاهش اندازه تصاویر !

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

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

  • افزونه smush
  • افزونه TINYPNG
  • افزونه EWWW Image Optimizer

و اگر وردپرس کار نیستید ، سایت های آنلاینی که در قسمت بالا برای شما عزیزان ذکر کردیم ، برای رفع ارور optimize images در gtmetrix به کمکتان می آید.

 

 

رفع خطا Inline small CSS در gtmetrix

به طور کل ، به سه شیوه از کدهای CSS در یک داکیومنت html استفاده می شود.

Inline، Internal و External که هرکدام دارای مزیت ها و عیوب خاص خود در شرایط مختلف را داراست.

شاید بپرسید CSS چی هست !!!؟ CSS ، یک نوع زبان نشانه‌گذاری تحت وبه که برای توصیف ظاهر یک‎ سایت برای مرورگر همراه با HTML  استفاده میشه .

گوگل نیز مطلبی با تیتر Inline Small Resources وب مسترارو به استفاده از روش Internal ترغیب کرده است. قسمتی از این مطلب :

This rewriter reduces the number of requests made by a web page by inserting the contents of small external CSS , JavaScript and image files directly into the HTML  document. This can reduce the time it takes to display content to the user, especially in older browsers

برای بهینه کردن کدهای CSS و رفع خطا Inline small CSS در gtmetrix ، اگر تخصصی ندارید ، سایت زیر شدیدا شمارا کمک خواهد کرد :

  • WWW.CSSCOMPRESSOR.COM

 

 

مشکل Defer parsing of JavaScript در gtmetrix

از نظر معنا Defer parsing of JavaScript به فارسی معادل تاخیر در بارگزاری فایلهای جاوا اسکریپت میباشد.

از اونجایی که برای لود شدن پیج کد ها به ترتیب از بالا ( HEAD ) به پایین رندر می شوند ، پس برای به تعویق انداختن رندر بهتر است جاوا اسکریپت ها را به انتهای کد ها اضافه کنید.

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

اگر از سیستم مدیریت محتوای وردپرس استفاده میکنید ، برای مشکل Defer parsing of JavaScript در gtmetrix از افزونه های زیر استفاده کنید :

  • افزونه WP Deferred JavaScripts
  • افزونه Speed Booster Pack

اگر جوملا کار هستید :

  • پلاگین JCH Optimize
  • پلاگین Javascript Async and Defer

 

ارور Inline small JavaScript در gtmetrix

دقیقا طبق آموزش ارور Inline small CSS در gtmetrix که در بالا توضیح دادیم ، رفع خطا Inline small JavaScript در gtmetrix نیز صورت میگیرد.

ابزار آنلاین برای رفع این خطا :

  • WWW.JAVASCRIPTCOMPRESSOR.COM

 

 

رفع خطا Prefer asynchronous resources در gtmetrix

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

از لحاظ معنا  Prefer asynchronous resources به فارسی یعنی ناهماهنگی در فراخوانی فایلهای جاوا اسکریپت .

و از اسمش مشخصه که برای رفع خطا Prefer asynchronous resources در gtmetrix باید جاوا اسکریپ هایی که موجب مختل شدن میشن رو به انتهای پوسته خود ، قبل تگ </body>  منتقل کنید.

 

رفع خطا Leverage browser caching در gtmetrix

دلیل خطا Leverage browser caching :

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

برای رفع خطا Leverage browser caching در gtmetrix  ، اگر وردپرس کار هستید از پلاگین زیر استفاده کنید :

  • پلاگین w3 total cache

اگر جولا کار هستید از پلاگین زیر استفاده کنید :

  • پلاگین cache cleaner pro 6.3.0

اگر از این CMS ها استفاده نمیکنید ، از روش های زیر عمل کنید :

شما باید فایل .htaccess را ویرایش نمایید ، کد (یک) زیر را به این فایل اضافه کنید :

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##

و یا CODE شماره دو را قرار دهید

ExpiresActive on
ExpiresDefault “access plus 1 month”

# CSS

ExpiresByType text/css “access plus 1 year”

# Data interchange

ExpiresByType application/atom+xml “access plus 1 hour”
ExpiresByType application/rdf+xml “access plus 1 hour”
ExpiresByType application/rss+xml “access plus 1 hour”

ExpiresByType application/json “access plus 0 seconds”
ExpiresByType application/ld+json “access plus 0 seconds”
ExpiresByType application/schema+json “access plus 0 seconds”
ExpiresByType application/vnd.geo+json “access plus 0 seconds”
ExpiresByType application/xml “access plus 0 seconds”
ExpiresByType text/xml “access plus 0 seconds”

# Favicon (cannot be renamed!) and cursor images

ExpiresByType image/vnd.microsoft.icon “access plus 1 week”
ExpiresByType image/x-icon “access plus 1 week”

# HTML

ExpiresByType text/html “access plus 0 seconds”

# JavaScript

ExpiresByType application/javascript “access plus 1 year”
ExpiresByType application/x-javascript “access plus 1 year”
ExpiresByType text/javascript “access plus 1 year”

# Manifest files

ExpiresByType application/manifest+json “access plus 1 week”
ExpiresByType application/x-web-app-manifest+json “access plus 0 seconds”
ExpiresByType text/cache-manifest “access plus 0 seconds”

# Media files

ExpiresByType audio/ogg “access plus 1 month”
ExpiresByType image/bmp “access plus 1 month”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/svg+xml “access plus 1 month”
ExpiresByType image/webp “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
ExpiresByType video/ogg “access plus 1 month”
ExpiresByType video/webm “access plus 1 month”

# Web fonts

# Embedded OpenType (EOT)
ExpiresByType application/vnd.ms-fontobject “access plus 1 month”
ExpiresByType font/eot “access plus 1 month”

# OpenType
ExpiresByType font/opentype “access plus 1 month”

# TrueType
ExpiresByType application/x-font-ttf “access plus 1 month”

# Web Open Font Format (WOFF) 1.0
ExpiresByType application/font-woff “access plus 1 month”
ExpiresByType application/x-font-woff “access plus 1 month”
ExpiresByType font/woff “access plus 1 month”

# Web Open Font Format (WOFF) 2.0
ExpiresByType application/font-woff2 “access plus 1 month”

# Other

ExpiresByType text/x-cross-domain-policy “access plus 1 week”

توجه داشته باشین که یکی از دو کد بالا را باید استفاده کنید نه هر دو

رفع خطا Minify JavaScript در gtmetrix

با استفاده از ابزار آنلاین قادر خواهید بود فایلهای جاوا اسکرپیت را فشرده سازی کنید:

  • www.javascript-minifier.com
  • www.refresh-sf.com
  • www.jscompress.com
  • www.jsmini.com

اگر وردپرس کار هستید با استفاده از پلاگین :

  • پلاگین‌ رایگان Better WordPress Minify
  •  پلاگین رایگان WP Super Minify

همچنین اکثر CDN ها مانند کلود فلیر تنظیمات فشرده سازی را در خود جای داده اند و می توانید از این ابزارها هم برای رفع خطا Minify JavaScript در gtmetrix استفاده کنید.

 

رفع ارور Minify HTML در gtmetrix

کلمه Minify در بهینه‌سازی‌ سایت به معنی طراحی سایت با فایل‌های کم حجم است. هدف از Minify کردن از بین بردن فضاهای خالی در بین کدها و همچنین کامنت‌های بین کدها است.

برای رفع خطا Minify HTML در gtmetrix از روش های زیر استفاده کنید.

اگر وردپرس کار هستید :

  • پلاگین Minify HTML
  • پلاگین WP Super Minify
  • پلاگین Autoptimize
  • پلاگین WP Rocket ( پیشنهاد تیم سئو کار ماهر )

 

اگر جوملا کار هستید :

  • پلاگین JCH Optimize ( پیشنهاد تیم سئو کار ماهر )
  • پلاگین EXT HTML Compressor

اگر وب سایت استاتیک دارید از ابزار آنلاین استفاده کنید :

  • www.willpeavy.com
  • www.minifycode.com

 

رفع خطا Minify CSS در آموزش gtmetrix

این خطا وقتی پیش میاد که فایل های CSS شما توضیحات و یا فاصله های اضافی داشته باشند .

اگر وردپرس کار هستید برای رفع خطا Minify CSS در gtmetrix

کافیست با افزونه های وردپرس موجود که نام آن ها در در قسمت زیر ذکر کرده ایم ، این موارد اضافی را حذف کنید تا حجم فایل css شما کاهش می باید.

زمانی که حجم CSS کم شود هم render کردن CSS با سرعت بیشتری انجام میشود.

  • پلاگین  Better WordPress Minify
  • پلاگین WP Super Minify
  • پلاگین WP Rocket ( پیشنهاد تیم سئو کار ماهر )

اگر دارای وبسیات استاتیک هستید :

  • www.cssminifier.com
  • www.csscompressor.com
  • www.minifier.org

 

رفع خطا Specify image dimensions در gtmetrix

از نظر معنایی ،  Specify image dimensions به فارسی معادل قرار دادن مقدار برای طول و عرض تصاویر میباشد.

سوال ! در چه مواقعی این خطا رخ میدهید ؟

این خطا هنگامی پیش می آید که شما در عکس های خود از اتریبیوت‌های مانند width و  height استفاده نکرده اید !

برای رفع خطا Specify image dimensions در gtmetrix  باید در تمام عکس های خود عرض و ارتفاع آن را مشخص کنید.

نه تنها با CSS بلکه باید از HTML  هم تصاویر را بهینه کنید .

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

به طور مثال میشه از نمونه کد زیر به عنوان مثال استفاده کرد :

<img src="لینک عکس" alt="توضیح عکس" width="15" height="15" />

این قطعه کد میگوید که عکس را به عرض و طول ۱۵ در ۱۵ نمایش بده ! به همین راحتی قادر خواهید بود این خطا را رفع کنید

 

رفع خطا Remove query strings from static resources در gtmetrix

وجود query strings در سورس وبسایت شما سبب می‌شود که آن سورس ها در سمت کاربر کش نشود .

اگر سورس همانند CSS یا JS در سمت کاربر کش نشود خطاهایی مانند Leverage browser caching هم پیش می آید !

این خطا همینطور باعث می‌شود فایل‌های استایل CSS و جاوا اسکریپت در بسیاری از مرورگرها و همین‌طور CDN ها کش نشود.

اگر وردپرس کار هستید از افزونه زیر استفاده کنید :

  • پلاگین remove query strings

اگر دارای وب سایت استاتیک یا CMS جوملا هستید کد زیر را برای رفع خطا Remove query strings from static resources در gtmetrix به فایل فانکشن خود اضافه کنید :

// Remove query string from static files
function remove_cssjs_ver( $src ) {
if( strpos( $src, ‘?ver=’ ) )
$src = remove_query_arg( ‘ver’, $src );
return $src;
}
add_filter( ‘style_loader_src’, ‘remove_cssjs_ver’, 10, 2 );
add_filter( ‘script_loader_src’, ‘remove_cssjs_ver’, 10, 2 );

 

در حال بروزرسانی…

‫3 نظرها

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بستن
بستن