آموزش افزایش سرعت سایت gtmetrix

آخرین بروز رسانی: آذر ۱۲, ۱۳۹۵

برای افزایش سرعت سایت و تست سرعت سایت با آنالیز سایت gtmetrix در خدمت شما مشتریان دوستان افزایش فروش و تجارت آنلاین هستیم پس پیش به سوی موفقیت و زحمت و تلاش و سئو.

آموزش افزایش سرعت سایت gtmetrix

Combine images using CSS sprites ,Inline small CSS ,Optimize images ,Serve scaled images ,Optimize the order of styles and scripts ,Defer parsing of JavaScript ,Specify image dimensions ,Minify CSS ,Avoid landing page redirects ,Leverage browser caching ,Enable Keep-Alive ,Minify HTML ,Minify JavaScript ,Avoid bad requests ,Avoid a character set in the meta tag ,Enable gzip compression ,Inline small JavaScript ,Minimize redirects ,Minimize request size ,Put CSS in the document head ,Remove query strings from static resources ,Serve resources from a consistent URL ,Specify a cache validator ,Specify a Vary: Accept-Encoding header ,Specify a character set early ,Avoid CSS @import,,Prefer asynchronous resources,gtmetrix

در این بخش به بررسی مواردز زیر می پردازیم:

Combine images using CSS sprites ,Inline small CSS ,Optimize images ,Serve scaled images ,Optimize the order of styles and scripts ,Defer parsing of JavaScript ,Specify image dimensions ,Minify CSS ,Avoid landing page redirects ,Leverage browser caching ,Enable Keep-Alive ,Minify HTML ,Minify JavaScript ,Avoid bad requests ,Avoid a character set in the meta tag ,Enable gzip compression ,Inline small JavaScript ,Minimize redirects ,Minimize request size ,Put CSS in the document head ,Remove query strings from static resources ,Serve resources from a consistent URL ,Specify a cache validator ,Specify a Vary: Accept-Encoding header ,Specify a character set early ,Avoid CSS @import,,Prefer asynchronous resources,gtmetrix

بخش اول فشرده سازی

Combine images using CSS sprites

Inline small CSS

Optimize images

Serve scaled images

Optimize the order of styles and scripts

Defer parsing of JavaScript

Specify image dimensions

Minify CSS

Avoid landing page redirects

Leverage browser caching

Enable Keep-Alive

Minify HTML

Minify JavaScript

Avoid bad requests

Avoid a character set in the meta tag

Enable gzip compression

Inline small JavaScript

Minimize redirects

Minimize request size

Put CSS in the document head

Remove query strings from static resources

Serve resources from a consistent URL

Specify a cache validator

Specify a Vary: Accept-Encoding header

Specify a character set early

Avoid CSS @import

Prefer asynchronous resources

 

GTMetrix چیست؟

سایت GTMetrix  به شما کمک میکنه تا از PageSpeed یا همون سرعت بارگزاری سایت باخبر بشین و همچنین با ارائه بعضی راه کارها روش هایی رو برای بهبود PageSpeed ارائه میده.

GTMetrix در حقیقت از استانداردهایی که گوگل به عنوان معیار قرار داده استفاده میکنه. این آدرس صفحه بررسی PageSpeed سایت شما به کمک گوگل هست که البته ایرانی ها امکان دسترسی بهش رو ندارن مگه با یکم خلاقیت! همچنین گوگل یه افزونه برای این کار طراحی کرده که همین کار رو انجام میده ، این افزونه هم برای Chrome, Firefox قابل دسترس هست.

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

آموزش بهینه سازی سایت با GTMetrix

بعد اینکه آدرس سایت مورد نظرتون رو در قسمت “Analyze Performance of” وارد کردین، روی دکمه “Go!” کلیک کنین تا عملیات بررسی سایت شروع شه. بعد از مدت کوتاهی صفحه ای به شکل زیر باز میشه که نتایج بررسی انجام شده رو بهتون نشون میده.

آموزش بهینه سازی سایت با GTMetrix

نتیجه حاصل از دو بخش اصلی Summary و Breakdown تشکل شده:

اطلاعات نمایش داده شده در Summary : این قسمت نمایش آماری اطلاعات بدست اومده در بخش Breakdown رو نشون میده.

