SEO 101: Page Speed

Increased consumer expectations, exacerbated by the rise of mobile, has put more pressure on retailers to deliver a faster online experience. Optimising page speed is more important than ever, yet many concentrate on improving server performance and miss out on some of the easier page speed optimisations.

Why page speed is important

SEO

Site and page speed has long been one of the signals Google uses to determine search page rankings. While page relevance remains the key determinant for rankings, site speed should still be considered important for SEO best practices. If all else is equal then page speed could very well be the deciding factor in a fight for position 1.

Additionally, with Google putting increasing importance on the mobile experience, site speed is even more of a sticking point for customers who look for instant access on the move. Google notes that the average U.S. retail mobile site loaded in 6.9 seconds, despite the vast number of shoppers who expect both mobile and desktop sites to load in under 3.

In response to mobile demand, Google is experimenting with mobile first indexing which will come into effect by the end of the year. This will mean your mobile site will be the primary source Google uses when deciding search rankings. Even retailers and developers that have dedicated serious energies to optimising site speed will need to go back to the drawing board in the likely case that their mobile site falls short.

User experience

While SEO might be one priority, user experience remains the most important driver for optimising site speed. Research has shown 47% of customers want a page to load in 2 seconds or less and 40% expect it to load in under 3. Increased mobile use has only increased these expectations, with many demanding the same speed as desktop for instant on the go access. With Google putting ever more emphasis on mobile sites, page speed is quickly becoming a key determinant in the quality of a site's overall experience.

Of course, that’s just expectations. When it comes to actual impact, page speed has been shown to have a significant effect on a range of important metrics. Over 25% of visitors run out of patience and abandon a page after just 4 seconds; that number steadily increases with every additional second. For those that are willing to stick it out, 79% who experience poor website performance are less likely to come back.

For ecommerce retailers, the stakes are even higher. Slow page speeds and high bounce rates at any point in the user experience, from the first landing page to the last stage of the checkout, means lost sales. That means every page needs to be meeting tough customer expectations, otherwise page speed could be directly impacting your bottom line. Additionally, 44% of shoppers who have a poor website experience will tell a friend about it. As well as losing current and new customers, retailers could be looking at losing potential ones as well.

Images and page speed

Now you’re convinced that page speed should be your next priority, it’s time to look at what you could be doing to improve it.

There are many ways to improve page speed and most of the more technical tasks may already be a part of your regular site maintenance. Minifying code and looking at server performance are probably familiar exercises for your technical developers, but they aren’t the only things that could be slowing down your site.

Images are often an overlooked part of page speed optimisation and yet they could be the biggest singular issue impacting your overall site speed. Even if you feel your site doesn’t use a lot of images, you may be surprised by their significance. On average images make up 63% of overall page weight, making them the biggest single resource type on a page.

How to optimise your content for better page speed

Content Delivery Networks (CDNs)

CDNs are a great way of speeding up the delivery of all content to visitors, making this a good page speed solution for most websites. The time a page takes to load can be delayed by many factors specific to a web page, but the actual physical distance between a visitor and the hosting server effects all web pages. A CDN therefore aims to minimise this distance and the delay, subsequently improving page speed.

A CDN does this by storing a cached version of the content on servers across multiple locations, known has PoPs, or points of presence. A CDN essentially improves your overall coverage to deliver content as near to each visitor as possible. This means that instead of delivering content across continents, a web page is loaded from a neighbouring country or even within the same country as the visitor.

As well as reducing page speed a CDN can help handle traffic spikes as content is delivered from a range of servers rather than overloading just one for improved load balancing. It can also act as an additional security barrier on the edge of your network by blocking DDoS floods and has become increasingly easier and more affordable to set up.

Expires headers

Like CDNs, expires headers or a caching plugin can help speed up the delivery of content by using a cached version. Expires headers tell the browser whether to serve content from the webserver or from the browser's cache. This ensures users don’t have to wait around downloading the same files again, plus it minimises the number of HTTP requests made. This won’t improve page speed in all instances however, as using the browsers cache means expires headers only work if the user has visited the site before. The good news is a caching plugin or even manually setting up expires headers is easy to do.

Resizing and compressing images

Uploading images without any optimisation results in unnecessarily large image files and your CMS may only be resizing images as they are served, with little or no compression. Even a CMS doing a fairly good job of compressing images will do so at a pre-set rate, so images will still have unnecessarily large file weights.

