جی تی متریکس و انواع خطاهای آن 2

آگوست 9, 2022

***آموزش رفع خطای Specify a character set early در GTmetrix

یکی دیگه از خطاهایی که هنگام تست سرعت سایت در GTmetrix ممکنه باهاش مواجه بشید با عنوان Specify a character set early به وجود میاد که مربوط به متاتگ character set هست که برای برطرف کردن این خطا باید متاتگ character set رو به صورت یک درخواست HTTP در سایت ارسال کنیم.

کاری که Specify a character set early در سایت انجام میده اینه که به عنوان یک استاندارد بین المللی شناخته شده میاد و مواردی که مربوط به تبادل اطلاعات چندزبانه بودن یک سایت هست و از قبل تعریف شده‌اند رو برطرف میکنه. به عبارت دیگه، این استاندارد بین المللی مشخص میکنه که بسته به زبان محتویات سایت چطور باید به کاربران نشون داده بشه که این کار توسط مرورگر شناسایی خواهد شد.

این استاندارد بین المللی چند نوع مختلف داره که پر استفاده‌ترین حالتش UTF-8 هست که حتما در یادگیری زبان HTML بهش برخوردید. در ابتدای هر سند HTML ما میایم و به کمک کد زیر character set رو برای سند HTML روی حالت UTF-8 مشخص می‌کنیم.

</meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

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

در بیشتر موارد این خطا به رنگ سبز هست و مشکلی باهاش نخواهید داشت. اما اگر با این گزینه به مشکل برخوردید و با رنگ قرمز بهتون نشون داده شد، برای حل مشکل کاری که باید انجام بدین اینه که متاتگ character set را به شکل درخواست HTTP برای کاربر ارسال کنید.

یعنی باید بیایم و با استفاده از زبان سرور و نوع سرور این درخواست رو به صورت header HTTP مشخص کنیم. سپس در اولین بازدید کاربر از سایت این حالت مشخص میشه و دیگه تو بازدید از صفحات دیگه نیاز نیست دوباره درخواست جدیدی برای مشخص شدن نوع character set ارسال بشه. بسته به زبان مورد استفاده و سروری که ازش استفاده می‌کنید میتونید از راهکارهای زیر استفاده کنید.

در زبان php

در صورتی که از زبان php در سایت خودتون استفاده می‌کنید و با خطای Specify a character set early مواجه شدید، میتونید با استفاده از دستور زیر این درخواست رو در header ایجاد بکنید.

header("Content-Type: text/html; charset=utf-8");

سرور آپاچی

اما اگه از وب سرور Apache استفاده می‌کنید باید کد زیر رو در فایل htaccess. وارد کنید.

AddType 'text/html; charset=UTF-8' html

سرور Nginx

اگر زبان مورد استفاده در سایت شما چیزی غیر از php هست، مثل asp یا پایتون و… باید قبل از هر کاری ببینید که نوع وب سرور استفاده شده چی هست. اگر وب سرور از نوع Nginx استفاده می‌کنید، با استفاده از کد زیر در بخش config سرور میتونید این درخواست رو ایجاد کنید.

more_set_headers -t 'text/html' 'Content-Type: text/html; charset=utf-8';

****آموزش رفع خطای Accept-Encoding header در gtmetrix

یکی از خطاهای بسیار مهمی که موقع تست سرعت سایت با GTmetrix باهاش مواجه میشید و بسیار هم مهمه با عنوان Accept-Encoding header در جی تی متریکس به شما نمایش داده میشه که مربوط به قابلیت فشرده سازی فایل‌ها در هاست یا همون Gzip هست. اگر با Gzip آشنایی ندارید پیشنهاد می‌کنم برای آشنایی بهتر موضوع از مقاله آموزش رفع خطای Enable gzip compression در GTmetrix استفاده کنید.

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

در این آموزش قصد دارم به نحوه برطرف کردن خطای Accept-Encoding header در جی تی متریکس بپردازم که با استفاده از این آموزش میتونید اقدام به فعال سازی حالت Gzip کرده و در نهایت مشکل Specify a Vary: Accept-Encoding header رو برطرف بکنید.

همونطور که اشاره کردم وقتی قابلیت Gzip در هاست و سرور شما فعال نباشه، وقتی درخواست‌های header را بررسی کنید گزینه vary :accept encoding در سایت فعال نخواهد بود و به شما نشون داده نمیشه. اما اگر این قابلیت در هاست و سرور فعال باشه با تصویری مثل زیر باید مواجه بشید.

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

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

اگر هم سایتتون رو با استفاده از pingdom تست کنید این خطا به صورت تصویر زیر نشون داده خواهد شد.

بررسی فعال بودن Accept-Encoding header

