Endire
Elite Member
- Mar 27, 2012
- 1,756
- 1,075
In my opinion, page speed is one of the most difficult things to get right. If you have ever used a page speed analyzer and tried to follow its recommendations, you are probably already aware that some tasks offer marginal improvements in exchange for a lot of headache. I wanted to offer some insights from my own experiences in the hope that someone else who is frustrated will find this useful.
Leveraging Browser Caching
There are a lot of different ways to get this done and I?ll cover how to do it with .htaccess here. You can significantly speed up your website by setting an expiry date for resources that don?t change that often and even for ones that do.
It is generally recommended that you do not use the catch-all ExpiresDefault as that will set one expiry date for all of your cachable resources. You may not want this to happen because if you make changes to certain things on a regular basis, users would have to wait until the resource expired in their browsers before the updates would take effect.
By using Page Speed Insights from Google, you can get a good idea of the resources that are candidates for long expiry dates. In general, things like Javascript, CSS, and images that aren?t changed out a lot are good candidates for long expiry dates (i.e. 6 months to a year).
Don?t set your expiry dates for more than a year as that may cause issues with your site.
Here is a sample of code for setting the expiry date for image, js, html and css files for one month in the future.
Notice that the time frame is entered in seconds. The ?A? at the beginning of that string tells the server to start that timer at the users last access date. If you were to use M, it would start the timer at the date last modified. You can use either one depending on your purposes. For example if you change things frequently you may want to use M.
If the above code does not work for you, try <filesMatch> like this,
Enabling G-zip Compression
Compressing files on your server before they are sent to the client?s browser to be unpacked is a great way to speed up a site. The method you use however can vary depending on features available from your host and your hosting environment. If you are using Apache and your host has mod-gzip and/or mod_deflate enabled, you can use the snippets below. Note if you are using Apache 1.3 you will need mod_gzip. 2.0 you will use mod_deflate.
And mod_deflate
*Note that these directives turn compression on and off depending on the browser as not all browsers support compression,
CSS Sprites
CSS sprites can also help you speed up your website. Sprites combine images into as few files as possible. Note that not all images are good candidates for sprites. Typically images that are often loaded together on multiple pages are ideal for this process.
Traditionally, you would need to use a program like Photoshop or Gimp to make a sprite image however there is a really useful tool that combines the images and CSS all in two file for you for free!
It?s called SpritePad and you can find it here http://wearekiss.com/spritepad
You just drag and drop your images onto the screen, position them and CSS code is automatically generated to the right. You then just download the files, upload them to your server and you are ready to go.
Serve Resources From a Consistent URL
All the files on your site that are external and needed to render pages must be requested by the browser. Files like CSS and JS are the biggest culprits of multiple http requests. Sometimes common libraries (i.e, JQuery and other JS files) may come pre-installed with plugins or other downloads. If you have plugins that run on JQuery, make sure you are using a local file instead of a Google other CDN.
If you have CSS that can be combined into other CSS files, it is better to combine them to reduce the amount of requests the browser sends to the server. Also, make sure you put CSS requests before external JavaScript requests. Avoid using @import in CSS files.
What tactics do you use to increase site speed?
Leveraging Browser Caching
There are a lot of different ways to get this done and I?ll cover how to do it with .htaccess here. You can significantly speed up your website by setting an expiry date for resources that don?t change that often and even for ones that do.
It is generally recommended that you do not use the catch-all ExpiresDefault as that will set one expiry date for all of your cachable resources. You may not want this to happen because if you make changes to certain things on a regular basis, users would have to wait until the resource expired in their browsers before the updates would take effect.
By using Page Speed Insights from Google, you can get a good idea of the resources that are candidates for long expiry dates. In general, things like Javascript, CSS, and images that aren?t changed out a lot are good candidates for long expiry dates (i.e. 6 months to a year).
Don?t set your expiry dates for more than a year as that may cause issues with your site.
Here is a sample of code for setting the expiry date for image, js, html and css files for one month in the future.
Code:
#enable expirations
ExpiresActive On
# expire GIF images after a month in the client's cache
ExpiresByType image/gif A2592000
# expire PNG images after a month in the client's cache
ExpiresByType image/png A2592000
# expire JPG after a month in the client's cache
ExpiresByType text/jpg A2592000
# expire CSS images after a month in the client's cache
ExpiresByType text/css A2592000
# expire HTML after a month in the client's cache
ExpiresByType text/html A2592000
# expire JS after a month in the client's cache
ExpiresByType text/javascript A2592000Notice that the time frame is entered in seconds. The ?A? at the beginning of that string tells the server to start that timer at the users last access date. If you were to use M, it would start the timer at the date last modified. You can use either one depending on your purposes. For example if you change things frequently you may want to use M.
If the above code does not work for you, try <filesMatch> like this,
Code:
<filesMatch "\.(js)$">
ExpiresDefault A29030400
</filesMatch>
<filesMatch "\.(jpg)$">
ExpiresDefault A29030400
</filesMatch>Enabling G-zip Compression
Compressing files on your server before they are sent to the client?s browser to be unpacked is a great way to speed up a site. The method you use however can vary depending on features available from your host and your hosting environment. If you are using Apache and your host has mod-gzip and/or mod_deflate enabled, you can use the snippets below. Note if you are using Apache 1.3 you will need mod_gzip. 2.0 you will use mod_deflate.
Code:
#Gzip
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript
</ifmodule>
#End GzipAnd mod_deflate
*Note that these directives turn compression on and off depending on the browser as not all browsers support compression,
Code:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|iso|tar|bz2|sit|rar|png|jpg|gif|jpeg|flv|swf)$ no-gzip dont-vary
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.[0678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48, the above regex won?t work. You can use the following
# workaround (comment the above line and uncomment the below line) to get the desired effect:
# BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Make sure proxies don?t deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>CSS Sprites
CSS sprites can also help you speed up your website. Sprites combine images into as few files as possible. Note that not all images are good candidates for sprites. Typically images that are often loaded together on multiple pages are ideal for this process.
Traditionally, you would need to use a program like Photoshop or Gimp to make a sprite image however there is a really useful tool that combines the images and CSS all in two file for you for free!
It?s called SpritePad and you can find it here http://wearekiss.com/spritepad
You just drag and drop your images onto the screen, position them and CSS code is automatically generated to the right. You then just download the files, upload them to your server and you are ready to go.
Serve Resources From a Consistent URL
All the files on your site that are external and needed to render pages must be requested by the browser. Files like CSS and JS are the biggest culprits of multiple http requests. Sometimes common libraries (i.e, JQuery and other JS files) may come pre-installed with plugins or other downloads. If you have plugins that run on JQuery, make sure you are using a local file instead of a Google other CDN.
If you have CSS that can be combined into other CSS files, it is better to combine them to reduce the amount of requests the browser sends to the server. Also, make sure you put CSS requests before external JavaScript requests. Avoid using @import in CSS files.
What tactics do you use to increase site speed?