Page Speed Grade: تو این قسمت به کمک یک درصد (۸۵%) میزان بهینه بودن موارد موجود در بخش Breakdown رو مشاهده میکنین.

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

Page load time: زمان بارگزاری سایت رو بر حسب ثانیه نشون میده (۱۱.۴۴s).

Total page size: حجم صفحه ای که اون رو مورد بررسی قرار دادین (۶۷۲KB).

Total number of requests: تعداد درخواست هایی که به سرور برای بارگزاری قسمت های مختلف سایت ارسال میشه (۵۷).

نکته : هر چه تعداد درخواست های رد و بدل شده بین سرور و مرورگر کمتر باشه هم فشار کمتری به سرور وارد میشه و هم سرعت سایت بالاتر میره.

اطلاعات بدست آماده در Breakdown :

بخش Breakdown در GTMetrix از چهار زبانه تشکیل شده که به ترتیب زیر هستن :

PageSpeed : اطلاعات بدست اومده از بررسی سایت با الگوریتم های گوگل رو نشون میده.

YSlow : اطلاعات بدست اومده از بررسی سایت با الگوریتم های یاهو رو نشون میده.

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

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

Combine images using CSS sprites : ادغام یا ترکیب تصاویر موجود در فایل استایل سایت

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

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

من یه نمونه کوتاه از این ادغام تصاویر رو خدمت دوستان توضیح میدم :

به فرض من این دو تا تصویر facebook و facebook رو تو سایت استفاده کردم. به طوری که اولی بک گراند حالت عادی و دومی در حالتی نمایش داده میشه که موس روی اون ناحیه قرار بگیره.

<style>
.facebook{
    background:url(facebook.png) no-repeat;
    width:32px;
    height:32px;
}
.facebook:hover{
    background:url(facebook-hover.png) no-repeat;
}
</style>
<div class="facebook">
</div>

همونطور که میبینید من برای این کار هم مجبور هم هستم موقع بارگزاری سایت دو تا عکس رو لود کنم پس برای رفع این مشکل به کمک فتوشاپ دو تصویر بالا رو به شکل زیر با هم ترکیب میکنم:

facebook-sprites

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

<style>
.facebook{
    background:url(facebook-sprites.png) no-repeat 0 0;
    width:32px;
    height:32px;
}
.facebook:hover{
    background:url(facebook-sprites.png) no-repeat 0 -32px;
}
</style>
<div class="facebook">
</div>

نکته : این کار رو برای تصاویری که به صورت repeat شده به عنوان پترن استفاده میکنین قابل استفاده نیست.

Specify image dimensions : قرار دادن مقدار برای طول و عرض تصاویر

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

اگه روی عنوان این بخش کلیک کنید و اطلاعات داخل اون رو ببینید، مشاهده میکنین تو هر سطر یدونه آدرس عکس هست و جلوش یه چنین چیزی “(Dimensions: 10 x 10)” نوشته شده.  مقدار اولی همون width و مقدار دومی هم height مربوط به هر تصویر هست. برای اینکه این مقادیر رو به هر تصویر اختصاص بدین کافیه ابتدا محل بارگزاری اون عکس رو تو قالب وردپرس بدست بیارین و بعد بهش مقدار بدین به این شکل :

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

نکته : بعضی از دوستان میگن دادن اندازه به عکس از طرف CSS کافیه ولی در حقیقت اینطور نیست و شما باید به روش بالا هم طول و عرض تصاویر رو تعیین کنید.

Defer parsing of JavaScript : تاخیر در بارگزاری فایلهای جاوا اسکریپت

به شخصه توصیه میکنم زیاد پی گیر این بخش نشید، چون آخرش مجبورتون میکنه همه کدهای جاوا اسکریپت رو از سایتتون پاک کنید تا ۱۰۰ درصد بشه.

اگه مایلید میتونیداز یکی از روش های زیر موقع فراخوانی فایل های جاوا اسکریپت استفاده کنید. ( نام فایل java.js)

روش اول :

<script type="text/javascript">
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "java.js";
 document.body.appendChild(element);
 }
   if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script>

روش دوم : این روش بیشتر مواقع باعث ایجاد چند خطا در ولید سایت میشه.

<script defer="defer" type="text/javascript" src="java.js"></script>