قبل از اینکه به برطرف کردن خطا بپردازید باید این مسئله رو هم بدونید که آیا قابلیت Gzip که راهکار حل خطای Accept-Encoding header هست داخل هاست شما فعال هست یا خیر. برای این منظور به وبسایت giftofspeed.com/gzip-test مراجعه کنید و سپس مشابه چیزی که در تصویر زیر مشاهده می‌کنید آدرس کامل سایت خودتون را در فیلد مربوطه وارد کرده و روی آیکون جستجو کلیک کرده و منتظر بمونید تا سایت آنالیز شده و نتیجه به شما اعلام بشه. در صورتی که این قابلیت فعال باشه میزان تاثیری که فشرده سازی روی آدرس اصلی سایت شما خواهد داشت رو هم نشون میده.

رفع خطای Accept-Encoding header در سرور آپاچی

در صورتی که سرور شما آپاچی هست کافیه با اضافه کردن کد زیر به فایل htaccess. ارور Accept-Encoding header رو در وب سرور آپاچی برطرف کنید. این فایل همون فایل htaccess. موجود در هاست شما هست که در روت هاست قرار داره و برای دسترسی بهش کافیه به File Manager هاست مراجعه کنید. سپس گزینه Edit رو برای ویرایش فایل انتخاب کرده و کدهای زیر رو به انتهای این فایل اضافه کنید.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/json
  Header append Vary: Accept-Encoding
</IfModule>

این کد با استفاده از ماژول mod_deflate در آپاچی، فشرده‌سازی Gzip را برای انواع مختلف فایل‌های متنی فعال می‌کند. همچنین خط Header append Vary: Accept-Encoding باعث می‌شود تا هدر مورد نظر به پاسخ‌های HTTP اضافه شود که دقیقا همون چیزی هست که GTmetrix برای رفع ارور Specify a Vary: Accept-Encoding header انتظار داره.

نکات مهم

اطمینان حاصل کنید که ماژول mod_deflate در سرور آپاچی فعال باشد. اگر از هاست اشتراکی استفاده می‌کنید، در اغلب موارد این ماژول به صورت پیش‌فرض فعاله.
اگر پس از افزودن کد و ذخیره فایل .htaccess تغییرات اعمال نشد، کش مرورگر و کش سایت (مثل کش افزونه‌های وردپرس) رو پاک کنید.

*****Gzip چیست؟ و چه کاربردی دارد؟

یکی دیگه از خطاهایی که ممکنه موقع تست سرعت سایت با GTmetrix به شما نشون داده بشه با عنوان Compress components with gzip هست. از اونجایی که این خطا در ستون Yslow جی تی متریکس نمایش داده میشه جزو الگوریتم‌های یاهو برای افزایش سرعت سایت به حساب میاد. اگر به معنای لغوی این خطا دقت کنید، از شما خواسته میشه که کامپوننت‌های خودتون رو با استفاده از قابلیت Gzip سایت فشرده سازی کنید. ای قابلیت درست مشابه همون حالت فشرده سازی فایل‌ها به صورت فایل zip هست که باعث میشه حجم فایل‌هاتون کمتر بشه.

حتما با فرمت فشرده سازی zip که برای کاهش حجم فایل ازش استفاده می‌کنید آشنایی دارید. gzip هم دقیقا کارکردی مشابه این فرمت فایل داره که با استفاده از الگوریتم مورد استفاده توسط همین روش فشرده‌سازی برای کاهش حجم صفحات سایت‌ها مورد استفاده قرار میگیره که اونو با نام gzip می‌شناسیم. امروزه همه مرورگرها از این قابلیت پشتیبانی می‌کنند.

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

هرچی حجم این فایل‌های استفاده شده در صفحات بیشتر باشه زمان بیشتری صرف لود کامل سایت خواهد شد. بنابراین باید حجم صفحات خودمون را با استفاده از Compress components with gzip کاهش بدیم تا در مدت زمان کوتاه‌تری یک صفحه وب برای کاربر لود شده و در دسترس قرار گیرد. با استفاده از gzip کلیه فایل‌های مربوط به html، css و جاوا اسکریپت فشرده شده و کدهای تکراری اون نادیده گرفته می‌شوند که در نهایت منجر به افزایش سرعت سایت خواهد شد.

در فایل‌هایی که مربوط به برنامه نویسی هستند کدها به کاراکترهای خلاصه‌تر و کوتاه‌تر با استفاده از فناوری فشرده سازی حجم صفحات تبدیل خواهند شد. به عنوان نمونه اگر فایل شما حاوی متنی باشه که عبارت MM I ZZZZZ BB A nnn f AAA در اون درج شده باشه شامل ۲۵ کاراکتر هست، به صورت خلاصه شده تبدیل شده و به شکل ۳M I 5Z 2B A 3n f 3A برای مرورگر ارسال خواهد شد که تا ۵ کاراکتر(با احتساب فاصله) خلاصه شده است. سپس مرورگر که از قابلیت Gzip پشتیبانی میکنه این موضوع رو درک کرده و کدها را در حالت استاندارد پردازش و در نهایت ساختار یک سایت رو به درستی نمایش خواهند داد.

