آموزش بهینه سازی PageSpeed سایت با GTMetrix (بخش چهارم)
امیدوارم تا اینجای کار مباحث مطرح شده برای شما دوستان گلم مفید بوده باشه. امروز میخوام کنار شما عزیزان مباحث باقی‌مونده بخش PageSpeed رو بررسی کنیم.
آموزش بهینه سازی سایت با GTMetrix – قسمت چهارم
Specify a cache validator : تعیین زمان برای فایلهای کش شده
تو این بخش GTMetrix از شما می‌خواد برای فایلهایی که روی مرورگر کاربر کش کردین اعتبار تعین کنین. برای رفع این خطا کافیه با توجه به نیاز خودتون کدی شبیه کد زیر رو به فایل .htaccess سایت‌تون اضافه کنید.
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf|woff|ttf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "max-age=2592000, private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers
Specify a Vary: Accept-Encoding header : خطا در تعیین نوع کاراکتر برای فایل‌ها
GTMetrix زمانی این خطا رو بهتون نشون میده که یا نوع کاراکتر فایل نشون داده شده درج نشده باشه و یا اینکه از چند نوع متفاوت به صورت یکجا در سایت استفاده کرده باشین.
اگه نبود به بخش هدر فایلی که GTMetrix نشون میده برین، کد زیر رو مثلا برای “utf-8” درست بعد از تگ <head> قرار بدین.
<meta charset="utf-8">
اگه هم مشکل چند تا بودن نوع کاراکتر بود باید نوعی که مد نظرتون هست رو بذارین باشه و بقیه رو پاک کنین.
Specify a character set early : تعیین نوع کاراکتر برای فایل‌ها
این هم مثل گزینه بالایی هست و میگه شما نوع کاراکتر رو تعیین نکردید. مثلا برای سایت‌های فارسی همون کد بالا رو به فایلهایی که نشون میده اضافه کنین.
Remove query strings from static resources : وجود کاراکتر “؟” در انتهای فایلهای استاتیک
این گزینه از GTMetrix به شما نشان میده که تو پایان فایلهای استاتیک (مثل فایلهای جاوا اسکریپت) شما علامت “؟” وجود داره. یعنی در انتهای آدرس اون فایل علامت پرسش وجود هست. این علامت در آدرس باعث میشه که اون فایل در کش مرورگر قرار نگیره و در هر بار مراجعه، دوباره از سرور فراخوانی شه. برای حل این مشکل میتونید یا بصورت دستی علامت سوال را از انتهای نام فایل حذف کنید و هم میتونید از افزونه هایی در این زمینه استفاده کنید.
Minimize redirects : کم کردن ریدایرکت‌های سایت
این گزینه بهتون میگه که باید ریدایرکت‌هایی که تو سایت‌تون انجام دادین رو به حداقل یا اگه ممکنه به صفر برسونین. مثلا بیشتر مواقع در هنگام استفاده از فرم تماس با ما در سایت‌ها و یا تو انجمن‌ها می‌بینین نوشته بعد از فلان ثانیه به صفحه جدید منتقل میشین، اصولا اونها طبق این گزینه باید این ریدایرکت هاشونو حذف کنن.
Minimize request size : کم کردن تعداد درخواست‌ها از سرور
GTMetrix به کمک این گزینه به شما میگه تعداد درخواست‌هایی که برای بارگزاری عکس‌ها، فایلهای استایل، جاوا اسکریپت و… به سرور ارسال میشن رو کم کنین. قابلیت‌هایی چون یکپارچه سازی تصاویر، ادغام فایلهای استایل یا جاوا اسکریپت در صورت امکان، حذف فونت‌ها و فایلهای اضافی می‌تونه مفید واقع بشه.
Serve resources from a consistent URL : محتوای مشابه با لینک‌های متعدد
این بخش فایلهایی رو بهتون نشون میده که محتوای یکسانی دارن ولی آدرس‌های متعددی به اونها داده شده (نمونه: یک عکس تو دو تا آدرس ذخیره شده و لود میشه). برای رفع این مورد خیلی ساده کافیه یکی از لینک‌ها رو استفاده و بقیه اونها رو پاک کنین.
Serve scaled images : تفاوت اندازه اصلی تصویر با اندازه استفاده شده در سایت
اگه تصویری رو سایت داشته باشین که اندازه اصلی اون با اندازه‌ای که از طریق CSS به اون نسبت داده باشین فرق داشته باشه توسط این گزینه بهتون نشون داده میشه. برای حل یا باید اندازه تعیین شده رو حذف کنین و یا اینکه عکس رو در همون اندازه‌ای که استفاده کردین ذخیره کنین.
این مورد بیشتر زمانی خودش رو نشون میده که شما یک تصویر بزرگ رو در اندازه کوچیکی استفاده کرده باشین. در حقیقت این کار حجم اضافی رو برای بارگزای به کاربر تحمیل میکنه.
خوب دوستای گلم تا اینجای کار در کنار هم تمام گزینه‌های موجود در بخش PageSpeed رو که الگوهای گوگل برای بهینه سازی سایت بودن رو باهم بررسی کردیم. به امید خدا از قسمت بعدی شروع به بررسی بخش YSlow می‌کنیم، چون بیشتر بخش‌ها یکی هستن و تفاوت چندانی ندارن فک کنم تو قسمت آینده بتونیم این مبحث رو تموم کنیم. پس تا دیدار دوباره.
بخش اول آموزش بهینه سازی PageSpeed سایت با GTMetrix
دیدگاه‌ها در "آموزش بهینه سازی PageSpeed سایت با GTMetrix (بخش چهارم)"
دیدگاه‌ها بسته شده‌اند.
سلام
علی آقا من یک سوال نا مربوط با مطلبتون دارم.
میخوام بپرسم شما چطوری فیدبرنرتون را راستچین کردید و فونت تاهما را بهش اضاف کردید؟
ممنون
سلام
ببینید فیدبرنر هم عین قسمت های دیگه سایت متشکل از یک سری تگ هست. شما کافیه یه کلاس یا یه صفت استایل بهش اضافه کنین و استایل های مورد نظرتون رو از طریق اونها اعمال کنین.
RTL-Feed-Persian
با سلام
خیلی ممنون بابات مطالب خوب و کاربردیت
بنده سایتم رو تو gtmetrix چک کردم
تقریباً همه گزینه ها به 99 یا 100 درصد رسیدند به جز Specify a Vary: Accept-Encoding header و gzip
برای رفع مشکل Specify a Vary: Accept-Encoding header دستوری که دادید رو انجام دادم ولی باز هم رفع نشد
حتی سایت w3 validator هم یک اخطار در رابطه با انکودینگ بهم داده
لطفاً اگه میشه راهنماییم کنید که چطور رفعش کنم
سایت بنده : animationiha.ir
با احترام
سلام
کد زیر رو در بالاترین خط فایل .htaccess شاخه اصلی وردپرس قرار بدین:
[html]
# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset utf-8
# Force UTF-8 for a number of file formats
AddCharset utf-8 .atom .css .js .json .rss .vtt .xml
[/html]
با سلام
دوست عزیز ممنون بابت پاسخگویی
بنده این کد رو وارد کردم ولی تغییری اعمال نشد
کد زیر رو هم در فایل .htaccess شاخه اصلی وردپرس ( همونجایی که فایل wp-config.php هم هست ) قرار بدین :
[php]
Header append Vary: Accept-Encoding
[/php]
با یکی از این دو کد باید مشکل شما حل بشه در غیر این صورت فایل htaccess شما غیر فعال هست و دستورات اون اجرا نمیشن برای تست این مورد به آدرس زیر مراجعه کنید و کد مربوط به فعال کردن قابلیت gzip رو هم اضافه کنید اگر این دستور اجرا نشد باید با مدیر سرورتون تماس بگیرن و بگین دستورات فایل htaccess شما اجرا نمیشن.
http://mandegarweb.com/wordpress/wordpress-learning/22-%D8%AF%D8%B3%D8%AA%D9%88%D8%B1-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A8%D9%87%DB%8C%D9%86%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D9%81%D8%A7%DB%8C%D9%84-htaccess/
سلام
خیلی ممنون…
دستور دوم رو وارد کردم مشکل رفع شد.
متاسفانه چون بنده در حال حاضر وب سایتم هنوز کامل راه اندازی نشده سرویس هاست معمولی رو خریداری کردم و قابلیت Gzip فعال نمیشه
با تشکر…
سلام
خیلی ممنون…
دستور دوم رو وارد کردم مشکل رفع شد.
متاسفانه چون بنده در حال حاضر وب سایتم هنوز کامل راه اندازی نشده سرویس هاست معمولی رو خریداری کردم و قابلیت Gzip فعال نمیشه
با تشکر…
سلام خیلی ممنون بابت این آموزش عالی بود 😉
ممنون از سایت خوبتون
ممنونم از مطالب خوبتون/ من افزونهAutoptimizeرا نصب کردم کارش خیلی خوب بود ولی 500 مگ حجم سایتم بود یه دفعه شد1000مگ! کلی فایل ساخت.بعدغیرفعالش کردم وضعیت برگشت به قبل! چطور میشه بدون عوارض ازش استفاده کنم؟
میشه لطفاً بگید من این مورد رو چه طور باید درست کنم؟ http://s6.picofile.com/file/8178635292/new_problem.JPG
مربوط به Specify a Vary: Accept-Encoding header .
دوست عزیز بهتره قبل از ارسال دیدگاه جدید، یه نظری به دیدگاه های ارسال شده بندازید!!
یکی از دو کد زیر رو در فایل .htaccess شاخه اصلی وردپرس ( همونجایی که فایل wp-config.php هم هست ) قرار بدین :
[php]
# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset utf-8
# Force UTF-8 for a number of file formats
AddCharset utf-8 .atom .css .js .json .rss .vtt .xml
[/php]
یا
[php]
Header append Vary: Accept-Encoding
[/php]
ممنون مطلب مفیدی بود
با سلام چطور میشه علامت سئوال “؟” رو بصورت دستی از آدرس فایل های استاتیک حذف کرد؟ وبسایت من بسیار از این مشکل رنج میره. خیلی ممنون میشم اگه راهنمایی بفرمایید.
درود
این دستور رو تو فایل functions.php پوستتون قرار بدید:
[php]
function _remove_script_version( $src ){
$parts = explode( ‘?’, $src );
return $parts[0];
}
add_filter( ‘script_loader_src’, ‘_remove_script_version’, 15, 1 );
add_filter( ‘style_loader_src’, ‘_remove_script_version’, 15, 1 );
[/php]