Page Speed 101

How to Improve your page load speed

First – test your site’s page load speed.
This will let you know what you’re dealing with, and what your goal should be.

Use Pingdown and the Google site speed report

PageSpeed — Google’s Page Speed Analyser

Minimise HTTP Requests
Reduce the amount of components that are downloaded to create and render a webpage.
You can do this by simplifying the page’s design.
Combined files are also a way to reduce requests. Combine all scripts into one single script, and combine all CSS into one sylesheet.

Add a Cache Control Header or an Expires Header
On Apache systems, this goes into the root /htaccess or httpd.conf file.
It’s server side code that I have no real idea how to edit; but if you have access to your control panel, you should be able to find it.

By using the Expires Header you make components “cacheable”.
This means that next time someone returns to the website, they won’t have to wait for unnecessary HTTP requests.
Expires Headers are commonly used with images, but can be used on scripts, stylesheets and loads of other things.

This is what an Expires Header looks like:

      Expires: Thu, 15 Apr 2014 20:00:00 GMT

If you have an Apache server, use the ExpiresDefault directive to set an expiration date, relative to the current date:
ExpiresDefault"access plus 10 years"

Gzip Components
Use Gzip to compression elements of the webpage.
Again this is done via server side code
e.g. add the following to the .htaccess file:

Compression reduces response times by reducing the size of the HTTP response.

Gzip can reduce response time and size by over 50%

Put Scripts at the Bottom
Scripts can block parallel downloads; but if you serve your images from multiple hostnames, you can get more than two downloads to occur at the same time.

Make JavaScript and CSS External
Do this because JavaScript and CSS files are cached by the browser

Minify JavaScript and CSS & Remove Duplicate Scripts
Remove unnecessary characters from code to reduce its size thereby improving load times. Remove comments and unnecessary white space.
The size of the downloaded file is then reduced.

JSMin and YUI Compressor are well known tools for reducing JS size.

Avoid Redirects
I have a 301 redirect to my homepage, which I can’t change, which is annoying.
But an annoyingly wasteful redirect occues when a trailing slash (/) is missing from a URL.

Reduce the Number of DOM Elements
DOM elements include DIVs, Body elements on pages, etc.

The number of DOM elements is easy to test, just type in Firebug’s console:
document.getElementsByTagName(‘*’).length

Minimize the Number of iframes
Don’t use lots of iframes on your on webpages.

Reduce Cookie Size – using php or JavaScript
Reduce the amount of unnecessary cookies that your website uses.

Keep cookie sizes as low as possible and set an “Expires date” appropriately

HTML 5 also has a new ‘localstorage’ and ‘sessionstorage’ objects.

Optimize Images
Try using imagemagick

When you see an image using a small number of primary/basic colours don’t use hundreds of colour hex codes.

Try converting GIFs to PNGs and see if there is any memory size saving.

Run something such as pngcrush on all your PNGs.

Run a program such as jpegtran on all your JPEGs. You could also just try reducing the quality in photoshop; i guess.

Check these out too:
http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/

Keep Components under 25K
The iPhone won’t cache components bigger than 25K; so this size or below is recommended.

Use a Content Delivery Network
If a user/visitor is far away from the geogrpahical location of your server, will impact page load speed to that visitor.
A C.D.N. is a number of servers, in different locations, that can be called upon to deliver and render webpages quicker to users in a proximity that is relatively close by.

In Addition some tips from one of the Google WebMaster Tools videos: