Tips for Improving Site Speed

By George Mortimer

The Agenda.

1. What is Site Speed?

2. Why is Site Speed Important?

3. The Stats

4. What Causes Your Page to Load Slowly?

5. Improving Site Speed

6. Tools to Use

What is Site Speed?

Site Speed is a measure of how quick your website loads all of itsContent to the end user.

Site Speed measures three aspects of latency:1. Page Load TimeUsing a sample of data from pageviews it takes a look at the average loadTime for that particular page. It takes into consideration browser type, location/region.2. Execution SpeedHow long it takes to load specific user interactions that you are looking to trackSuch as events, image load times, response time to button clicks etc.3. Browser ParsingHow quickly the browser can read the document and make it available for userInteraction.

Why is Site Speed Important?Site speed is incredibly important because waiting for a website to load is no different to waiting in a long line. It is also one ranking signal in over 200 that Google uses.

Waiting too long you either get bored / angry or move onto another bank / restaurant with a less of a queue, the same applies to websites.

Google takes this into consideration as providing a quality user experience. The faster your site loads the better experience you are providing and therefore Google will favour your site over others.

Having a website with a good Site Speed:• Provides a good user experience• Less people leave your site over others• Increases engagement metrics• Increases overall website goals.

“ At Google, we’re striving to make the whole

web fast. As part of that effort, we’re

launching a new web-based tool in Google

Labs, Page Speed Online, which analyzes

the performance of web pages and gives

specific suggestions for making them faster.

Page Speed Online is available from any

browser, at any time. This allows website

owners to get immediate access to Page

Speed performance suggestions so they can

make their pages faster. “

http://googlewebmastercentral.blogspot.com.au/2011/03/introducing-page-speed-online-with.html

The Stats

It is a well known fact that Site Speed plays an important role in Googles Algorithm but it also plays a major role to many companiesBottom line and how much extra revenue they generate by a simple reductionIn loading times. Lets take a look at the Stats:

• Amazon found an increased revenue of 1% for every 100 millisecond Improvement to their site speed. (Source. Amazon).

• Walmart found a 2% increase in conversions for every 1 second of improvement.

• 47% of web users expect a website to load in under 2 seconds. (source).

• 40% will abandon a web page if it takes more than three seconds to load. (source).

Image Source

What Causes your Site to Load Slowly?

There are a number of reasons why a website may be loading slowly. Follows is a few causes of slow loading times:

• Hosting provider• Unoptimised images• Widget / plugin overload• Incompatible browsers, plugins and apps.• Lots of Ads.• Bulky Code.• Design Theme• External Media.

Improving Site SpeedAs we have discovered, Site speed is very important and we shall nowTake a look at ways of improving it.

• Minimise HTTP Requests80% of a web pages load time is spent downloading the different parts of a page.Images, scripts, stylesheets etc. A request is made for each one of these.Therefore, the more components, the more requests are going to be made. The easiest way to improve this is to:

1. Streamline the number of elements on page.2. Use CSS instead of images when possible.3. Combine multiple style sheets into one.4. Reduce scripts and put them at the bottom of the page.

• Reduce Server Response TimeThis is dependent on how reliable your server is. The target response timeShould be of 200ms or less. If the tips are followed in this article then this Will greatly help reduce response time.

Improving Site Speed

• Enable CompressionLarge pages are often nowadays greater than 100kb in size. As a resultThey are slow to download. The best way to reduce their load time is to ZIP them.A technique known as compression. It reduces the bandwidth of the pages thereby reducing HTTP response time. A majority of web servers can compress files before sending them for download.

• Enable Browser CachingWhen you visit a website, the elements of the page that you have visited areStored on your hard drive in a cache, or temp storage ready for when you accessThe page the next time so the site can load a lot faster and not having to makeAdditional HTTP requests.

Improving Site Speed

• Minify ResourcesMinifying code and removing redundant whitespace, line breaks and indentationsWill keep your pages as small as possible and therefore reduce load times.

Here is a list of tools that Google recommends to reduce code size:• To minify HTML you can use PageSpeed insights chrome extension to Generate an optimised version of your HTML code. Run the analysis againstYour HTML page and browse to the ‘minify HTML’ rule. • To reduce CSS there is YUI Compressor and cssmin.js.• To reduce JavaScripts, try Closure Compiler, JSMin or the YUI Compressor.

Taking full advantage of these tools, you could create a build process that usesthe aforementioned tools to minify the dev files and same them to the Production site files.

Improving Site Speed• Optimize ImagesThere are 3 things to focus on with images. Size, Format and the source attribute.

• Image SizeImages that are oversized take longer to load so its important that imagesare as small as possible. Image editing tools should be used to:

1. Crop images to correct size.2. Reduce colour depth to lowest possible level.3. Remove image comments.

• Image FormatMake sure that an appropriate image format is used. JPEG is the best bet,Then PNG, although older browsers may have difficulty supporting this. GIFs should only be used for small simple graphics. Do Not use BMPs or TIFFs.• Src AttributeAvoid empty image src codes. In the HTML, the code for an image includes:<img src=“”>When there is no source, the browser continually makes a request to the Directory of the page or to the page itself. This can add to unnecessary loadtimes and corrupt user data.

Improving Site Speed

• Optimize CSS DeliveryCascading Style Sheets or CSS contains the coding for how your webpage looks.The website accesses this in two ways. In an external file which loads beforeThe page renders, and inline, which is inserted into the document itself. An external sheet is preferred as it reduces the size of the code and reduces theamount of code duplications for rendering the same styles.

• Prioritize Above-the-fold ContentEven though we have just said that its important to optimise CSS delivery byusing external style sheets and reducing inline CSS. User experience can beimproved by loading the above-the-fold content first before the rest of the pageAllowing for a couple of seconds for it to load. A consideration should be made to split the CSS into two parts. A short inlinePart to load the top section and elements and an external file to load the rest.

Improving Site Speed

• Reduce the Number of PluginsToo many plugins slow a site down. Create security issues and moreoften than not cause crashes and break the websites structure and code. To monitor which plugins are causing the most grief and slowing down siteperformance, disable some of them then measure the site performance. This will allow you to identify and remove plugins that are hindering site speed.

Tools to Use

Here are a list of recommended tools to use when optimizing forSite Speed and helping identify areas of improvement.

Google Page Speed Insightshttps://developers.google.com/speed/pagespeed/insights/

CloudFlare – Content Delivery Networkhttps://www.cloudflare.com/

W3 Total Cache Plugin for Wordpresshttps://wordpress.org/plugins/w3-total-cache/

Smush.it – image compression softwarehttp://www.smushit.com/ysmush.it/