رفع خطای Specify a Vary: Accept-Encoding header در gtmetrix

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

سئو سایت

خلاصه‌ای از خطا Specify a Vary: Accept-Encoding header

نام: Specify a Vary: Accept-Encoding header
نوع: محتوا
اولویت: زیاد
میزان سختی: راحت
میانگین امتیاز: 88%

علت خطای Specify a Vary: Accept-Encoding header در جی تی متریکس چیست؟

یکی دیگر از درخواست‌های HTTP مهم که تاثیر مناسبی در بهینه سازی سرعت سایت نیز دارد Vary: Accept-Encoding است. متاسفانه سایت‌های ایرانی دوباره همانند بسیاری از خطاهای دیگر به اشتباه این ارور را تفسیر کرده‌اند و بسیار تعجب آور است که برای رفع خطا Vary: Accept-Encoding متاتگ <meta charset=”utf-8″> را پیشنهاد می‌دهند :/

طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی)

برای رفع این خطا باید شما یک درخواست هدر HTTP از نوع Vary: Accept-Encoding را ارسال کنید و ربطی به متاتگ اشاره شده ندارد.

vary-accept-encoding-header-kinsta

طبق توضیحات سایت معتبر kinsta وقتی شما هدر Vary: Accept-Encoding را در هاست خود فعال ندارید وب سرور یا CDN شما به جای ارسال فایل‌های فشرده شده (همان GZIP بودن فایل‌ها) فایل‌های فشرده نشده را به اشتباه به مرورگرها ارسال می‌کند و این آسیب به بهینه سازی سایت شما خواهد زد ولی اگر هدر Vary: Accept-Encoding فعال باشد وب سرور یا CDN نسخه صحیح فایل‌ها را به کاربران ارسال می‌کند. پس توجه داشته باشید که فعال بودن آن بسیار اهمیت دارد، هر چند در اکثر سرورها به شکل پیش‌فرض فعال است.

specify-vary-accept-encoding-header-pagespeed

نحوه فعال سازی Vary: Accept-Encoding

رفع خطای Specify a Vary: Accept-Encoding header در وب سرویس آپاچی

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

رفع ارور Specify a Vary: Accept-Encoding header در وب سرویس NGINX

اگر وب سرویس سایت شما NGINX است کافی است فایل موجود در ریشه /etc/nginx/nginx.conf. خود را edit کرده و دستور زیر را وارد نمایید.

رفع خطای Specify a cache validator و Configure entity tags

در این مقاله داریم درباره مشکل رایج Specify a cache validator و حل آن در جی تی متریکس صحبت کنیم.

خلاصه‌ای از خطا Specify a cache validator

نام: Specify a cache validator
نوع: سرور
اولویت: زیاد
میزان سختی: راحت
میانگین امتیاز: 92%

specify-a-cache-validator

درباره خطای Specify a cache validator در جی تی متریکس

زمانی که با ارور Specify a cache validator روبه رو می‌شوید نمایان‌گر این موضوع است که تنظیمات کش سرور شما به خوبی تنظیم نشده، حال منظور از اینکه کش وب سرور به خوبی تنظیم نشده است را در ادامه خواهیم گفت.

هر سروری که به خوبی تنظیم شده باشد یک سری محتوای هدر HTTP برای کش کردن فایل‌ها سمت کاربران در جهت بهینه سازی سایت ارسال می‌کند این هدرهای کش اصولا دو عمل اصلی را انجام می‌دهند، یکی Cache Validate یعنی معتبرسازی فایل‌های کش و دیگری Cache Length به معنای طول کش یا مقدار زمان کش است. و هر کدام از این موارد نباشند مشکلاتی برای طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) ایجاد می‌کنند. در ادامه این عبارات را تشریح می‌کنیم.

specify-a-cache-validator-warning

