Digitalblend-CL

Magento: Speed up your site

Details

Created on Monday, 14 November 2011 21:47

Website Speedup

In order to get the most out of a website you will need to optimize the website, server, and individual files on the server. Tools like YSlow, Pagespeed, and Pingdom tools will help you out in the process of optimzing your website. Simply enter your Domain or subdomain into the text field, or install the plugin into your web browser and run the tool and view the results.

Often each of these tools will provide a explaination of what you need to do to speedup your site, some of these suggestions are very straight forward, removing unused CSS and compressing CSS and JS are very easy to do, but setting up the .htaccess, vhost.conf, and using PHP includes will depend on what your hosting company will allow. But if you have a large scale website project you will need to learn how to optimize your site and compress the files you have on the server.

Website optimization tools

Below are a few links to some website optimization tools and site documentation, Yslow will require you to have firefox/firebug, safari, opera, chrome, or opera; pagespeed will require you to have firefox firebug. With PIngdom and Gtmetrix you can just go to their site and follow the instructions.

• Google Page Speed
• Google Developer Best Practices
• Yahoo Yslow
• Yahoo Developer Doc
• Pingdom Tools
• Gtmetrix

CSS and Javascript Compresson

When you have a site that is loading lots of individual CSS and JS files you will need to compress and minify the code in these files, this will allow your site to load the files quicker thus speeding up the load time. Another thing you will need to do is use a tool like PNGOUT to further compress the files, if you are going to compress JavaScript, keep in mind that different servers and web CMS will react differently to the JavaScript compression optmizer you use. YUI Compressor, JSMin, and Dean Edwards Packer will change the way your script behaives with the CMS or Estore.

It is important to note that Magento does not react well to Packer, it does not like the way Packer compresses the JavaScript.

• Yahoo compressor
• Pngout
• CSS/JS Compression based on YUI tool
• CSS Compressor

Htaccess Caching

To make many of the suggestions in Yslow and Pagespeed work, you will need to modify the Htaccess file. Things like specifiying the Header date, enable Gzip compression, enable/disable eTag, or the other features you will need to add commands to the htacess file.

• Htaccess Caching
• Htaccess Gzip site speedup
• htaccess Caching
• Htaccess speedup

Htaccess file Header Expire

To speed up the load time of the website I had to specify the future expiration date of all the files on the website that are being loaded into the web browser.

Add an Expires or a Cache-Control Header

	<IfModule mod_expires.c>
	############################################
	## Add default Expires header
	## http://developer.yahoo.com/performance/rules.html#expires
	ExpiresActive On
	ExpiresDefault "access plus 1 month"
	ExpiresByType image/jpg "access 1 month"
	ExpiresByType image/jpeg "access 1 month"
	ExpiresByType image/gif "access 1 month"
	ExpiresByType image/png "access 1 month"
	ExpiresByType text/css "access 1 month"
	ExpiresByType application/pdf "access 1 month"
	ExpiresByType text/x-javascript "access 1 month"
	ExpiresByType application/x-shockwave-flash "access 1 month"
	ExpiresByType image/x-icon "access 1 year"
	</IfModule>
	
	# Set Expires Headers
	<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
	Header set Cache-Control "public"
	Header set Expires "Tue, 14 Aug 2020 03:00:00 PST"
	</FilesMatch>
	
	<FilesMatch "\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|tiff)$">
	Header set Last-Modified "Mon, 31 Jan 2011 00:00:00 GMT"
	</FilesMatch>
	# Set the cache-control max-age
	
	# 1 year
	<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
	Header set Cache-Control "max-age=31449600, public"
	</FilesMatch>
	
	# 2 DAYS
	<FilesMatch "\.(xml|js|css)$">
	Header set Cache-Control "max-age=604800, public, must-revalidate"
	</FilesMatch>

	# 4 HOURS
	<FilesMatch "\.(html|htm|txt)$">
	Header set Cache-Control "max-age=14400, must-revalidate"
	</FilesMatch>

Configure eTags

Configuring eTags in .htaccess file

eTags or Entity Tags allow the web browser to match up components on the server, this will increase the website load time as the web browser and web server if you have lots of files/components to load into the browser. Either you configure the eTag Header or you disable it.

	# BEGIN Turn ETags Off
	<ifModule mod_headers.c>
	Header unset ETag
	</ifModule>
	# END Turn ETags Off

Apache Mod_Header

Http Response and Request Headers

In this part of the .htaccess file, I am having the web server remove the old headerinfo from the file or component.

	# BEGIN Remove Last-Modified Header
	<ifModule mod_headers.c>
	Header unset Last-Modified
	</ifModule>
	# END Remove Last-Modified Header

Cookieless Domain or Sub-Domain

inorder to speedup the website, you will need to specify subdomains to allow parallel download of images and files, this will allow the website to load files faster, but it add more DNS lookups, so it's a trade off. To help speed up the site you will need to also specify a cookieless domain for these sub domains or domains. if you have a plesk server on CentOS/Fedora you will need to setup a ServerAlias and add a DNS Record inside of the Plesk control panel.

Plesk

If you are using Plesk, you will have to make changes to the Plesk Control Panel DNS, vhost.conf file, and have access to the server via SSH to make the changes with the VI tool.

