آموزش بهینه سازی Add Expires headers

افزودن تاریخ انقضا در هدر فایل‌ها

اسم فاکتور: افزودن تاریخ انقضا در هدر فایل‌ها
نوع فاکتور: سمت سرور
اهمیت: بالا
میزان سختی رفع: آسون
حد میانگین: 23 درصد

YSlow: Add Expires headers

Rule Summary
Type: Server
Priority: High
Difficulty: Easy
Average Score: 23%

بررسی اجمالی افزودن تاریخ انقضا در هدر

تاریخ انقضا در هدر فایل‌ها این اجازه رو به مرورگر میدهد تا بداند چه زمانی به سرور درخواست دریافت فایل را بدهد به جای استفاده از فایل کش شده‌اش.مزایای افزودن تاریخ انقضا در هدر فایل:
• کاهش بار سرور
• بهبود زمان لود صفحه
• میزان صرفه جویی در هزینه: بسیار بالا
• دسترسی به سرور نیاز است

Add Expires headers

Overview

Expires headers let the browser know whether to server a cached version of the page.
• Reduce server load
• Increase page load time
• Cost benefit ratio: high value
• Access needed

تاریخ انقضا هدر چیست؟

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

What are expires headers

Expires headers tell the browser whether they should request a specific file from the server or whether they should grab it from the browser’s cache.

The whole idea behind Expires Headers is not only to reduce the load of downloads from the server (constantly downloading the same file when it’s unmodified is wasting precious load time) but rather to reduce the number of HTTP requests for the server.

When you visit a website your browser is responsible for communicating with the webserver to download all the required files. It then compiles those files to display the web page. As web pages become richer in graphics and content, more and more files are being transferred between your machine and the web server.

In the past you would have an HTML file and maybe a few images to serve for your website, however many modern websites might have 50+ files per page to transfer. The files themselves can be a huge load increase by themselves but for each file you must create a request and even if requests are fractions of a second, they can soon add up.

تاریخ انقضا هدر فایل چگونه کار می کند؟

تاریخ انقضا هدر عملکرد نسبتاً ساده‌ای دارد.تاریخ انقضا به مرورگرها مقدار زمانی که فایل را در کش خود نگهداری کنند را تعیین می کنند بنابراین برای دیدن دوباره صفحه نیازی به دریافت دوباره فایل‌ها نیست.حق با شماست اگر فکر کنید که تاریخ انقضا در هدر فایل‌ها هیچ کمکی در افزایش سرعت سایت در اولین بازدید ندارد چون در اولین بازدید باید تمامی فایل‌ها دریافت شوند. استفاده از تاریخ انقضا سرعت سایت را در دفعات بعدی بازدید بهبود می‌بخشد.
شما می‌توانید تاریخ انقضا را برای یک یا چند فایل خاص اعمال کنید و یا می‌توانید آنرا برای یک نوع خاص فایل اعمال کنید. سپس هنگامی که مرورگر به سایت می‌آید، می‌تواند ببیند که آن نوع فایل خاص را آخرین بار در چه وقتی دریافت کرده است.اگر به تازگی آن فایل را دریافت کرده است آنرا از حافظه کش خود به نمایش در می‌آورد، و اگر شما خیلی وقت است که از سایت بازدیدی نکرده‌اید و تاریخ انقضا فایل‌ها در کش مرورگر گذشته باشد ، مرورگر تمامی فایل‌های سایت را از وب سرور درخواست و جدیدترین نسخه (همراه با تغییرات جدید را) دریافت می‌کند و به شما نشان خواهد داد.
ایده‌آل این است که شما برای چیزهایی که زمان زیادی تغییری نمی‌کنند تاریخ انقضای بلندی (زمان زیادی در حافظه کش بماند) تعیین کنید فایل‌هایی مثل لوگو رنگ و… . برای چیزهایی که در معمولا در آنها تغییراتی اعمال می‌شود تاریخ انقضای کوتاهی تعیین کنید.

How does it work?

Expires Headers are rather simple in how they work. They tell the browser how long to store a file in the cache so subsequent page views and visits they don’t have to download the file again. You are right to assume Expires Headers don’t improve page speed for a first time visit as this visitor would have to download all the files for the first time. Using Expires Headers helps increase load times for returning visitors.

You can set Expires headers on specific files or even file types. Then when the browser comes to the website it can see when was the last time it downloaded the specific file types. If it was recently it will display them from the cache, if you haven’t visited the site in a while it will download the newest version from the web server.

The idea is to set late expiry times for items that don’t change on your website (logo, colours etc). Set short expiry times for things that change regularly.

چرا تاریخ انقضا هدر مهم است؟

افزودن تاریخ انقضا به هدر فایل باعث کاهش تعداد درخواست‌های HTTP می‌شود که این کاهش درخواست باعث کاهش زمان ارتباط وب سرور با مرورگر می‌شود. همچنین به کاربران اجازه می‌دهد تا از فایل‌های کش شده مرورگر خود بارها استفاده کنند که باعث کاهش میزان حجم فایل مورد نیاز برای دانلود می‌شود( سئو قالبفا لازم میداند که اضافه کند این کاهش درخواست و این کاهش دانلود فایل باعث کاهش فشار بر روی سرور و کاهش مصرف ترافیک سرور و کاربر میشود).

