Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tips For Increasing Your Site Speed! #SFGettingSmarter

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.

  • Login to see the comments

  • Be the first to like this

Tips For Increasing Your Site Speed! #SFGettingSmarter

  1. 1. Tips for Improving Site Speed By George Mortimer
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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/

×