We live in a world of instant gratification, where nobody likes to wait or queue up for anything. Thankfully, no waiting is required in becoming a page speed guru!
This article will help you achieve some instant results and provide you with a list of further considerations for your web development team.
What is page speed and how does it affect your users?
Page speed is a metric used to identify the time it takes to display the contents of a web page. If a user experiences too long a wait they can become distracted or leave your website in frustration. This leads to an overall negative user experience and a loss in sales.
Google has carried out its own research which found that users do fewer searches the longer they are exposed to slow speeds (1).
Research conducted by Akamai back in September 2009 (2) concluded:
47% of people expect a web page to load in under 2 seconds (This represents an evolution in expectation over the 2006 study, which was set at 4 seconds or less)
40% will abandon a web page if it takes more than 3 seconds to load
Takeaway Point: Although these statistics are rather old, if the evolution in expectation continues, it’s clear users will expect even faster experiences. A faster website keeps users happy!
How does page speed affect your business?
If you run a website that generates awareness, leads or sales, looking at page speed could help improve your conversion rates.
In 2011, it was reported that Obama’s campaign website increased online donations by $34 million, when page speed was reduced from 5 to 2 seconds (5).
Takeaway Point: Keep your pages fast and snappy. This will prevent users from leaving your page before the content has fully loaded.
In 2010, Google announced that it was adding site speed to their search ranking algorithm (although not giving it as much weight as page relevance). There has been much discussion about what metric causes the most SEO impact, (such as Time To First Byte) because there is no clear definition from Google.
Takeaway Point: Site speed, Page Speed, Time To First Byte or whatever metric used to measure a sites speed, all help to improve the overall user experience, which in turn promotes the type of sharing and linking that search engines love.
How to measure page speed
The following tools will help you analyse the speed of your website and provide suggestions that may help increase the performance of your page:
Google Page Speed Insights
This report is based on generic optimisation rules that should help speed up your front-end code. The tool will grade the speed and user experience from 0 to 100 for both mobile and desktop devices, including ways to fix any potential problems. It is worth pointing out that Google Page Speed does not actually measure the actual speed of your page, so a high score may not result in a faster page speed. Use this tool to verify general best practices.
Dynatrace (Sign-up required)
Unfortunately, you’ll need to provide your email address to receive this free report. When it arrives you’ll have access to a top level summary outlining if your site is “very fast” or “very slow” against leading companies in your sector. If you want to dig a little deeper, the report provides further analysis.
The Pingdom Tools Website Speed test will examine all parts of a web page to identify any performance bottlenecks. It also provides a performance score and ways of improving your site (similar to Google Page Speed Insights).
A real gem in the page speed arsenal. This tool allows you to test your websites page speed from various locations around the world, using real browsers and connection speeds. Tests can be recorded to video for further analysis.
Our personal recommendation. This tool incorporates the best bits from Pingdom, Google and Yahoo.
How to make improvements to your website
If you upload images to your website
Make sure they are compressed before uploading (6), in the right format and set to the correct dimensions (do not use a large image that appears very small on the page). Use online tools such as picresize.com, tinyjpg.com or tinypng.com to crop and compress images for better performance. Image management is the number one cause for slowing down page speed. Alternatively, speak with your web developers to see if they can automate this process for you.
If you use social media widgets or embed video or maps
These can all slow down your page speed. A possible solution is to lazy load these assets which might help improve load time. Lazy loading is a way of loading content when the asset comes in to view or interacted with in the browser, rather than loading everything in one go when you first visit the web page.
If you’re using Wordpress
Check to see if you’ve installed any unnecessary plugins, these could be slowing down your site. Use a tool like P3 to audit your Wordpress plugins based on page speed.
The following tips are general best practices. There might be valid technical reasons to why some of the below can’t be implemented, so go easy on your web developer!
Leverage browser caching
Remove query strings from static resources
This prevents the resource from being cached.
Enable GZIP compression
Gzip compresses files and images on the server before sending them over to the users browser.
Minimise URL redirects
Minimising redirects from one URL to another cuts out additional waiting time for the end user.
Use a Content Delivery Network (CDN)
A CDN is a server setup which allows for faster, more efficient delivery of your website files.
Reduce HTTP requests
A percentage of the time a user has to wait for a page to load is spent downloading images, scripts and style sheets. Reducing the amount of requests a page needs to load will result in a faster page speed.
Sprite your core image assets
A sprite is a collection of commonly used website images. By placing all these images into 1 image file, it will reduce the amount of HTTP requests.
Minify HTML,CSS & JS
This process removes unnecessary characters such as white space, line breaks and comments resulting in smaller file sizes
Don’t lose sight of the real winners or losers when it comes to optimising page speed. These are your end users or customers.
References used in this client guide:
- http://www.slideshare.net/stoyan/yslow-20-presentation (slide 4)
- http://kylerush.net/blog/meet-the-obama-campaigns-250-million- fundraising-platform/
- http://www.techrepublic.com/blog/web-designer/tips-for-optimizing-your- web-images/