بررسی فعال بودن Compress components with gzip

برای اینکه ببینید gzip تا چه میزان در افزایش سرعت سایت وردپرس تاثیرگذار خواهد بود یک بار سایت خودتون را که از gzip استفاده نشده آنالیز و بررسی کنید. برای این منظور به وبسایت sitechecker.pro/gzip-test مراجعه کنید و سپس مشابه چیزی که در تصویر زیر مشاهده می‌کنید آدرس کامل سایت خودتون را در فیلد مربوطه وارد کرده و روی آیکون جستجو کلیک کرده و منتظر بمونید تا سایت آنالیز شده و بر اساس افزونه‌های وردپرس و قالبی که از اون استفاده می‌کنید به شما بگه که با استفاده از Compress components with gzip تا چه میزان قادر هستید تا حجم صفحات خود را کم کنید.

از اونجایی که Gzip بر روی سرورهای هاست فعال است در تستی که انجام دادم ۲۸٫۱ درصد از حجم صفحات من در مجموع کم خواهد شد. اما بر روی هاستی که gzip فعال نباشه تا ۷۰ درصد هم میشه حجم صفحات را کم کنید.

یکی دیگه از روش‌های بررسی هم با استفاده از خود مرورگر هست که میتونید با راست کلیک کردن در صفحه سایت و انتخاب گزینه Inspect Element سورس صفحات رو ببینید. سپس مشابه تصویر زیر روی سربرگ Network کلیک کرده و حالا یک بار سایت رو بدون بستن پنجره Inspect Element رفرش کنید. در صورتی که content-incoding: gzip رو مشاهده کردید نشون دهنده فعال بودن Compress components with gzip در سایت هست.

از این بخش میتونید میزان فشرده سازی فایل‌ها را به صورت قبل و بعد هم مشاهده کرده و مقایسه کنید. برای این کار هم کافیه روی نمایش به صورت ردیفی کلیک کرده و از ستون Size میزان فشرده سازی برای هر فایل رو ببینید.

آموزش رفع خطای Compress components with gzip در GTmetrix

برای رفع خطای Compress components with gzip در Yslow جی تی متریکس کافیه قابلیت Gzip رو در سایت فعال کنید که در ادامه به معرفی روش‌های فعال سازی gzip در سایت‌ها و وب سرورهای مختلف می‌پردازم.

فعال سازی Gzip در وردپرس

برای این کار میتونید هم با استفاده از افزونه و هم با استفاده از کدنویسی اقدام به فعال کردن Gzip در سایت وردپرسی بکنید. روش‌های مختلفی برای فعال سازی در وردپرس وجود داره که در روش کدنویسی باید کدها رو داخل فایل htaccess. قرار بدین.

فعال سازی Gzip در هاست سی پنل

در صورتی که از هاست سی پنل استفاده می‌کنید با اضافه کردن کدهای زیر به فایل htaccess. میتونید قابلیت Compress components with gzip رو در سی پنل فعال کرده و این خطا رو برطرف کنید.

برای فعال کردن Compress components with gzip ابتدا باید وارد File Manager است بشید و سپس کدها رو به htaccess. اضافه کنید. فایل htaccess. جزو فایل‌های مخفی در هاست است که ممکنه در اولین ورودتون به هاست قادر به مشاهده اون نباشید. بنابراین در همین مسیری که قرار دارید روی دکمه Settings که در بالای صفحه در سمت راست قرار داره کلیک کنید تا پنجره زیر برای شما باز شود. سپس تیک گزینه Show Hidden Files را انتخاب کرده و در نهایت روی دکمه Save کلیک کنید تا تنظیمات ذخیره شود.

بعد از مشاهده فایل htaccess.، برای فعال‌سازی Gzip کافی است کد زیر را به انتهای این فایل اضافه کنید:

# BEGIN Gzip Compression
<IfModule mod_deflate.c>
  # فشرده سازی فایل‌های HTML, CSS, JavaScript, Text, XML و فونت‌ها
  AddOutputFilterByType DEFLATE text/html text/plain text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/font-woff
  AddOutputFilterByType DEFLATE application/font-woff2
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE font/eot
</IfModule>
# END Gzip Compression

بعد از ذخیره این تغییرات، پیشنهاد می‌شود کش مرورگر و کش سایت را پاک کنید و مجدداً سایت را با ابزارهایی مانند GTmetrix یا checkgzipcompression.com بررسی کنید تا مطمئن شوید Gzip به درستی فعال شده است.

فعال سازی Gzip در سرور Nginx

اگر سایت شما روی سرور Nginx میزبانی می‌شود، باید تنظیمات مربوط به Gzip را در فایل پیکربندی Nginx (معمولاً /etc/nginx/nginx.conf) انجام دهید. بخشی از این تنظیمات به شکل زیر است:

gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/font-woff2 application/font-woff;

بعد از اعمال این تغییرات Nginx را ری استارت کنید