The following article is a quick overview of page speed issues caused by large images. It includes links to a couple of useful resources I use all the time when optimizing client’s sites as well as a brief overview of the file size hierarchy.
Google Search Rankings & Page Speed
Did you know: If a mobile web page takes longer than 3 seconds to load 53% of people will consider abandoning it!
Although people are generally more impatient on mobile devices the threshold for desktops is still only 5 seconds. Regardless of device page speed is essential to the user experience.
Page speed is a ranking factor. That’s right, how quickly your page loads directly affects your websites ranking in Google! In addition to directly affecting your rankings it can also affect your engagement ratings (and therefore indirectly affect your rankings further). When users bounce of your page without reading anything or clicking on anything this sends a signal to Google saying “hey, this page didn’t contain the information I was looking for!”. If enough people bounce Google will see this, assume your content is low quality or irrelevant and penalize your rankings.
The average page load time for a user to bounce is 6.9 seconds. If your page is taking around 7 seconds to load not only will you lose the traffic (through a bounce) but it will also affect your perceived quality in Google’s eyes.
Lesson: Google cares about page speed so you should as well!
Images & Page Speed
Google has published extensively on this topic. According to one of their past recent articles having an average of 19 or fewer total images (including logo, header images, content images, footer images etc) on a page led to higher conversion rates, lower bounce rates, and decreased load times. Alternatively having an average of 31 images on the page caused increased bounce rates as well as significantly increased load times.
Lesson: Images slow down your page, make sure you are not over using images on your key pages. According to Google, 19 or fewer images on a page appears to be the ideal number.
Tool: Google Analytics has an average load time metric for your web pages. Taking a look at this report will show you problem pages, once you see the problem pages you can optimize these pages by removing unnecessary images, and compressing images to reduce total file size.
File Sizes & Page Speed
The average page “weighs” 2,486 KB. The more the page weighs the longer it takes to load. The longer it takes to load the more people will bounce, the less Google will value the page, and overall the quality of the page is diminished.
Many times when images are uploaded to websites they are much, much larger than they need to be. Most images are measured in pixel (px) width & height. When images are added to a web page that are 3000 x 2000 px, unless they need to be this large for website display purposes, they are way too big and should be resized. The size will vary depending on the type of image (banner, in line, or footer image) however, in my experience images that are around the 600-800 px wide will be just fine on all devices. Try resizing using a free online tool such as PicMonkey and then uploading the correctly sized file to TinyJpg to reduce the file size. You will want to aim for a file size in the area of 30-50 KB. By minimizing image size and optimizing display for mobile you can achieve significant page speed improvements.
Lesson: Make sure your files are as small as possible to reduce the “weight” of the page, therefore helping to increase speed.
Tool: Try TinyJpg to compress images.
Note: If you are unsure of the best size for your website make sure to talk to your web developer, they will be able to tell you.
File Size Hierarchy
If you are like most people the whole hierarchy for image and file sizes is complete nonsense to you. So here is a quick explanation. They are listed from smallest (Byte) to largest (Gigabyte).
B = Byte the smallest form of data we encounter on a regular basis. Each higher interval is 1,024 x the previous unit. For example a GB is 1,024 MB.
KB = Kilobyte or 1,024 Bytes
MB = Megabyte or 1,048,576 Bytes
GB = Gigabyte or 1,073,741,824 Bytes
For more information on optimizing your image and file sizes or increasing your page speed please Contact Us