رفع خطای 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 ورژن ۷ به پایین استفاده می‌کنند. توضیحات بیشتر در یاهو

رفع خطای Avoid CSS expressions در YSlow جی تی متریکس

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

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

سئو سایت

خلاصه‌ای از خطا Avoid CSS expressions

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

Avoid CSS expressions چیست؟

CSS expressions یک دستور قوی و البته خطرناک (از نظر امنیت) برای داینامیک کردن ویژگی‌های CSS است. این دستور فقط در IE ورژن ۵ به بعد پشتیبانی می‌شود، برای مثال که چگونه از CSS expressions استفاده می‌شود:

با استفاده از CSS expressions هر ساعت رنگ پیش‌زمینه نیز می‌تواند تغییر کند:

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

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

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

توضیحات سایت گوگل درباره CSS expressions

Unfortunately, the performance penalty imposed by CSS expressions is considerable, as the browser reevaluates each expression whenever any event is triggered, such as a window resize, a mouse movement and so on. The poor performance of CSS expressions is one of the reasons they are now deprecated in IE 8. If you have used CSS expressions in your pages, you should make every effort to remove them and use other methods to achieve the same functionality

رفع خطای Put CSS in the document head در gtmetrix

در این مقاله قصد داریم درباره مشکل Put CSS in the document head و حل آن در جی تی متریکس صحبت کنیم و بررسی کنیم که چطور این خطا در جهت افزایش سرعت سایت به ما کمک میکند.

ساخت سایت

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

خلاصه‌ای از خطا Put CSS in the document head

ام: Put CSS in the document head
نوع: CSS
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 99%

خطای Put CSS in the document head

ارور Put CSS in the document head زمانی در سایت جی تی متریکس رخ می‌دهد که شما فایل CSS یا همان فایل استایل خود را در خارج از تگ Headفراخوانی کنید مثلا در تگ body استایل را قرار دهید. برای حل این مشکل کافی است آن فایل را در داخل تگ Head قرار دهید تا خطای Put CSS in the document head سبز شود.

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

همانند مثال زیر: