Page Speed Optimization – Get Your Website a FastPass

Who has time to wait around these days?  We want it all and we want it now.  From standing in line at theme parks to loading websites, there’s many solutions to make it so we don’t have to wait.  Don’t keep your website visitors waiting for your page to load, optimize your images for faster delivery.

What is Page Speed Optimization?

Page speed optimization is the optimization of web pages so that they begin to render content and load fully in the least amount of time, which is an important part of SEO.  Higher performing web sites get better results and the length of time a page takes to render is one component to the performance of a web site.Below are a few illustrations of how page speed is factored into organic rankings and how page speed can be optimized through optmizing current and new images on a website.  There’s many possible types of page speed optimization, so check back in a bit for Part 2!

Why is Page Speed Optimization Important?

The time it takes a page to load is important to both your website visitors, who are used to getting what they want without waiting (thank you Fastpass) and to search engines (Google) that use page load speed a metric in rankings.  To the search engines, faster pages mean higher crawl efficiency – so Google can crawl and index more pages on your site, helping your site have more pages to rank in Google.  Faster pages cause less visitors to bounce back to search engine results so visitors stay on your site, stay on your site and potentially book on your site.  Google crawling more pages more efficiently and users engaging more on your site instead of bouncing back to Search Engine Results Pages (SERPs) can have a positive impact on SEO and organic rankings.
Overall the impact of reducing the time a page needs to load can yield:

  • More representation in search results
  • Higher visitor retention
  • Higher visitor engagement
  • Higher conversion rates

Page Speed Optimization via Image Improvements

Images can make a page text come alive with vivid color, imagery, and even animation, much to the delight of the visitor and are a great addition to a site.  While adding images to a page, it’s important to consider best practices for the use of these images so they do not inadvertently cause more harm than benefit (through reducing crawlability of site and increased bounce rate). As an example, before, banner ads used to be allowed a maximum of 17k, meaning that all the graphics and animation had to be embedded within only 17K.

Time for an Example

Let’s take the example of a popular George Lopez image for his “It’s Not Me, It’s You” Comedy Tour. Taking an example from, this page, its alrelady 6x larger than the old recommended standard size.  Does it have to be this large you ask. The answer is no, it doesn’t.  As outlined in the example below, there are at least three versions of this image that are smaller file sizes, yet no apparent difference in quality of the image.  The file size goes from 213K to 25.54K to 11.74K down to just 7.416K by opting to “Save for Web” and reducing the “Quality” to 65. That makes the image 3% of its original size, if all the images on the page were optimized like this it could save about 700K, that’s 20% of the original load time – a great improvement for page load speed.

Other Image Best Practices

  • Use minimal image size needed for web resolution. For editing photos, programs like Photoshop often offer “Save for Web” options to optimize the images for use on websites by automatically compromising between image compression (via the JPEG format) and minimal file size. If your image editor does not offer such a setting, configure your image compression settings so they look acceptable at 72 pixels per inch (ppi, or sometimes also referred to as dots per inch, or dpi), using the pixels setting as unit measures for width and height. Set the pixel dimension (typically width) to the size you want the image to be on your page. You can often use JPEG compression as high as 70-85% and retain the image quality you want.

  • Advanced optimization involves further (lossless) compression of JPEG and PNG files. There is a free web-based tool by Yahoo called Smush.it  You can enter an image URL to Smush.it and it will provide the losslessly compressed image. There is also a plug-in for GIMP which is called “Save for Web”. It allows visual adjustment of various image parameters such as quality, number of colors, dimensions, etc to reach optimal file size see http://registry.gimp.org/node/33.

How to Upload Optimized Images to Sitecore – New Images

While there are a many different CMS solutions out there, since we’re a Sitecore Certified Solution Partner, we’ve gone ahead and detailed how to upload new, optimized images to Sitecore and how to replace existing images with more optmized versions. First just follow the steps above to save the image for web in the most optimized way and then follow the steps below.

To upload a new image to Sitecore, you select a folder in the Media Library which will be the destination of the image, and select “Upload Files.” Then, select the desired image. It is also important for SEO to fill in the ALT text for each image, so do that as well

And that’s it!  You now have an optimized image added to Sitecore.

How to Upload Optimized Version of an Image – Existing Images

The example image shown below is 340 KB and it is not optimized.  We want to replace this image with an optimized version, here’s how we’ll do it.

Start by navigating to view the image in Sitecore.  You will see the options above the “Media” field of “Attach”, “Detach”, and “Download”.

Click the “Attach” Button. You will be prompted with the file attachment dialog.

Simply browse to the optimized version of the file and select it. It will upload. Republish the image.  This image is now optimized.

More importantly, everywhere this image is used is automatically optimized without having to update every item which uses this image.

Confirm the Image is Updated

When loading the “Racebook” page, we can confirm that our image has been optimized.

Here is the output from the original image:

Review

Using the techniques outlined above to reduce the size of the image files can aid in the speed that the page is loaded for the visitor. Optimizing the use of the images on a page for search can help the search engine crawlers as well, which will help more searchers find your pages.  There are many existing images that should be optimized and all new images should be optimized before adding to the site.

References for further reading:

http://www.slideshare.net/cwnelson/sitecore-performance-tips

https://econsultancy.com/blog/63443-how-to-optimise-your-images-for-seo

http://www.internetmarketingninjas.com/blog/tips-and-tricks/the-ultimate-guide-for-web-images-and-seo/

https://developers.google.com/speed/docs/insights/OptimizeImages

« Prev Article
Next Article »