0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

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

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 2276
تاریخ بروزرسانی ۱۳ مهر ۱۳۹۹

برای افزایش سرعت سایت و تست سرعت سایت با آنالیز سایت 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

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

بعد از اینکه آدرس سایت مورد نظرتون رو وارد کردین، روی دکمه test your site کلیک کنین تا عملیات بررسی سایت شروع شه. بعد از مدت کوتاهی صفحه ای به شکل زیر باز میشه که نتایج بررسی انجام شده رو بهتون نشون میده.

 

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

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

به فرض من این دو  تصویر زیر را در سایت استفاده کردم.

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

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

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

<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>

 

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

 

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

 

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

<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 : بهینه سازی حجم تصاویر

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

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

 

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

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

 

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

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

 

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

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

 

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

 

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

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

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

 

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

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

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

 

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

 

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

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

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

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

 

 

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

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

آموزش افزایش سرعت سایت 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 برای همیشه از شرش خلاص بشین ..

 

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

 

# 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 :

 

آموزش افزایش سرعت سایت 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

0/5 (0 Reviews)
مطالب مرتبط
انجام کلیه ی تبلیغات کاندیدای شورای شهر و کشور
مطالعه :

انجام تبلیغات کاندیدای شورای شهر استان اصفهان انجام تبلیغات کاندیدای شورای شهر و کشور توسط یکی از حرفه‌ای‌ترین تیم‌های تبلیغات و دیجیتال مارکتینگ استان اصفهان امکان‌پذیر می‌باشد. کاندیداهای محترم شورای شهر می توانند جهت دریافت مشاوره تخصصی و همچنین انجام تبلیغات تخصصی با تیم تبلیغات کاندیداهای شورای شهر و کشور تماس حاصل فرمایند.   خدمات و تبلیغات گسترده ی تیم دیجیتال مارکتینگ وب یار در این زمینه شامل موارد زیر است: ارسال انبوه پیامک های تخصصی، مهندسی اجتماعی و تبلیغاتی به مشاغل و فعالان کسب کار با هدف جذب و ایجاد قشر حمایت کننده بر اساس منطقه خاص ارسال تبلیغات انبوه تخصصی بدون محاسبه هزینه هر ارسال در واتساپ و ایجاد گروه های حمایتی ومدیریت آنها ارسال تبلیغات کاندیدای شورا به شماره ها و آی دی های گروه های تلگرام و کاربران بر اساس منطقه و شهر و افزون افراد بر اساس منطقه مسکونی و شهر به گروه های حمایتی شما کاندیدای محترم شورای شهر و کشور. طراحی وبسایت سریع و سبک برای کاندیداها با هدف پاسخگویی و پرسنال برندینگ چند جانبه با قابلیت استفاده در عرصه های محتلف شرکتی یا شخصی با قیمت مناسب. بررسی روش های تبلیغاتی و سخنرانی و مشاوره برای مردم و همچنین یادگیری روش های بازخورد گیری از تبلیغات اینترنتی برای انتخابات شوراها وب یار یک تیم متشکل از متخصصین دیجیتال مارکتینگ و بازاریابی که […]

تفاوت وب سایت و وب اپلیکیشن چیست ؟
مطالعه :