Why is it important?

Adding Expires Headers is import to reduce HTTP requests which reduces the time it take for the server to communicate with the browser. It also allows your users to reuse the cache files that have been stored in the browser to reduce the amount of files they need to download.

چطور به هدر فایل‌ها تاریخ انقضا اضافه کنیم؟

نخست شما باید مشخص کنید که کدام یک از فایل‌ها یا چه نوع از فایل‌های سایت هراز چندگاهی بروز رسانی می‌شوند و کدامیک تغییری پیدا نمی کنند.یک لیست از فایل‌هایی که تقریبا همه سایت‌ها دارند:
jpg
gif
png
favicon/ico
javascript
css

برای اینکه نشان دهیم که چطور به هدر فایل‌ها تاریخ انقضا اضاف کنیم ما از همین نوع فایلهایی که معمول هست استفاده می‌کنیم.معمولا عکس‌های روی سایت ( png,gif,jpg ) تغییری نمی‌کنند، favicon تقریبا میشه گفت هرگز تغییری نمی‌کند ، فایل‌های جاوا اسکریپت‌ گاه گاهی تغییر می‌کنند و فایل‌های css تغییرات زیادی می‌بینند.
در این آموزش ما تاریخ انقضا را درون فایل .htaccess تعریف می کنیم.فایل .htaccess یک فایل مخفی است که اغلب در ریشه (پوشه public_html ) سایت موجود می‌باشد.بهتر است قبل از هرگونه تغییری در این فایل از این فایل نسخه پشتیبان تهیه کنید.
حال فایل .htaccess را ویرایش کنید و کدهای زیر را درونش بنویسید:

<IfModule mod_expires.c>
ExpiresActive On 
ExpiresDefault "access plus 1 month"
</IfModule>

خوب اول ما این قابلیت تاریخ انقضا رو فعال می کنیم [ExpiresActive On] بعد یک تاریخ انقضای پیش فرض تعیین می کنیم [ExpiresDefault “access plus 1 month”] این مقدار پیشفرض روی فایل‌هایی که تاریخ انقضایی برایشان تعیین نشده باشد اعمال می گردد.حال ما می‌خواهیم خط دستوراتی برای تعیین تاریخ انقضا به این دستورات اضافه کنیم. در ادامه کدی که در قسمت قبل اضافه کردید کد زیر را بنویسید

ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access plus 1 year"

کد [ExpiresByType image/x-icon “access plus 1 year”] برای فایل‌های آیکون مثل favicon تاریخ انقضای یک ساله تعریف می‌کند و کد [ExpiresByType image/gif “access plus 1 month”] برای فایل‌های عکس از نوع gif تاریخ انقضای یک ماهه تعریف می کند و کد [ExpiresByType image/png “access plus 1 month”] برای فایل‌های عکس از نوع png تاریخ انقضای یک ماهه تعریف می کند و کد [ExpiresByType image/jpg “access plus 1 month”] برای فایل‌های عکس از نوع jpg تاریخ انقضای یک ماهه تعریف می‌کند و کد [ExpiresByType image/jpeg “access plus 1 month”] برای فایل‌های عکس از نوع jpeg تاریخ انقضای یک ماهه تعریف می‌کند و کد [ExpiresByType text/css “access 1 month”] برای فایل‌های css تاریخ انقضای یک ماهه تعریف می‌کند و کد [ExpiresByType application/javascript “access plus 1 year”] برای فایل‌های جاوا اسکریپت تاریخ انقضای یک ساله تعریف می‌کند.

کد پایان درون فایل .htaccess باید شبیه به کد زیر شده باشد:

<IfModule mod_expires.c>
ExpiresActive On 
ExpiresDefault "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

How to Add Expires Headers

First you need to decide on what files you update often and what file types don’t get updated often. A common list of file types we see a lot are:

images: jpg, gif, png
favicon/ico
javascript
css
Now go through these file types and think how often you change each one. Commonly images typically are not changed too often (keep in mind we are talking about existing images) favicon is almost never changed, javascript is occasionally changed and CSS is change much more frequently.

We define our Expires Headers in the .htaccess file. This is a hidden file often found in the root of your website (via FTP). It’s always best practice before you edit the htaccess file to back it up!

Now, open up your htaccess file and paste in the following:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
</IfModule>

First we enable expirations and then we set a default expiry date for files we don’t specify. Now we want to add the lines to explain what expires when. Right above the paste the following and change the dates to reflect the times that best suit your website.

# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"

Your complete file should look like:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
منابع :
Add Expires headers | GTmetrix

درصورت هرگونه سوال در این زمینه از بخش دیدگاه بپرسید

آموزش بهینه سازی Add Expires headers 4.79/5 - 19

نوشته شده توسط تیم سئو قالبفا در تاریخ ۰۸ آبان ۱۳۹۲ دسته : آموزش بهینه سازی سرعت سایت