Site Speed for Dummies – How to Get Started

You know the performance of your site matters. But everytime you venture into site speed optimization you feel like you stumbled into a land of foreign geek speak.

Unfortunately site speed is a complex topic and technical (“Configure Entity Tags” anyone?). Some changes can require a web developer to implement the changes. With this post you’ll understand better where performance problems can crop up so you can have a better conversation with your developer. We’ll also cover the low hanging fruit that you can tackle on your own as well as the tools you’ll need to get started.

Part of the complexity, as I explain the video below, comes from just figuring out where to start.

When you request a page from a web server, performance can be impacted by a slow web server,  inefficiencies with the code when it is rendering in your browser as well as the size of the files that the server is sending over the network. All of these can impact site speed.

Site Speed and SEO

SEOs will tell you that Google considers site speed as a ranking factor and therefore it is important for SEO. It’s true that site speed has been a Google ranking factor since 2010, but it’s also true that there are more than 200 ranking factors that Google considers. In the grand scheme of things, your site’s performance might impact your site’s SEO …. or it might not.

So why should you care about site speed?

Instead of SEO, what you should really be thinking about is your visitor and your bottom line. Website visitors are notoriously impatient and fickle. Studies repeatedly show that slow sites:

• … have a higher shopping cart abandonment
• … have fewer pages visited
• … make less money

This is not recent news. Amazon found every 100ms of latency cost them 1% in sales and has been optimizing for speed ever since. And back in 2006, Google found traffic dropped by 20% when it took a half second longer to retrieve search results.

Improving site speed may have been a factor in Barack Obama’s 2012 win, by making his donation website 60% faster, the platform team saw a 14% increase in donations.

So if higher engagement and more revenue sounds good to you, you do need to pay attention to your site’s performance and take at least the minimal steps to improve it.

Site problems can be due to:

• Your web server taking too long to respond
• Files that are too big in size as well as too many files sent over the network
• Problems with the code that is being rendered by the browser

Where to Start with Site Speed

1. Review Your Site Speed to Get a Baseline How bad (or good) is your performance? If you have Google Analytics set up the answer is easy to find.
2. Optimize Your Images Most sites can benefit from image optimization.
3. Clean up some clutter Redirects? Lots of third party scripts?
4. Turn on caching For some platforms, turning on caching is a matter of checking some boxes
5. A few more performance hacks These require some editing of files but may be worth it

Get an overall view of your site speed

Google’s PageSpeed Insights is built right into Google Analytics (it’s also available as a standalone tool if you would like quick feedback on a URL).

In Google Analytics, set your timeframe to 3 months or longer and head on over to Behavior -> Site Speed.

What I look at:

• Avg. Page Load Time: 6.21 seconds is not horrible but it’s not great either. The average has been influenced by poorer performance in March, so we are on the right track with better performance in April and May.
• Avg. Server Response Time: Ideally you want this under 0.2, so with 0.14 we are good with this criteria. Slow server response time could be addressed by caching or maybe it’s time for better hosting.
• Slow days: All sites have slow days, but if we are seeing frequent significant spikes, that could be an issue. You’ll need to investigate further. Are you getting a lot of traffic on those days? Is a background process like a backup running?

Next click on “Page Timings” to find out which pages are slower than others. If you then click on “Speed Suggestions” you will see the same list of pages but with “Page Speed Suggestions”.

The Page Speed Suggestions are actually clickable links. If I click on one I get:

Each suggestion can be clicked on to get more details. For example if I click on the “Optimize Images” it gives me a list of images and a potential savings of size (in this case: a 56% reduction, saving 793KiB) if I optimize them.

One really cool feature of PageSpeed Insights is the link at the bottom: “Download optimized image, Javascript and CSS resources for this page.” If you click on this you’ll get minified Javascript and CSS and optimized image files.

Optimize Your Images

Optimizing your images is usually the easiest place to start when it comes to improving your site’s performance.

