در ادامه مقاله درباره خطای Add Expire headers صحبت خواهیم کرد و بررسی می‌کنیم که چگونه رفع این مشکل کمک به بالا بردن سرعت سایت ما میکند.
نام: Add Expires headers
نوع: سرور
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 25%
هر بار که شما از وب سایتی بازدیدی انجام می‌دهید لازم است که یک سری فایل‌هایی را دانلود کنید تا سایت قابل مشاهده باشد فایل‌هایی مانند، CSS، JS، HTML و عکس‌ها که در کش مرورگر (یا کش محلی یا کش لوکال) ذخیره می‌شود. حال وقتی به صفحه‌ی دیگری از آن سایت مراجعه می‌کنید موارد تکراری صفحات مثل لوگو سایت فایل‌های CSS و غیره دیگر دوباره دانلود نمی‌شوند بلکه از طریق کش محلی مرورگر فراخوانی صورت می‌گیرد. پس به این ترتیب لازم نیست با هر بار لود کردن صفحه‌های سایت، فایل‌های مشترک بین صفحات را دانلود کنید. این همان دلیلی است که باعث می‌شود در اولین بازدید از یک سایت زمان بیشتری برای لود شدن لازم باشد تا زمان لود صفحات در تکرار بازدید از همان سایت.
این عمل هم باعث صرفه‌جویی در حجم اینترنت بازدیدکننده می‌شود و هم تعداد درخواست‌های سمت سرور را کاهش می‌دهد و صفحات سایت در دفعات بعدی سریع‌تر لود می‌شوند. حال نکته اینجا است که چه مدت باید اطلاعات در کش مرورگر بماند؟ باید تاریخ انقضایی برای فایل‌ها مشخص شود و اگر تاریخانقضا برای اطلاعات درج نشود هر بار کاربر باید فایل‌های مشترک بین صفحات را دانلود کند و آن موقع خطای Expires headers رخ می‌دهد. تاریخ انقضا به مرورگرها خاطرنشان میکند که کدام فایل را از سرور درخواست کند و کدام فایل را از کش مرورگر درخواست کند.
در ابتدا شما باید بازه تغییرات هر کدام از فایل‌های خود را بدانید به این معنا که این نوع فایل‌ها در طراحی سایت(طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما هر از چندگاهی به‌روز رسانی می‌شود و کدام یک از نوع فایل‌ها تغییراتی پیدا نمی‌کنند. در پایین لیستی از انواع فایل‌ها درج شده:
معمولا 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 صبحت کنیم و بررسی کنیم که این خطا چگونه باعث افزایش سرعت سایت ما می‌شود.
نام: Avoid AlphaImageLoader filter
نوع: CSS
اولویت: متوسط
میزان سختی: در حد وسط
میانگین امتیاز: 98%
کمتر سایتی پیش می‌اید که چنین مشکلی داشته باشد، این خطا زمانی رخ می‌دهد که ما از فیلتر AlphaImageLoader در کدهای CSS استفاده کنیم، برنامه‌نویسان از فیلتر AlphaImageLoader زمانی استفاده می‌کردند که بتوانند فایل‌های شفاف یعنی PNG را به شکل صحیح در مرورگر IE نشان دهند، فیلتر AlphaImageLoader باعث می‌شود که وقتی مرورگر به عکس PNG رسید عمل خواندن صفحه متوقف شود و این توقف تا زمانی ادامه دارد که عکس به شکل کامل لود شود و از طرفی این فیلتر باعث درگیر شدن بیشتر حافظه سیستم میگردید.
هر چند IE مشکلات فراوانی برای طراحی سایت بود ولی این مشکل در IE ورژن ۷ به قبل موجود بوده است و در حال حاضر دیگر چنین مشکلی در ورژن‌های بالای ۷ ندارد. بنابراین اگر طراحی سایت (طراحی سایت شرکتی،طراحی سایت فروشگاهی) شما هم چنین مشکلی را دارد سعی کنید این فیلتر را حذف کنید چرا که درصد بسیار کمی از کاربران از IE ورژن ۷ به پایین استفاده می‌کنند. توضیحات بیشتر در یاهو
در این مقاله قصد داریم درباره ارور Avoid AlphaImageLoader filter صبحت کنیم و بررسی کنیم که این خطا چگونه باعث کاهش سرعت سایت ما می‌شود.
نام: Avoid CSS expressions
نوع: CSS
اولویت: متوسط
میزان سختی: در حد وسط
میانگین امتیاز: 98%
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
در این مقاله قصد داریم درباره ارور Make AJAX cacheable صبحت کنیم و بررسی کنیم که این خطا چگونه باعث افزایش سرعت سایت ما می‌شود.
طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی)
نام: Make AJAX cacheable
نوع: JS
اولویت: متوسط
میزان سختی: راحت
میانگین امتیاز: 100%
به کمک AJAX می‌توانیم درخواست‌های کاربران را بدون بارگذاری صفحات در پیش‌زمینه از سرور درخواست کنیم، البته استفاده از AJAX به معنای این نیست که کاربران منتظر پاسخ درخواست خود نمی‌باشند ولی اگر به درستی کدنویسی شود روند پاسخ بهینه سازی می‌شود، با این روش می‌توانید پاسخ کاربران را کش کرده و سرعت پاسخگویی را دوچندان کنید، برای توضیحات بیشتر می‌توانید به این لینک مراجعه کنید در لینک اشاره شده به کمک JQuery یک نمونه از AJAX cacheable را نمایش می‌دهد، شما می‌توانید به کمک جی کوئری یک درخواست ساده به شکل Ajax ارسال کنید. بعید است شما با خطای Make AJAX cacheable روبه‌رو شوید و بیشتر بخش YSlow که مربوط به یاهو است قصد دارد این نکته را یاداوری کند که استفاده از این تکنولوژی می‌تواند بهبود سرعت سایت شود.
توضیحات بیشتر از زبان یاهو:
One of AJAX’s benefits is it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using AJAX does not guarantee the user will not wait for the asynchronous JavaScript and XML responses to return. Optimizing AJAX responses is important to improve performance, and making the responses cacheable is the best way to optimize them.
در این مقاله قصد داریم درباره مشکل Put CSS in the document head و حل آن در جی تی متریکس صحبت کنیم و بررسی کنیم که چطور این خطا در جهت افزایش سرعت سایت به ما کمک میکند.
ام: Put CSS in the document head
نوع: CSS
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 99%
ارور Put CSS in the document head زمانی در سایت جی تی متریکس رخ می‌دهد که شما فایل CSS یا همان فایل استایل خود را در خارج از تگ Headفراخوانی کنید مثلا در تگ body استایل را قرار دهید. برای حل این مشکل کافی است آن فایل را در داخل تگ Head قرار دهید تا خطای Put CSS in the document head سبز شود.