این دو هدر تعیین می‌کنند که چه مدت یک فایل باید نگه داشته شود و اگر این دو هدر تنظیم نشده باشند خطای Leverage browser caching رخ می‌دهد و اگر چنین خطایی را دارید می‌توانید به کمک این پست رفع کنید. ولی اگر چنین مشکلی ندارید به شکل خلاصه بدانید که در هدر Cache-Control مدت زمان انقضا مشخص می‌شود به این منظور که یک عدد بر حسب ثانیه برای کش کردن فایل در نظر می‌گیرد ولی در هدر Expires تاریخ زمان انقضا درج می‌شود و یک تاریخ مشخص می‌شود که مثلا تا فعلان تاریخ فایل کش شود. استفاده از هر دو هدر Expires و Cache-Control لازم نیست، ولی حداقل استفاده از یکی در جهت افزایش سرعت سایت لازم و ضروری است ولی اگر هر دو را اضافه کنید جز محکم‌کاری در جهت کش شدن فایل‌ها کار خاص دیگری نکرده‌اید ولی به شکل کلی هدر Cache-Control نسبت به هدر Expires اولویت بالاتری دارد. Cache-Control جدیدتر و معمولا این متد توصیه می‌شود ولی با این حال هنوز برخی سایت‌های آنالیز سرعت مثل Gtmetrix هدر Expires را چک می‌کنند.

Cache Validate

دو هدر HTTP داریم که Cache Validate را تعیین می‌کند Last-Modified و Etag

این دو هدر تعیین می‌کنند که فایل کش شده برای چه تاریخی و ورژنی است و اگر به خوبی تنظیم نشده باشد خطای Specify a cache validator رخ می‌دهد. به این نکته توجه داشته باشید که شما فقط فایل‌هایی را می‌توانید رفع خطا کنید که در سرور شما باشد پس اگر فایلی در طراحی سایت شما از طریق یک سرور دیگری لود می‌شود به علت دسترسی نداشتن به آن سرور و فایل، نمی‌توان کاری انجام داد.

ما قرار هست در این پست درباره هدرهایی که Cache Validate را تعیین می‌کنند صحبت کنیم و همان‌طور که گفتیم این هدرها نشان می‌دهد که فایل کش شده چه ورژنی دارد و اخرین ورژن کش شده برای چه تاریخی است، هر دو هدر Last-Modified و Etag چنین عملی را انجام می‌دهند، به این دو هدر درخواستی اسم دیگری هم دارند و به آن‌ها Conditional requests یا درخواست‌های شرطی هم گفته می‌شود، در ادامه بیشتر در این باره صحبت خواهیم کرد.

درخواست شرطی Last-Modified

last-modified-header

مقدار Last-Modified یک تاریخ خاصی را نشان می‌دهد، Last-Modified تاریخ آخرین ورژن فایل یا تاریخ اخرین ویرایش یک عکس یا صفحه است، همانند کد زیر:

زمانی که فایلی یا صفحه‌ای را تغییر و ویرایش دهید، باید این تغییرات نیز سمت کاربر هم اعمال شود تا به درستی سایت کار کند، بنابراین وقتی کاربر دوباره وارد سایت شما می‌شود یک درخواست شرطی توسط هدری مجزا با عنوان If-Modified-Since ارسال می‌کند، مقدار این هدر مجرا از Last-Modified گرفته شده است، هدر If-Modified-Since زمانی که سمت سرور ارسال می‌شود بررسی می‌کند تا ببیند آیا تاریخ سمت سرور به روز شده است یا خیر، و منتظر پاسخ وب سرور می‌شود، اگر پاسخ با کد 200 ارسال شود به معنای جواب مثبت است و تاریخ تغییر کرده است و ولی اگر وب سرور کد 304 یا همان 304 Not Modified را ارسال کند به این معنا است که فایل مورد نظر به روز نشده است و از فایل موجود در کش مرورگر کاربر استفاده شود.

اگر توضیحات قسمت Cache Length را مطالعه کرده باشید اشاره کردیم که  هدر Cache-Control نسبت به هدر Expires اولویت بالاتری دارد و اگر فرض بگیریم وب سرور در پاسخ به درخواست If-Modified-Since کد 200 را ارسال کند سر انجام تاریخ Last-Modified تغییر خواهد کرد و سر انجام باعث می‌شود مقادیر دو هدر Cache-Control و Expires تغییر کند و فایل جدید با اخرین ویرایش موجود در کش کاربر ذخیره شود.

درخواست شرطی Etag

etag-header

هدر ETag با اسم کامل Entity Tag به معنای “برچسب هویتی” همانند هدر Last-Modified تغییرات صفحه یا فایل را به مرورگر کاربر اطلاع می‌دهد، با این تفاوت که به جای تاریخ و زمان آخرین ویرایش صفحه یا فایل از محتوای متنی منحصر به فردی برای هر صفحه یا فایل (مثل یک MD5 Hash) برای شناسایی آن صفحه توسط سرور استفاده می‌شود

و از طرفی مرورگر کاربر به جای درخواست هدر قبلی If-Modified-Since که در حالت Last-Modified ارسال می‌کرد این بار هدر مجزایی با عنوان If-None-Match که مقدار آن از هدر ETag گرفته شده است به سمت وب سرور ارسال می‌کند و دوباره همانند قبل وب سرور با ارسال کد 200 یا 304 تعیین می‌کند که آیا فایل یا صفحه نیاز به آپدیت شدن در سمت کش کاربر را دارد یا خیر.

نکته: در بخش YSlow سایت GTMetrix خطای (Configure entity tags (ETags موجود است که اشاره به نبودن هدر ETags می‌کند که با رفع خطای Specify a cache validator آن هم رفع می‌شود.

نحوه رفع خطای Specify a cache validator

برای رفع این ارور باید هدرهای Last-Modified یا Etag یا هر دو با هم از سمت وب سرور ارسال شود، هدر درخواست Last-Modified به شکل کلی از سمت وب سرورها فعال است و نیازی به تنظیمات دستی آن نیست، هدر Etag در وب سرورهای Apache ورژن 2.4 به بالاتر به شکل اتوماتیک فعال است و سمت کاربران این هدر ارسال می‌شود و در وب سرور NGINX از 2016 به بعد به شکل پیش فرض هدر Etag در آن فعال است.

پس شمایی که این خطا را دارید چه کاری باید انجام دهید؟

اول توجه داشته باشید با هاست مناسب از شرکت‌های معتبر، بعید است با مشکل Specify a cache validator روبه‌رو شوید به هر حال با برخورد این خطا به پشتیبانی هاست خود تیکت زده و درخواست دو هدر یا حداقل یک هدر را ارسال کنید، و راه بعدی برای این مشکل رفع خطای Leverage browser caching است، گاهی تنظیمات وب سرور به شکلی است که با رفع ارور Leverage browser caching مشکل موجود در Specify a cache validator هم رفع می‌شود، و اگر دقت کرده باشید اکثر سایت‌های ایرانی برای رفع خطای Specify a cache validator کد مربوط به Leverage browser caching را قرار می‌دهند.

البته محوریت تمام صحبت‌های ما فقط بر روی فایل‌هایی هست که در هاست خود داریم، اگر شما فایلی را از سایت دیگری در وب خود فراخوانی می‌کنید و مشکلات این چنینی داشته باشید، دیگر قابل حل نخواهید بود، مگر آن فایل‌ها را حذف کنید.

رفع خطای Specify image dimensions در gtmetrix

در این مقاله قصد داریم درباره مشکل Specify image dimensions و حل آن در جی تی متریکس صحبت کنیم.

بهینه سازی سایت

قیمت طراحی سایت

خلاصه‌ای از خطا Specify image dimensions

نام: Specify image dimensions
نوع: عکس
اولویت: متوسط
میزان سختی: راحت
میانگین امتیاز: 97%

dimensions

طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی)

حل ارور Specify image dimensions

علت خطا و راه حل رفع آن

این ارور وقتی به وجود می‌اید که شما در تصاویر خود از اتریبیوت‌های مانند width و  height استفاده نکرده باشید. برای رفع این مشکل باید در تمام تصاویر خود عرض و ارتفاع آن را مشخص کنید.

مثالی از یک عکس بدون مشخص بودن ابعاد:

مثالی از یک عکس با مشخص بودن ابعاد:

Specify-image-dimensions-sample

تاثیر این ارور بر سرعت سایت

رفع خطای Specify image dimensions باعث می‌شود تا تصاویر موجود در سند HTML شما سریع‌تر رندر شوند و نیازهای غیرضروری برای اجرای بازنگری عکس‌ها رفع می‌شود، وقتی مرورگر صفحه‌ای از سایت را رندر می‌کند تا به کاربر نشان دهد فایل‌های مختلفی را دانلود می‌کند که عکس هم شامل موارد دانلود شده می‌باشد، حال اگر ابعاد عکس مشخص نباشد و یا ابعاد مشخص شده با اندازه واقعی آن فرق داشته باشد مرورگر در اینجا برای نشان دادن صحیح المان‌های HTML مجبور است بازنگری لازمه را بر روی عکس انجام دهد، درحالی که اگر ابعاد به شکل صحیح مشخص شده باشند نیازی به این بازنگری نیست، شاید چنین خطایی در زمان قابل تشخص برای ما نباشد ولی هر چه تعداد عکس‌ها بیشتر باشد و ابعاد مشخص نشده باشند زمان نسبتا بیشتری طول می‌شد صفحات رندر شود تا در حالی که ابعاد مشخص است و مرورگر قبل از رندر کردن توسط اتریبیوت های CSS از ابعاد عکس‌ها به خوبی آگاهی پیدا می‌کند.

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

• رفع خطای Serve scaled images
• رفع خطای Optimize images

رفع خطای Add Expires headers در YSlow جی تی متریکس

در ادامه مقاله درباره خطای Add Expire headers صحبت خواهیم کرد و بررسی می‌کنیم که چگونه رفع این مشکل کمک به بالا بردن سرعت سایت ما می‌کند.

خلاصه‌ای از خطا Add Expires headers

نام: Add Expires headers
نوع: سرور
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 25%

Expires headers چیست؟

هر بار که شما از وب سایتی بازدیدی انجام می‌دهید لازم است که یک سری فایل‌هایی را دانلود کنید تا سایت قابل مشاهده باشد فایل‌هایی مانند، CSS، JS، HTML و عکس‌ها که در کش مرورگر (یا کش محلی یا کش لوکال) ذخیره می‌شود. حال وقتی به صفحه‌ی دیگری از آن سایت مراجعه می‌کنید موارد تکراری صفحات مثل لوگو سایت فایل‌های CSS و غیره دیگر دوباره دانلود نمی‌شوند بلکه از طریق کش محلی مرورگر فراخوانی صورت می‌گیرد. پس به این ترتیب لازم نیست با هر بار لود کردن صفحه‌های سایت، فایل‌های مشترک بین صفحات را دانلود کنید. این همان دلیلی است که باعث می‌شود در اولین بازدید از یک سایت زمان بیشتری برای لود شدن لازم باشد تا زمان لود صفحات در تکرار بازدید از همان سایت.

طراحی سایت 

این عمل هم باعث صرفه‌جویی در حجم اینترنت بازدیدکننده می‌شود و هم تعداد درخواست‌های سمت سرور را کاهش می‌دهد و صفحات سایت در دفعات بعدی سریع‌تر لود می‌شوند. حال نکته اینجا است که چه مدت باید اطلاعات در کش مرورگر بماند؟ باید تاریخ انقضایی برای فایل‌ها مشخص شود و اگر تاریخانقضا برای اطلاعات درج نشود هر بار کاربر باید فایل‌های مشترک بین صفحات را دانلود کند و آن موقع خطای Expires headers رخ می‌دهد. تاریخ انقضا به مرورگرها خاطرنشان می‌کند که کدام فایل را از سرور درخواست کند و کدام فایل را از کش مرورگر درخواست کند.

رفع خطای Expires headers چگونه است؟

در ابتدا شما باید بازه تغییرات هر کدام از فایل‌های خود را بدانید به این معنا که این نوع فایل‌ها در طراحی سایت(طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما هر از چندگاهی به‌روز رسانی می‌شود و کدام یک از نوع فایل‌ها تغییراتی پیدا نمی‌کنند. در پایین لیستی از انواع فایل‌ها درج شده:

• images: jpg, gif, png
• favicon/ico
• javascript
• css

معمولا favicon ها در ساخت سایت تغییر نمی‌کنند و فایل‌های عکس هم به ندرت تغییر می‌کنند و از طرفی گاهی فایل‌های جاوااسکریپت تغییر می‌کنند ولی ممکن است فایل‌های CSS تغییرات بیشتری داشته باشند و بر اساس همین موضوع ما تاریخ انقضای این فایل‌ها را مشخص می‌کنیم تا باعث برطرف شدن مشکل Expires headers شود.

به کد زیر توجه کنید:

تاریخ انقصا با دستور ExpiresActive On نیزفعال می‌شود همان‌طور که در خط ۱ توضیح داده شده است.

دستور بالا خط ۴ یک مقدار پیش‌فرض بر روی فایل‌هایی که تاریخ انقضا برای آن‌ها تعیین نشده است قرار داده‌ایم و این فایل‌ها اجازه دارند به مدت ۱ ماه در کش مرورگر کاربر ذخیره شوند و بعد از یک ماه مرورگر دوباره درخواست چنین فایل‌هایی را می‌دهد، خط ۳ توضیحات دستور خط ۴ است.

به ادامه کد توجه کنید:

دستور خط ۲ برای favicon است که به مدت یک سال می‌تواند در کش مرورگر ذخیره شود چرا که حتی بعد از سال‌ها ممکن است favicon یک سایت تغییر نکند.

دستورات خط ۴ تا ۷ مربوط به کش انواع عکس‌ها می‌باشد که هر کدام از عکس‌ها از هر نوعی به مدت ۱ ماه می‌توانند در کش کاربر ذحیره شوند.

دستور خط ۹ و ۱۱ به ترتیب برای فایل‌های CSS و JS است و به مدت یک ماه در مرورگر کاربر ذخیره می‌شود.

دستورنهایی Expires headers:

دستور بالا باید در فایل htaccess قرار گیرد و برای پیدا کردن این فایل اصولا باید به مسیر public_html هاست خود رجوع کنید، اگر چنین فایلی را نداشتید ممکن است مخفی باشد و برای همین در تظیمات کنترل پنل خود فایل‌های مخفی را show کنید و اگر باز چنین فایلی نبود کافی است New file را بزنید و نام .htaccess را درج نمایید تا ساخته شود، سپس دستور بالا را درج نمایید تا تغییرات لازم در کش صورت بگیرد.

توجه داشته باشید که برای رفع خطای Add Expires headers به شکل کامل، باید تمام فایل‌های فراخوانی شده در هاست شما باشد، مثلا اگر عکسی یا فایلی را از سایت دیگر لود می‌کنید شما نمی‌توانید برای آن فایل Expires headers تعریف کنید.

رفع خطای Avoid AlphaImageLoader filter در YSlow جی تی متریکس

در این مقاله قصد داریم درباره ارور Avoid AlphaImageLoader filter صبحت کنیم و بررسی کنیم که این خطا چگونه باعث افزایش سرعت سایت ما می‌شود.

خلاصه‌ای از خطا Avoid AlphaImageLoader filter

نام: Avoid AlphaImageLoader filter
نوع: CSS
اولویت: متوسط
میزان سختی: در حد وسط
میانگین امتیاز: 98%

Avoid AlphaImageLoader filter چیست و رفع آن

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

بهینه سازی سایت

هر چند IE مشکلات فراوانی برای طراحی سایت  بود ولی این مشکل در IE ورژن ۷ به قبل موجود بوده است و در حال حاضر دیگر چنین مشکلی در ورژن‌های بالای ۷ ندارد. بنابراین اگر طراحی سایت (طراحی سایت شرکتی،طراحی سایت فروشگاهی)‌ شما هم چنین مشکلی را دارد سعی کنید این فیلتر را حذف کنید چرا که درصد بسیار کمی از کاربران از IE ورژن ۷ به پایین استفاده می‌کنند. توضیحات بیشتر در یاهو