• Setup domain or subdomain on plesk
• Setup domain alias
• Plesk domain alias
• Create domain prefix (Media Temple doc)
• Cookieless domain, CName and server dynamics
• Setup a custom domain
• Static cookieless domain

Subdomain in Plesk

Plesk 10 navigation tutorial

1. Navigate to your Plesk 10 subscription control panel, then click on the "website and domains" and access the DNS Settings by clicking on the link.
2. Click on the add record button and a dialog box will appear.
3. Enter the subdomain prefix i.e. static, www, images, or what ever you want.
4. Enter the IP Address of you web hosting account, you can find it on the DNS settings page.
5. Then click on the drop down menu and select "A"
6. When you are done select "OK"
7. When the dialog box closes a yellow box will appear on the DNS Settings page, click on the Update button to allow Plesk to update the DNS Settings

Repeat the above steps to add additional domains, when you are done you will need to add a domain Alias into the vhost.conf file. The above steps only created a subdomain and does not remove the cookie that is attached to the subdomain.

In some tutorials you will be asked to use CNAME instead of A and to use the "www" subdomain instead of the IP Address, you can try this instead but I am just following what my webhost has suggested in their documentation.

Setup a Plesk Server Alias

Plesk Server Alias

After you have setup the Subdomains, you will have to use SSH and VI to configure the vhost.conf file that resides in the webhosting account and add a ServerAlias tag into the file so that the webserver will read the subdomain.

1. Login to your hosting account via SSH
2. Navigate to "/var/www/vhosts/domain.con/conf/"
3. Type "vi vhosts.conf" and use VI editor to add in "ServerAlias sub.domain.com"; you don't need to add in a "<VirtualHost>" tag in to the vhost.conf file.
4. Replace "sub" with your sudbdomain prefix, and "domain" with your domain name; you will have to add one "ServerAlias sub.domain.com" for each subdomain created.
5. When you are done exit VI editor and
6. Use websrvmng and type the following command using the terminal via SSH "/usr/local/psa/admin/sbin/websrvmng -v -a"
7. WHen you are done with this step type "/etc/init.d/httpd restart graceful" to restart appche.

Apache and PHP

If you are going to use a static server then you will have to manually edit the vhost.conf file and manually add in the information to this file, then navigate to the name/conf folder and create a named.conf file. All of this will be done after you have created the subdomains.

I found some articles about domain aliasing, you can view here.

• Apache Vhosts documentation
• How to setup a Virtual Domain

Static Content from PHP

After you have completed the setup of the cookieless subdomains, you will still have the "www" subdomain, this is important because many online ads being served to your website will require a cookie to be served from your website for the online ads to function properly. To ensure that only the "www" subdomain is being cookied you will have to add some PHP to the top of the template above the opening "" tags at the top of the page.

<?php setcookie("TestCookie", $value, time()+3600, "/", "www.mydomain.com"); ?>

Replace "mydomain" with your own domain name and save the template.

I am including some extra links for Apache Cookieless Domains and PHP Virtual Host.

• Cookieless domain with Htaccess
• Virtual Host Support
• PHP include cookied specific subdomain

Apache Subdomain redirects

Apache Mod_rewrite information

When you setup multiple subdomains you will need to force them to redirect back to the primary domain or subdomain. Here I setup three of the subdomains to go back to www.tilluminati.com, this will prevent the visitor from viewing or browsing a blank page or the subdirectory.

	############################################
	# cookieless domain for images and stuff
	RewriteCond %{HTTP_HOST} ^static\.tilluminati\.com [NC]
	RewriteCond %{HTTP_HOST} ^media\.tilluminati\.com [NC]
	RewriteCond %{HTTP_HOST} ^skin\.tilluminati\.com [NC]
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteRule ^(.*)$ http://www.tilluminati.com/$1 [R=301,L]

Configure Etag Caching

This htaccess command will allow the server to configure the eTag's value and save usage of bandwidth. If the server can't set the eTag value then it will have to search and find a value that will work, this means your site will have to spend more time loading into the browser.

	############################################
	# Speed up caching
	# FileETag MTime Size

Gzip Compression

Gzip Components with .htaccess

Website files take time to be transfered from the webserver to the browser across the network, using gzip compression will help make the files and components smaller and thus decreasing the load time and increase the response time of a website. Besides, Gzip compression is free and cost you nothing to use.

	############################################
	## enable apache served files compression
	## http://developer.yahoo.com/performance/rules.html#gzip
	
	# Insert filter on all content
	SetOutputFilter DEFLATE
	
	# Insert filter on selected content types only
	AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
	
	# Netscape 4.x has some problems...
	BrowserMatch ^Mozilla/4 gzip-only-text/htm
	
	# Netscape 4.06-4.08 have some more problems
	BrowserMatch ^Mozilla/4\.0[678] no-gzip
	
	# MSIE masquerades as Netscape, but it is fine
	BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
	
	# Don't compress images
	SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
	
	# Make sure proxies don't deliver the wrong content
	Header append Vary User-Agent env=!dont-vary

*UPDATE* I added some PRE tags to the article to hi-light the code, and fixed the ordered list position.

• < Prev
• Next >