Writing for Search Engine Land, Kristine Schachinger notes that in the cases of websites with multiple images per page, “images average 40 percent to 60 percent of the page weight, with a potential 30 percent to 50 percent image weight savings had the images been processed before upload.”

Resizing and compressing images is easily done with a proper image tool such as Photoshop. This enables you to adjust the size of the image, ensuring each one is never uploaded in a larger size than necessary. Ideally, there should be multiple images resized specifically for desktop and smart devices, however this is rarely practical or achievable. It should therefore be best practice to resize images to the largest size needed, but no bigger.

Similarly, the quality can be adjusted to find the lowest possible image quality, and therefore file weight, without affecting the appearance of the image. Print quality images aren’t necessary for desktop and can often be greatly reduced with little impact to the image itself. Compressing an image for upload depends on the type of image and therefore the file type.

JPEGs

JPEGs are one of the most common file types, along with PNG. As the most common file types JPEG and PNG are often used interchangeably when they in fact have unique uses. JPEG is the right file type to use for photographs rather than logos or artwork.

JPEGs use a lossy compression where data is lost as the file is compressed; however, the human eye won’t see this lost data, especially on desktop. This means JPEGs can often be saved a reduced quality without any negative impact on the image. You should never save a JPEG below 50%, and 75% is often a good target. To do this in Photoshop simply go to File > Save for Web & Devices; after selecting JPEG as the file type you can change the quality of the image.

PNGs

PNG images are used for artwork such as logos and line art. A key distinction with a JPEG image is a PNGs ability to show transparency. If a logo or artwork is mistakenly saved as a JPEG, the artwork may have an inferior quality. Conversely, a PNG file with no transparency could be saved as JPEG with little or no impact on its quality but could cut down on the file weight by 3-5x.

Unlike JPEGS, PNGs don’t lose any data when the image is saved for a lossless compression. PNGs have a choice of a 24-bit or 8-bit file and can be saved as the smaller of the two to reduce the image size. You can do this by also going to File > Save for Web & Devices. Here you can select the file type, such as PNG-8, and control whether to enable transparency and adjust colours, both of which can also reduce the image size. Black and white images, for example, can be set grayscale to ensure the image isn’t using any unnecessary colours.

GIFs

A GIF should only be used for an animated image. If you have a non-animated GIF or a GIF that could be non-animated without detracting from the experience of the page, converting it to a PNG file could make it 21% smaller.

Image loading

Even after compressing and uploading your image, there are ways to positively impact the page speed or visitors perceptions of the page speed. Many websites, especially those that are more image heavy, use styles to hide images until they need to be visible, such as by scrolling.

For example, images below the fold may be allowed to load more slowly so that critical images above the fold can load quicker and improve the user experience. Alternatively, a lazy loading method saves on bandwidth by only loading the remaining images when they come into view.

Using a CSS sprite is also a popular loading method and is essentially one big image containing all your images. A CSS uses a set of coordinates to show one section or image while all the rest are hidden. This improves page speed by minimising the number of requests that need to be made and is easy to use with tools such as SpriteMe.

Finally, to simply enhance user’s perception of page speed, you can use a progressive setting when saving a JPEG. According to Kristine Schachinger, a progressive setting will enable images to ‘fade into’ the document when loading into the browser. This should minimise problems like page jumping and create the appearance of a faster loading page.

Overlooking page speed

With Google looking at mobile first indexing before the end of the year, no one should be overlooking their site speed. While your website may have been regularly tweaked and changed over the years, can you say the same for your mobile site?

Despite its growing importance site speed isn’t getting any easier with the development of ever more sophisticated web design and functionality. Image weight alone nearly doubled for the average web page in the three years to 2015. If retailers ever hope to deliver the mobile experience that consumers are demanding and that Google is prioritising, some essential optimisations will need to be on the checklist this year.

Without the right maintenance page speed can easily start to slip. With mere milliseconds making all the difference and ecommerce managers juggling a growing list of website optimisations, retailers could be in danger of letting page speed go unnoticed by everyone but their customers. To avoid a gradual build-up of large image files and other sloppy page speed practices, retailers will need to ensure site speed optimisation is a dedicated ongoing process.

To find out more about improving your site speed and enhancing your user experience or optimising your SEO strategy, contact one of our team today on 01183 805 705.