This weeks #SFGettingSmarter session was done by SEM Manager George Mortimer. This presentation gives tips on how to improve your sitespeed. These are handy tips for all online businesses.

1. Tips for Improving Site Speed
By George Mortimer

2. 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

3. What is Site Speed?
Site Speed is a measure of how quick your website loads all of its
Content to the end user.
Site Speed measures three aspects of latency:
1. Page Load Time
Using a sample of data from pageviews it takes a look at the average load
Time for that particular page. It takes into consideration
browser type, location/region.
2. Execution Speed
How long it takes to load specific user interactions that you are looking to track
Such as events, image load times, response time to button clicks etc.
3. Browser Parsing
How quickly the browser can read the document and make it available for user
Interaction.

4. 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

5. 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 companies
Bottom line and how much extra revenue they generate by a simple reduction
In 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

6. 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.

7. Improving Site Speed
As we have discovered, Site speed is very important and we shall now
Take a look at ways of improving it.
• Minimise HTTP Requests
80% 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 Time
This is dependent on how reliable your server is. The target response time
Should be of 200ms or less. If the tips are followed in this article then this
Will greatly help reduce response time.

8. Improving Site Speed
• Enable Compression
Large pages are often nowadays greater than 100kb in size. As a result
They 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 Caching
When you visit a website, the elements of the page that you have visited are
Stored on your hard drive in a cache, or temp storage ready for when you access
The page the next time so the site can load a lot faster and not having to make
Additional HTTP requests.

9. Improving Site Speed
• Minify Resources
Minifying code and removing redundant whitespace, line breaks and indentations
Will 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 against
Your 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 uses
the aforementioned tools to minify the dev files and same them to the
Production site files.

10. Improving Site Speed
• Optimize Images
There are 3 things to focus on with images. Size, Format and the source attribute.
• Image Size
Images that are oversized take longer to load so its important that images
are 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 Format
Make 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 Attribute
Avoid 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 load
times and corrupt user data.

11. Improving Site Speed
• Optimize CSS Delivery
Cascading 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 before
The 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 the
amount of code duplications for rendering the same styles.
• Prioritize Above-the-fold Content
Even though we have just said that its important to optimise CSS delivery by
using external style sheets and reducing inline CSS. User experience can be
improved by loading the above-the-fold content first before the rest of the page
Allowing for a couple of seconds for it to load.
A consideration should be made to split the CSS into two parts. A short inline
Part to load the top section and elements and an external file to load the rest.

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

13. Tools to Use
Here are a list of recommended tools to use when optimizing for
Site Speed and helping identify areas of improvement.
Google Page Speed Insights
https://developers.google.com/speed/pagespeed/insights/
CloudFlare – Content Delivery Network
https://www.cloudflare.com/
W3 Total Cache Plugin for Wordpress
https://wordpress.org/plugins/w3-total-cache/
Smush.it – image compression software
http://www.smushit.com/ysmush.it/