نکته : البته هر دو این روش ها بعضی مواقع باعث جلوگیری از لود فایل جاوا اسکریپت شما میشه.

Optimize images : بهینه سازی حجم تصاویر

۱۰۰ درصد کردن این بخش کاری نداره ولی فقط یکم زیادی وقت گیره.

آموزش بهینه سازی PageSpeed سایت با GTMetrix

تو شکل بالا ابتدا قبل از آدرس عکس ها به شما میگه که اگه تصاویر قرار گرقته در این ببخش رو Optimize کنید، در کل ۲۱ درصد از حجمشون یعنی حدود ۲۱.۶ کیلوبایت کم میشه. حالا همینطور که مشاهده میکنین یه آدرس عکس قرار داده بعد نوشته بعد از بهینه سازی چقدر از حجمش کم میشه و در نهایت خودش یه نسخه بهینه شده عکس رو به صورت optimized version در اختیار شما قرار میده که میتونین اون رو دانلود کنید و با همون عکس تو هایت خودتون جایگزین کنین تا بهینه بشه.

اگه از سیستم وردپرس استفاده میکنین برای اینکه این کار به صورت اتوماتیک انجام شه میتونین از افزونه Smush.it استفاده کنین. یا از سایت هایی مثل ysmush.it برای بهینه سازی تصاویر قبل از آپلود استفاده کنین.

Prefer asynchronous resources : ناهماهنگی در فراخوانی فایلهای جاوا اسکریپت

GTMetrix تو این قسمت فایلهای جاوا اسکریپتی که باعث ایجاد ناهماهنگی بین فایلهای جاوا اسکریپت میشه رو نشون میده. برای حل این مشکل کافیه لود اون هارو به تعویق بندازین .

Minify HTML : کاهش حجم کدهای HTML

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

Minify CSS و Minify JavaScript : کاهش حجم کدهای JavaScript و CSS

آموزش بهینه سازی PageSpeed سایت با GTMetrix

این مورد هم مثل مورد بالا با حذف بخش توضیحات و همچنین فاصله های اضافی این کار رو انجام میده. درسته در نهایت کدها به نظر به هم ریخته می آن ولی اینطور نیست.

خود GTMetrix در بخش optimized version مقابل هر آدرس, آدرسی برای دریافت کدهای بهینه شده رو هم بهتون میده , که بهتره از فایلهاتون یک بک آپ بگیرین و بعد این نسخه های بهینه شده رو جایگزین اونها کنین.

Optimize the order of styles and scripts : چینش صحیح فایلهای استایل و جاوا اسکریپت کنار یکدیگر

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

در حقیقت وظیفه شما این هست که تگ های مربوط به استایل رو بالاتر از تگهای مربوط به جاوا اسکریپت قرار بدین. به همین راحتی  :)

<head>
 <title>title</title>
 <style>
 // CSS Code
 </style>
 <script type="text/javascript">
 // javascript Code
 </script>
</head>

Inline small CSS : فراخوانی فایلهای استایل کوچک از داخل سایت

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

آموزش بهینه سازی PageSpeed سایت با GTMetrix

Inline small JavaScript :  فراخوانی فایلهای جاوا اسکریپت کوچک از داخل سایت

این گزینه هم همانند گزینه ی بالایی هست با این تفاوت که نظر شما را به فایلهای جاوا اسکریپت کوچیک خارجی جلب میکنه.

آموزش بهینه سازی PageSpeed سایت با GTMetrix

Enable Keep-Alive : زنده نگاه داشتن فایل بین سرور و مرورگر!

در این مورد GTMetrix از شما میخواهد مواردی که به شما نشان میدهد را به صورت زنده بین سرور و مرورگر خود قرار دهید. برای این کار کد زیر رو به فایل .htaccess موجود تو شاخه اصلی سایتتون اضافه کنید.

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

Leverage browser caching : ذخیره سازی بخش های ثابت در cach مرورگر کاربر

در این بخش GTMetrix لیستی از فایلهایی که بهتر از در مرورگر کاربر ذخیره شود رو نشون میده. مثلا فرض کنید GTMetrix  آدرسی مثل “http://…/font/nassim.woff” رو نشون بده، این آدرس نشون دهنده نوع فایل از نوع فونت با پسوند woff هست. حالا اگه بخوایم کاری کنیم این نوع فایل تو مرورگر کاربر کش بشه کافیه کد زیر رو در فایل .htaccess قرار بدین.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType font/woff "access plus 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Avoid bad requests : فایلهایی که وجود خارجی ندارند