وب سایت یا وب اپلیکیشن کدام یک انتظارات شما را برآورده می کند؟ تفاوت اصلی چیست و کدام یک بهترین راه حل برای تجارت شما خواهد بود؟ در این مقاله وب یار به بررسی تفاوت وب سایت و وب اپلیکیشن می پردازیم.   وب سایت چیست؟   وب سایت گروهی از صفحات وب قابل دسترسی جهانی است که به هم پیوسته اند و دارای یک نام دامنه واحد هستند. توسط فردی ، تجاری یا سازمانی قابل توسعه و نگهداری است. یک وب سایت در یک وب سرور منفرد یا چندگانه میزبانی می شود.هدف اصلی آن ارائه اطلاعات به کاربران است. در وب سایت ، ما می توانیم متن و پرونده های مختلف چندرسانه ای ، مانند تصاویر یا فیلم ها را پیدا کنیم. چه زمانی به وب سایت نیاز دارید؟ وب سایت یک روش موثر برای ارائه محصولات و خدمات شما است. این می تواند به شما کمک کند: مشتری جدید پیدا کنید بهبود شناخت برند افزایش فروش و درآمد ارائه اطلاعات مهمی مانند: اطلاعات شرکت ، اطلاعات تماس ، لیست قیمت ، پیشنهادات ویژه و .. وب اپلیکیشن چیست؟   وب اپلیکیشن ، نرم افزار یا برنامه ای است که در مرورگر اجرا می شود و از طریق رابط کاربری سرویس خاصی را به کاربر ارائه می دهد. معمولاً به سرور مرکزی متصل می شود تا محتوا را به کاربر […]

همه چیز دربار فیگما
مطالعه :

در زمینه طراحی رابط کاربری نرم افزار های مختلفی وجود دارند که قبلا با آن ها آشنا شده اید در ادامه یه چند مورد خواهیم پرداخت. فیگما یکی از نرم افزار های رابط کاربری است که از آن برای طراحی رابط کاربری وب سایت ها و اپلیکیشن ها استفاده می شود.در این مقاله به بررسی همه چیز درباره فیگما می پردازیم. فیگما چیست؟ همان طور که گفته شد فیگما یک نرم افزار برای طراحی رابط کاربری می باشد. این نرم افزار به صورت یک وب اپ می باشد که در بروزر خود اجرا می کنید. بر خلاف تصور عموم یک وب اپ نمی تواند گرافیک یک وب سایت یا اپلیکیشن را به خوبی و با کیفیت عالی ارائه دهد. اما با رفتن به سایت figma و دیدن امکانات این سایت به این باور می رسید که فیگما ، یکی از قدرتمند ترین نرم افزار های طراحی رابط کار بری می باشد. طریقه دسترسی به نرم افزار فیگما: این نرم افزار را هم می توانید به صورت تحت وب باز و مرورگر خود باز کنید. فقز در هر دو صورت باید سیستم شما به اینترنت متصل باشد.     ویژگی ها: فیگما یک نرم افزار تحت وب گسترده می باشد که ویژگی های بسیار جذابی دارد.اکنون به چند ویژگی این اپلیکیشن بی نظیر اشاره می کنیم. قابلیت استفاده در همه سیستم […]

مطالعه :

اگر قصد راه اندازی فروشگاه آنلاین خود را دارید ، ممکن است به یک دو راهی برخورد کرده باشید: ووکامرس یا پرستاشاپ ؟ هر دو سیستم عامل عالی هستند و هیچ برنده مشخصی وجود ندارد. این انتخاب به ماهیت تجارت آنلاین و قدرت فنی شما بستگی دارد. در این مقاله به مقایسه ووکامرس و پرستاشاپ می پردازیم. ووکامرس چیست؟     ووکامرس یک افزونه تجارت الکترونیکی است که به شما امکان می دهد فروشگاه تجارت الکترونیک را در وب سایت تحت وردپرس راه اندازی کنید. ووکامرس در سال 2011 توسط توسعه دهنده تم WooThemes منتشر شد. بعداً ، در سال 2015 ، توسط Automattic ، شرکت صاحب وردپرس خریداری شد. ووکامرس محبوب ترین پلتفرم تجارت الکترونیکی در جهان است که میلیون ها فروشگاه آنلاین را قدرت می دهد. وردپرس بزرگترین CMS جهان است که بستر مناسبی برای ساخت هر نوع وب سایت است و با چند کلیک می توانید آن را به یک فروشگاه آنلاین زیبا و کاربردی تبدیل کنید. به همین دلیل WooCommerce به عنوان بهترین راه حل تجارت الکترونیکی برای وردپرس در نظر گرفته شده است. هنگام نصب آن ، کلیه ابزارهای لازم برای راه اندازی فروشگاه آنلاین خود را دریافت خواهید کرد. از جمله: گزینه های مختلف حمل و نقل ، محصولات ، سیستم مدیریت سفارش ، گزارش های تجاری و … از آنجا که ووکامرس یک […]