Tweet: Optimizing your images is the easiest place to start for improving your site’s performance.

If you followed the above steps with PageSpeed Insights you now have optimized images you can use to replace your existing images on your page. But really the best practice is to start with optimized images in the first place. You can:

• Use a graphics editing tool like Gimp or Photoshop
• Use Tinypng.com to optimize your images
• If you are on WordPress: install the WPSmush plugin to further optimize your (hopefully) correctly sized images

Whatever you do, don’t upload an image that is 5298 by 2498 pixels to your site and then use HTML to scale it down (which is done by using the height and width attributes on the img src tag). Why is that? Because you are sending a big file over the network from your web server to your browser (the height and width attributes is being applied by the browser). Remember, as much as possible, you want to reduce in size the files that are being sent along with your page.

Clean up some clutter

If you have plugins (in WordPress) that you are no longer using, be sure to deactivate and delete them. Also if you have internal linking on your site that result in redirects, update those links so they are pointing directly to the target URL.

Although tracking scripts should be loading asynchronously, you should remove tracking scripts that you are not using.

Also Social Share buttons often create extra redirects and slow down a site.

Turn on caching

Today’s websites are built on platforms that dynamically generate the HTML for a page on the fly. WordPress is a good example of this, it stores your content in a database and uses PHP (a programming language) to fetch the content and create the HTML code to show it. But all this technology is slower than good old static HTML.

If your platform supports it, you should turn on caching even if you don’t think you have a server response problem. It’s just one of those “low hanging fruit” items you should just do. WordPress has a number of plugins that implement caching, including the popular W3 Total Cache. Magento has caching as well.

Still slow? A few more tools to check out

I’m going to introduce you to three more tools: Webpagetest.org, GTmetrix and Chrome Developer Tools. Use these tools to zero in on additional problems that your slow URLs (that you identified in PageSpeed Insights above) may have as well as to get a more complete picture of your site’s performance.

Webpagetest.org

When you enter a URL Webpagetest.org gives you a “waterfall” view of the files that are sent from the server to the browser. You can see which files are taking the longest, as well if the server response is slow.

What I really like about this tool is that it shows you when the render starts (so how long before the user sees something on their screen) and when it completes.

GTmetrix

GTmetrix is one of the most comprehensive tools for evaluating site speed. If you want to get a complete list of problems this is a good tool for that. Make sure you check out the YSlow and Waterfall tab as well.

Chrome Developer Tools

If I really need to troubleshoot and diagnosis where a particular slow file is coming from, I use the Network tab in this tool. Chrome Developer Tools is built in right into your Chrome browser and can be activated with the CRTL SHIFT C keystroke (CMD SHIFT C on the Mac).

A few more performance hacks

A few more suggestions for the more adventurous.

Minification

One of the page speed suggestions in our example above was to minify CSS, Javascript and HTML. Minification is when white space is stripped from these files making them smaller and faster loading. The minified files can be downloaded from the link in the PageSpeed suggestions popup just like the optimized images. If you do replace your CSS, Javascript and HTML with minified files, be sure to keep the originals as minified files are hard to read and edit.

If you are on a platform like WordPress, there are plugins that will minify your files.

Eliminate render blocking Javascript and CSS in above-the-fold content

This is a very common recommendation from PageSpeed Insights as well as from the other tools I mention above. What it means is that as your web page renders (draws) in the browser, it will pause to fetch Javascript and CSS files. If you have a lot of Javascript and CSS files, that’s a lot of pausing.

The fix usually involves changing code, but one simple thing you can try to do (if you have access to your code), is to move your Javascript script tags to the bottom of your HTML file so that the pausing will happen at the bottom of the page which hopefully is out of sight unless the user scrolls down. Leave the CSS references at the top of the file. You can also explore loading your Javascript asynchronously and combining your CSS and Javascript files.

There are WordPress plugins that help with this site speed recommendation, but I haven’t checked any of them out yet, if you have and it’s worked for you, let us know in the comments!