تو این بخش میتونید فایلها یا تصاویری که در سایت استفاده کردین ولی در حقیقت وجود خارجی ندارند (مثلا حذف شدن) رو ببینین و درستشون کنین.

Avoid a character set in the meta tag :  عدم تعیین نوع کاراکتر

این میگه مثل اینکه کارکتر فایل یه افزونه رو تو کدها تعیین نکردی ( مثلا بذاری utf8 )، البته این مورد به ندرت تو سایتی دیده میشه ولی اگه بود خیلی ساده با اضافه کردن کد زیر به ابتدای فایل .htaccess برای همیشه از شرش خلاص بشین  :D

# pass the default character set
AddDefaultCharset utf-8

Avoid landing page redirects : ریدایرکت نامناسب

این گزینه تو بیشتر سایتها ۱۰۰% هست و خیلی دیده نمیشه سایتی از این مورد مشکلی داشته باشه. اصولا این مورد تو سایتهایی دیده میشه که بارگزاری سایتشون رو به بدون www به کمک فایل .htaccess قفل کردن. درسته این کار با الگوریتم هایی که برای سئو ارائه میشه کاملا هماهنگ هست ولی در بعضی موارد از لحاظ گوگل تخلف محسوب میشه. زیاد نگران این گزینه نباشین و بهتره بیخیالش باشین.

Avoid CSS @import : مدیریت فراخوانی فایلهای CSS خارجی

