برای افزایش سرعت سایت و تست سرعت سایت با آنالیز سایت 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 به شما کمک میکنه تا از PageSpeed یا همون سرعت بارگزاری سایت باخبر بشین و همچنین با ارائه بعضی راه کارها روش هایی رو برای بهبود PageSpeed ارائه میده.
GTMetrix در حقیقت از استانداردهایی که گوگل به عنوان معیار قرار داده استفاده میکنه. این آدرس صفحه بررسی PageSpeed سایت شما به کمک گوگل هست که البته ایرانی ها امکان دسترسی بهش رو ندارن مگه با یکم خلاقیت! همچنین گوگل یه افزونه برای این کار طراحی کرده که همین کار رو انجام میده ، این افزونه هم برای Chrome, Firefox قابل دسترس هست.
اکنون که ما نمیتوانیم از این امکانات گوگل استفاده کنیم پس بهترین گزینه همین استفاده از سایت GTMetrix هست.
آموزش افزایش سرعت سایت gtmetrix
بعد از اینکه آدرس سایت مورد نظرتون رو وارد کردین، روی دکمه test your site کلیک کنین تا عملیات بررسی سایت شروع شه. بعد از مدت کوتاهی صفحه ای به شکل زیر باز میشه که نتایج بررسی انجام شده رو بهتون نشون میده.
نتیجه حاصل از دو بخش اصلی 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 : در این بخش تاریخچه ای از بررسی هایی انجام شده بر روی آدرس وارد شده رو نمایش میده تا از افت و خیز اون در فواصل مختلف اطلاع پیدا کنین.
GTMetrix تو این قسمت لیست تصاویری که ابعاد کوچیکی دارن یا حجم اونها خیلی پایین هست رو به شما نشون میده و میگه با قابلیت sprites که در CSS وجود داره این تصاویر رو ادغام کنید و به عنوان یک تصویر واحد از اون استفاده کنید.
یکی از مزیت های این کار کاهش request هایی هست که به سرور ارسال میشه و در نتیجه افزایش سرعت سایت.
من یه نمونه کوتاه از این ادغام تصاویر رو خدمت دوستان توضیح میدم :
به فرض من این دو تصویر زیر را در سایت استفاده کردم.
به طوری که اولی بک گراند حالت عادی و دومی در حالتی نمایش داده میشه که موس روی اون ناحیه قرار می گیرد.
<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> |
همونطور که میبینید من برای این کار هم مجبور هم هستم موقع بارگزاری سایت دو تا عکس رو لود کنم پس برای رفع این مشکل به کمک فتوشاپ دو تصویر بالا رو به شکل زیر با هم ترکیب میکنم:
با این کار الان به جای دو تا عکس یدونه عکس دارم که باید لود شه و هم حجم این عکس ترکیب شده از دو تا عکس بالا کمتر خواهد بود. خوب الان برای استفاده از این تصویر به جای دو تصویر بالا کافیه به این شکل عمل کنید:
<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 شده به عنوان پترن استفاده میکنین قابل استفاده نیست.
تو اینجا GTMetrix میگه برای تصاویری که تو این بخش اومده طول و عرض تعیین کنین. تعیین طول و عرض هم از این جهت مفیده که مرورگر قبل بارگزاری عکس از فضایی که باید از صفحه برای نمایش اون اختصاص بده آگاهی پیدا میکنه و هم اینکه تاثیر فوق العاده ای برای ایندکس شدن تصاویر شما تو گوگل و موتورهای جستجو داره و این یعنی سئو.
اگه روی عنوان این بخش کلیک کنید و اطلاعات داخل اون رو ببینید، مشاهده میکنین تو هر سطر یدونه آدرس عکس هست و جلوش یه چنین چیزی “(Dimensions: 10 x 10)” نوشته شده. مقدار اولی همون width و مقدار دومی هم height مربوط به هر تصویر هست. برای اینکه این مقادیر رو به هر تصویر اختصاص بدین کافیه ابتدا محل بارگزاری اون عکس رو تو قالب وردپرس بدست بیارین و بعد بهش مقدار بدین به این شکل :
<img src="لینک" alt="توضیح" width="10" height="10" /> |
نکته : بعضی از دوستان میگن دادن اندازه به عکس از طرف CSS کافیه ولی در حقیقت اینطور نیست و شما باید به روش بالا هم طول و عرض تصاویر رو تعیین کنید.
به شخصه توصیه میکنم زیاد پی گیر این بخش نشید، چون آخرش مجبورتون میکنه همه کدهای جاوا اسکریپت رو از سایتتون پاک کنید تا ۱۰۰ درصد بشه.
اگه مایلید میتونیداز یکی از روش های زیر موقع فراخوانی فایل های جاوا اسکریپت استفاده کنید. ( نام فایل 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 کنید، در کل ۲۱ درصد از حجمشون یعنی حدود ۲۱.۶ کیلوبایت کم میشه. حالا همینطور که مشاهده میکنین یه آدرس عکس قرار داده بعد نوشته بعد از بهینه سازی چقدر از حجمش کم میشه و در نهایت خودش یه نسخه بهینه شده عکس رو به صورت optimized version در اختیار شما قرار میده که میتونین اون رو دانلود کنید و با همون عکس تو هایت خودتون جایگزین کنین تا بهینه بشه.
اگه از سیستم وردپرس استفاده میکنین برای اینکه این کار به صورت اتوماتیک انجام شه میتونین از افزونه Smush.it استفاده کنین. یا از سایت هایی مثل ysmush.it برای بهینه سازی تصاویر قبل از آپلود استفاده کنین.
GTMetrix تو این قسمت فایلهای جاوا اسکریپتی که باعث ایجاد ناهماهنگی بین فایلهای جاوا اسکریپت میشه رو نشون میده. برای حل این مشکل کافیه لود اون هارو به تعویق بندازین .
تو این بخش از شما خواسته شده با حذف بخش های اضافی مثل توضیحات و یا فاصله ها حجم کدهای HTML. البته خودش یه نمونه کد بهتون میده که نباید در سایتهایی که از وردپرس و یا هر سیستم مدیرت دیگه ای استفاده میکنن استفاده کنن . چون این کد بهینه شده بعد از کامپایل ایجاد شده و وفقط یک صفحه ایستا هست. برای اینکار بهترین روش به صورت دستی هست ولی کلا توصیه نمیشه برای سایتهایی که در سمت سرور کامپایل میشن این کار رو انجام داد.
این مورد هم مثل مورد بالا با حذف بخش توضیحات و همچنین فاصله های اضافی این کار رو انجام میده. درسته در نهایت کدها به نظر به هم ریخته می آن ولی اینطور نیست.
خود GTMetrix در بخش optimized version مقابل هر آدرس, آدرسی برای دریافت کدهای بهینه شده رو هم بهتون میده , که بهتره از فایلهاتون یک بک آپ بگیرین و بعد این نسخه های بهینه شده رو جایگزین اونها کنین.
این بخش GTMetrix به شما می گوید که فایلهای مربوط به استایل یا همون CSS های خودتون رو قبل از فایلها یا کدهای جاوا اسکریپت سایت قرار دهید تا سایت شما سریعتر بارگزاری بشه.
در حقیقت وظیفه شما این هست که تگ های مربوط به استایل رو بالاتر از تگهای مربوط به جاوا اسکریپت قرار بدین. به همین راحتی..
<head> |
<title>title</title> |
<style> |
// CSS Code |
</style> |
<script type="text/javascript"> |
// javascript Code |
</script> |
</head> |
اگر فایلهای خارجی استایل شما بیش از حد کوچک باشند این گزینه به شما گوشزد میکند که محتوای آنها را کپی و در بخش head سایت خود قرار دهید تا از سرعت بارگزاری اونها افزایش پیدا کنه.
این گزینه هم همانند گزینه ی بالایی هست با این تفاوت که نظر شما را به فایلهای جاوا اسکریپت کوچیک خارجی جلب میکنه.
در این مورد GTMetrix از شما میخواهد مواردی که به شما نشان میدهد را به صورت زنده بین سرور و مرورگر خود قرار دهید. برای این کار کد زیر رو به فایل .htaccess موجود تو شاخه اصلی سایتتون اضافه کنید.
<ifModule mod_headers.c> |
Header set Connection keep-alive |
</ifModule> |
در این بخش 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 ## |
تو این بخش میتونید فایلها یا تصاویری که در سایت استفاده کردین ولی در حقیقت وجود خارجی ندارند (مثلا حذف شدن) رو ببینین و درستشون کنین.
این میگه مثل اینکه کارکتر فایل یه افزونه رو تو کدها تعیین نکردی ( مثلا بذاری utf8 )، البته این مورد به ندرت تو سایتی دیده میشه ولی اگه بود خیلی ساده با اضافه کردن کد زیر به ابتدای فایل .htaccess برای همیشه از شرش خلاص بشین ..
# pass the default character set |
AddDefaultCharset utf-8 |
این گزینه تو بیشتر سایتها ۱۰۰% هست و خیلی دیده نمیشه سایتی از این مورد مشکلی داشته باشه. اصولا این مورد تو سایتهایی دیده میشه که بارگزاری سایتشون رو به بدون www به کمک فایل .htaccess قفل کردن. درسته این کار با الگوریتم هایی که برای سئو ارائه میشه کاملا هماهنگ هست ولی در بعضی موارد از لحاظ گوگل تخلف محسوب میشه. زیاد نگران این گزینه نباشین و بهتره بیخیالش باشین.
خیلی مواقع دیده میشه که وبمسترها مثلا اگه چند فایل استایل خارجی داشته باشن اونی که اصلی هست رو در سمت HTML سایت فراخوانی میکنن و بقیه با دستور “(“import url(“your file adress.css@” از داخل اون فایل استایل اصلی بارگزاری میکنن. اینکار یکی از اشتباهاتی هست که گوگل اون رو یکی از خطاهای اصلی میدونه. برای رفع این مشکل کافیه به آدرسی که GTMetrix داده برین و اون بخش مربوط به @import رو حذف کنین و فایل رو ذخیره کنید. بعد به بخش Head سایتتون برین و با دستور زیر اون هارو جداگانه فراخوانی کنین و یا اینکه اگه امکانش بود با هم ادغام کنین.
<link rel="stylesheet" href="your file adress.css" /> |
GTMetrix زمانی با این گزینه به شما اخطار میده که فایل استایل خودتون رو در بخشی خارج از head سایتتون فراخوانی کرده باشین مثلا در بخش body. برای حل این مشکل کافیه بخشی رو که اخطار داده رو به قسمت head سایت منتقل کنین و خطای موجود در این بخش رو برطرف کنین.
قابلیت gzip باعث میشه فایلهایی که از سمت سرور به مرورگر ارسال میشه به صورت کمپرس شده و فشرده سازی شده به مرورگر ارسال بشه و در حقیقت میزان حجمی که در مرورگر کاربر باید لود شه کمتر میشه و سایت سریعتر لود میشه. برای رفع این گزینه کافیه کد زیر رو به فایل .htaccess اضافه کنی
# 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 |
نتایج قرار گرفته تو این بخش در حقیقت نتایج بررسی هایی هستند که این بار با در نظر گرفتن الگوهای سایت یاهو ، روی سایت شما انجام شده.
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
روزی که محتوا های این سری از وب یار را برای من ارسال کردند ، با دیدن این عنوان های جذاب ، با خودم گفتم که تمام این سری از محتوا ها را باید خودم بنویسم ؛ چراکه اگر اون رو درست بشناسید و از این روش استفاده کنید ، به تنهایی این توانایی را دارد که سیستم بازاریابی و فروش شما رو متحول کند.در…
برنامه های موبایل در چه ساختار هایی طبقه بندی می شوند؟آیا می توان با هرزبانی برای هر پلتفرمی ، دست به توسعه اپلیکیشن زد؟بهتره از چه زبان برنامه نویسی برای توسعه اپ های موبایل استفاده کنیم؟ اپلیکیشن های native اپلیکیشن های hybrid زبان های محبوب و کارآمد برنامه موبایل 1.Javascript در اپلیکیشن های مولتی پلتفرم 2.جاوا در اپلیکیشن های اندرویدی 3. Swift در اپلیکیشن های…
شما هم این روز ها ، با چالش فروش پایین و کمبود مشتری روبه رو شدید؟تازه کسب و کار خود را راه انداختید و به دنبال بهترین و ارزان ترین روش های تبلیغاتی هستید؟تازه وارد هستید و کم هزینه بودن تبلیغات ، برای شما بسیار مهم است؟بستر های تبلیغاتی را نمی شناسید؟تبلیغات را بی فایده می دانید؟ اصلا ارزان ترین روش های تبلیغاتی برای شما…
آموزش خوبی بود . ممنون
سلام وقت بخیر
من میخوام کد اصلی سایتم رو تغییر بدم و مکان کد جاوا اسکریپت رو برای پایین آوردن سرعت لود سایت به قبل از تک بادی بیارم
نمیدونم مسیر همون فایلی که باید تغییر بدم کجاست؟
http://webyar.net
در فایل footer.php
با سلام لطفا در مورد 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
و رفع آن کمک کنید . با تشکر