بروزرسانی سایت
مطالعه :

یکی دیگر از مهم ترین کارها برای افزایش سئو و بهبود جایگاه سایت بروزرسانی سایت و محتواهای آن است. برای آنکه بتوانید در میان رقبای خود جایگاه خوبی داشته باشید و کسب و کار اینترنتی موفقی داشته باشید نیاز است که از اهمیت بروزرسانی سایت غافل نشوید. در ادامه چند استراتژی مهم و کاربردی را به شما عزیزان ارائه می کنیم.   بروزرسانی سایت به چه معناست؟ منظور از بروزرسانی در واقع تغییر در محتواها، کلمات کلیدی، لینک ها، بروزرسانی سرور و … است. این کار به معنای از نو طراحی کردن نیست در حقیقت شما با توجه به بازخوردی که از سایت و مخاطبین خود دیده اید یک سری تغییرات در راستای بهبود و رشد سایت تان انجام می دهید. استراتژی بروزرسانی سایت وقت آن رسیده که سایت خود را به روز و همگام با رقبای خود جلو ببرید. برای این کار انجام کارهای زیر الزامی و تا حد زیادی کمک کننده است. 1-بررسی گوگل آنالیتیکس با بررسی گوگل آنالیتیکس شما می توانید رفتار کاربران را به راحتی در سایت خود مشاهده کنید. این که چه صفحه ای محبوبیت بیشتری دارد یا این که کدام صفحه نرخ کلیک بالایی دارد و … با بررسی و آنالیز رفتار کاربران می توانید صفحاتی که نیاز به بروزرسانی دارند را نیز به راحتی کشف کنید.     2-حذف محتواهای قدیمی به مرور […]

مطالعه :

وردپرس همان طور که میدانید یک سیستم مدیریت محتوا بر پایه زبان برنامه نویسی پی اچ پی می باشد. شغل های گوناگونی در زمینه وردپرس وجود دارند. در این مقاله ما به پنج شغل پردرآمد وردپرس می پردازیم.شغل هایی که قرار است در مورد آن ها به شما توضیح دهیم و شما را با آن ها بیش تر آشنا کنیم عبارت اند از: ساخت قالب وردپرس ساخت افزونه اختصاصی برای وردپرس ترجمه افزونه های وردپرس به فارسی مدیریت سایت های وردپرسی مسئول امنیت وردپرس     پنج شغل پردرآمد وردپرس: ساخت قالب وردپرس: یکی از رایج ترین و پر درآمد ترین مشاغل وردپرس ساخت قالب وردپرس می باشد. مراحل ساخت یک قالب طبق مقاله طراحی سایت در اصفهان را برای شما توضیح دادیم. اما کمی بیش تر در مورد آن بخواهیم برای شما توضیح دهیم، بعد از این که بخش ویژوال سایت را تکمیل کردیم، به بخش داینامیک سازی قالب ها میرسیم، در ورد پرس همانطور که گفتیم زبان php استفاده شده است. یک سری توابع به صورت پیشفرض در خود فایل های وردپرس وجود دارند. بخش هایی که می شود را به وسیله توابع آماده، آماده می کنیم. برخی از توابع سفارشی در اصطلاح پست تایپ ها را نیز برای آن ها می نویسیم. در موردپست تایپ ها بیشتر بدانید. پس از این که توابع را پیاده سازی کردید […]

دیدگاه ها

۴ پاسخ به “آموزش افزایش سرعت سایت gtmetrix”

  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
    و رفع آن کمک کنید . با تشکر

  2. setayesh55 گفت:

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

  3. Subrica گفت:

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

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

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