خیلی مواقع دیده میشه که وبمسترها مثلا اگه چند فایل استایل خارجی داشته باشن اونی که اصلی هست رو در سمت HTML سایت فراخوانی میکنن و بقیه با دستور “(“import url(“your file adress.css@” از داخل اون فایل استایل اصلی بارگزاری میکنن. اینکار یکی از اشتباهاتی هست که گوگل اون رو یکی از خطاهای اصلی میدونه. برای رفع این مشکل کافیه به آدرسی که GTMetrix داده برین و اون بخش مربوط به @import رو حذف کنین و فایل رو ذخیره کنید. بعد به بخش Head سایتتون برین و با دستور زیر اون هارو جداگانه فراخوانی کنین و یا اینکه اگه امکانش بود با هم ادغام کنین.

<link rel="stylesheet" href="your file adress.css" />

Put CSS in the document head : فراخوانی فایل CSS خارج از بخش head سایت

GTMetrix  زمانی با این گزینه به شما اخطار میده که فایل استایل خودتون رو در بخشی خارج از head سایتتون فراخوانی کرده باشین مثلا در بخش body. برای حل این مشکل کافیه بخشی رو که اخطار داده رو به قسمت head سایت منتقل کنین و خطای موجود در این بخش رو برطرف کنین.

Enable gzip compression : فعال کردن قابلیت gzip

قابلیت gzip باعث میشه فایلهایی که از سمت سرور به مرورگر ارسال میشه به صورت کمپرس شده و فشرده سازی شده به مرورگر ارسال بشه و در حقیقت میزان حجمی که در مرورگر کاربر باید لود شه کمتر میشه و سایت سریعتر لود میشه. برای رفع این گزینه کافیه کد زیر رو به فایل .htaccess اضافه کنی

print
# BEGIN Compress text files
<ifModule mod_deflate.c>
  <filesMatch ".(css|js|x?html?|php|woff|ttf|png|jpg|gif)$">
    SetOutputFilter DEFLATE
  </filesMatch>
</ifModule>
#END Compress text files

YSlow :

آموزش بهینه سازی PageSpeed سایت با GTMetrix

نتایج قرار گرفته تو این بخش در حقیقت نتایج بررسی هایی هستند که این بار با در نظر گرفتن الگوهای سایت یاهو ، روی سایت شما انجام شده.

Use a Content Delivery Network (CDN) : فعال کردن قابلیت CDN

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

اما چون ما تو تحریم هستیم و سرعت بارگزاری سرور های خارج از کشور به دلیل محدودیت های تحریم ها و همچنین خود فیلترینگ داخلی چندان تفاوتی با هم ندارن و هم چون تا حالا سروری برای استفاده از قابلیت CDN در داخل کشور هم نبوده (شایدم بوده و من اطلاع ندارم) برای ماهایی که بالای ۸۰ یا ۹۰ درصد بازدید سایتمون از داخل کشور هست اهمیت نداره و در بعضی مواقع هم دیده شده که حتی سرعت بارگزاری سایت رو هم کم کرده. پس زیاد به خودتون برای استفاده از این روش فشار نیارید. تو وردپرس برای اینکار افزونه های وردپرس زیادی وجود دارن که با یه جستجوی خیلی ساده تو گوگل میتونید به لیست بلند بالای عناوین اونها دسترسی داشته باشین، البته یادتون باشه بیشتر این افزونه های وردپرس از سرور های پولی استفاده میکنن و شما باید مبلغی رو برای استفاده پرداخت کنید.

Make fewer HTTP requests : ترکیب فایلهای مشابه

GTMetrix با این گزینه به شما اعلام میکنه تا جایی که ممکنه فایلهای مشابه رو ادغام یا ترکیب کنید. مثل ترکیب فایلهای استایل یا ترکیب فایلهای جاوا اسکریپت و همچنین از یکتا سازی تصاویر با قابلیت sprites در CSS هم استفاده کنید. دوستانی که از وردپرس استفاده میکنن میتونن افزونه autoptimize را نصب کنن. (این افزونه کارهای خیلی زیاد دیگه هم انجام میده که بعد نصب خودتون به راحتی میتونین متوجه بشین)

Add Expires headers : تعیین زمان برای فایلهای کش شده

این گزینه برابر با گزینه “Specify a cache validator” تو بخش PageSpeed  هست.

Configure entity tags (ETags) : پیکربندی E Tag ها

تا جایی که من اطلاع دارم راه اندازی چندین سرور با استفاده از تنظیمات E Tag می تواند سبب جلوگیری از بروز خطای ۳۰۴ بشه. این کار به صورت دستی خیلی دشواره ولی افزونه w3 total cach تا حدودی این کار رو تو وردپرس انجام میده. البته باز برای ما ایرانی ها کاربرد نداره!

Compress components with gzip : فعال کردن و استفاده از قابلیت gzip

این گزینه برابر با گزینه “Enable gzip compression” تو بخش PageSpeed  هست.

Minify JavaScript and CSS : کاهش حجم کدهای JavaScript و CSS

این گزینه برابر با گزینه “Minify CSS” و “Minify JavaScript” تو بخش PageSpeed  هست.

Reduce DNS lookups : کاهش تعداد درخواست های DNS lookups

GTMetrix از این گزینه هدفش این هست که به شما بگه که تعداد درخواست های بارگزاری فایل رو به سرورهایی دیگه غیر از سرور خودتون کم کنین. یعنی درخواست هایی که برای سرویس هایی چون آمار بازدید، تبلیغات کلیکی، پاپ آپ ها و از این قبیل رو تو سایتتون کم کنین.

نکته : DNSlookup ها باعث افزوده شدن یک تاخیر به درخواست های اولیه ارسالی بسوی یک میزبان (سرور) رو در پی داره که میشه گفت ارسال درخواست به سمت تعداد زیادی از میزبان های مختلف سبب کاهش کارایی یک وب سایت هست.

Avoid empty src or href : خالی نبودن مقدار برای صفات href و src

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

Avoid URL redirects :  کم کردن ریدایرکت های سایت

این گزینه تقریبا برابر با گزینه “Minimize redirects” تو بخش PageSpeed  هست. بهترین روش حلش این هست برین تو کدها بین لینک ها بگردین و هر آدرسی رو که صفحه رو به آدرس جدیدی ریدایرکت میکنه حذف کنین. یا اینکه می تونین برای لینک هاتون target=”_blank” رو قرار بدین تا در صفحه جدید باز بشن مثل کد زیر ( البته این روش بعضی جاها جواب نمیده و باز بهتون ایراد میگیره) :

<a href="Link" target="_blank">عنوان</a>

Make AJAX cacheable : کش کردن AJAX

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

Put CSS at the top : انتقال فراخوانی های استایل به بالاترین حد ممکن

تو این گزینه GTMetrix میگه فراخوانی هایی که برای بارگزاری فایلهای استایل انجام میدین رو به بخش head سایت منتقل کنین. این کار باعث افزایش سرعت بارگزاری سایت میشه.

Put JavaScript at bottom : انتقال  فراخوانی های جاوا اسکریپت به پایین ترین حد ممکن

این گزینه برعکس گزینه بالا میگه فایلهای جاوا اسکریپت رو به پایین ترین مکان یعنی بالای تگ </html> منتقل کنین. این باعث میشه ابتدا سایت بارگزاری بشه بعد بره سراغ فایلهای جاوا اسکریپت پس یادتون باشه اگه این کار به شمای کلی سایتتون صدمه نمیزنه حتما این کار رو انجام بدین.

Remove duplicate JavaScript and CSS : حذف موارد تکرای از JavaScript و CSS

GTMetrix اینجا بهتون میگه برای کاهش حجم ابتدا فایلهای تکراری استایل و جاوا اسکریپت در صورت وجود و بعد توابع تکرای داخل اونها رو پاک کنین تا سرعت سایتتون بالاتر بره.

Avoid AlphaImageLoader filter : عدم استفاده از فیلتر AlphaImageLoader

فیلتر AlphaImageLoader وقتی استفاده میشه که بخوایم از تصاویر شفاف مثل PNG تو سایت استفاده کنیم و بخوایم اون رو در اینترنت اکسپلورر استفاده کنیم. استفاده از دستور AlphaImageLoader باعث میشه عمل رندر صفحه تا لود کامل تصویر متوقف بشه و همچنین حافظه بیشتری رو استفاده میکنه. فک میکنم این مشکل تو نسخه های جدید اینترنت اکسپلورر برطرف شده ولی اگه هنوزم میخواین از اون استفاده کنین کافیه به جای استفاده از دستور AlphaImageLoader ازسی اس اس هک _filter استفاده کنین.البته بیشتر وقتها کلا حتی توصیه نمیشه از فیلتر ها هم استفاده کنین.

Avoid HTTP 404 (Not Found) error : حذف لینک هایی که به خطای ۴۰۴ میرسند

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

Reduce the number of DOM elements : کم کردن عناصر DOM در جاوا اسکریپت

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

Do not scale images in HTML : عدم تغییر اندازه تصاویر با HTML

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

Reduce cookie size و Use cookie-free domains : کاهش حجم کوکی

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

Use GET for AJAX requests : تعریف درخواست های AJAX به صورت GET

تو این گزینه به شما میگه اگه از آجاکس استفاده کردین و درخواستی رو ارسال میکنین این درخواست هارو با متد GET ارسال کنین.

Avoid CSS expressions : عدم استفاده از عبارات CSS برای بهبود سازگاری با مرورگرها

GTMetrix اینجا اخطار میده که از عباراتی که در CSS برای بهبود سازگاری با مرورگر ها بلخص IE وجود دارن استفاده نکنین. این کار علاوه بر افزایش حجم، بعضی خطرات امنیتی رو هم به دنبال داره.

Make favicon small and cacheable : درج favicon برای سایت

این گزینه میگه بهتره برای سایتتون یک آیکن در نظر بگیرین (۱۶*۱۶) تا به عنوان یه نماد کوچیک برای سایتتون در مرورگر نمایش داده بشه و همچنین میگه اون رو در کش مرورگر هم ذخیره کنین تا در هر صفحه دوباره لود نیشه.

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

منبع وزحمت ترجمه و تلاش برای بهترین بودن :mandegarweb.com

مطالب مرتبط
  1. یاسر صنمی گفت:

    با سلام لطفا در مورد The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 10 request(s) and 62.8KiB
    و رفع آن کمک کنید . با تشکر
    https://www.dgload.com

  2. setayesh55 گفت:

    سلام وقت بخیر
    من میخوام کد اصلی سایتم رو تغییر بدم و مکان کد جاوا اسکریپت رو برای پایین آوردن سرعت لود سایت به قبل از تک بادی بیارم
    نمیدونم مسیر همون فایلی که باید تغییر بدم کجاست؟
    https://webyar.net

  3. Subrica گفت:

    آموزش خوبی بود . ممنون

ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017

بالا