Posts

With internet speeds constantly increasing, smartphones becoming the primary way to get online, and people’s attention spans getting shorter than ever, it is absolutely crucial that your website loads quickly. Visitors will not hesitate to click the ‘back’ button and Google has slowly made loading times one of the most important ranking signals it uses. 

At the same time, users have come to expect stylish, high-quality images from any website they visit. They don’t just want to find the best information. They want the best information in the most enjoyable package. 

This creates a catch-22 for website owners. Users want to see a page filled with great images, but they don’t want to wait for it. Unfortunately, these high-quality pictures have the tendency to slow down how quickly websites load. 

Thankfully, there are ways to mediate this by optimizing your images to make loading your web pages as efficient and quick as possible – as Alan Kent, Google Developer Advocate, shares in a recent video:

The video gets pretty in-depth at times and leans into technical details, so we will try to collect the most important tips and info below:

Google’s 6 Tips For Optimizing Online Images

1. Eliminate Image Cumulative Layout Shift (CLS)

Don’t let the jargony name intimidate you. You have no doubt encountered CLS before, and it probably frustrated you.

CLS is where text or images move as each individual component loads. Because of this, you might have text which refuses to stay in place as you try to read it, have new images popping into place where a link was visible seconds before, or potentially open an entirely different page because a link appeared right where you were trying to swipe. 

Though this issue can affect any type of content on a webpage, images are frequently a leading culprit because of the amount of space they fill on a page. 

2. Keep Your Images Only As Large As Needed

It can be tempting to upload images in the largest size possible, to guarantee every little detail will be included without pixelation or artifacting. Some web designers see this as “future-proofing” their site or ensuring the best quality no matter how large an image is shown. 

The problem is that this can be overkill. Even when rendering an image for smaller resolutions, browsers have to download the original image and compress it to render correctly. This slows things down, as larger images take a longer time to be downloaded and rendered in the proper size for the display it is being shown on.

The complication is that displays can range wildly in size and resolution – from tiny smartphones to gigantic monitors. That makes it hard to identify exactly when an image becomes “too large.” 

The easiest way to find this out is by checking out the Opportunities section in the PageSpeed Insights report, under ‘properly sized images’. Here you’ll see which images are larger than they need to be so you can replace them with more properly sized alternatives.

3. Use The Best Image Format

Which file format you choose to save your images in might seem like a minor choice, but it can have major effects on loading speeds. At the same time, choosing the right image format isn’t always as simple as choosing the one which outputs the smallest file.

While formats like JPEG or webP tend to deliver smaller file sizes from the same initial image, they do so by compressing the image. This compression subtly degrades the quality of the image to minimize file size. 

On the other hand, larger file formats like PNG can preserve fine details to maintain the original quality of an image, though this results in larger files. 

In many cases, your visitors may not notice the difference between a PNG or JPEG, making the smaller file the obvious choice. However, more complex images or very large images may look noticeably worse in small formats.

To identify images that may not be in the most efficient format for your site, check out the ‘serve images in next-gen formats’ section of the PageSpeed Insights report.

4. Compress Images Properly

While file formats have a big impact on how large your image files are, most formats allow you to dictate just how much compression occurs. If you’d like, you can prioritize preserving detail while receiving a slightly larger file, or you can prioritize getting the smallest file at the cost of the image quality. 

To figure out what is best for your website, you can explore the ‘encode images efficiently’ section of the PageSpeed Insights report. Here, you’ll find details about images that may benefit from being compressed and how much this might shrink image files. 

5. Cache Images In The Browser

Caching is a process browsers use where they temporarily store images or details from your website to s[eed up the loading process on related pages or if they return to your site. 

If you do this, however, it is important for you to tell the browser how long it should keep these cached images This is done through an HTTP response header containing guidance on how to handle cached files and images. 

If you’re unsure whether you’ve properly configured this header, you can also find details about this in the PageSpeed Insights report, within the ‘serve static assets with an efficient cache policy’ section. 

6. Correctly Sequence Image Downloads

By default, web browsers wait to load details until they are absolutely needed. This is a practice called “lazy loading” that allows browsers to focus on the details you’re most likely to be focused on at the moment. This is not always the best process for loading larger files like images or videos, though. 

To get around this, Google recommends establishing the sequencing order some parts of your site are downloaded and rendered by browsers. 

Specifically, Google recommends using the following sequencing order:

  • “Hero Images” at the top of the page
  • Above the fold images
  • Images just below the fold

After this, Kent says most other images can be lazy-loaded without an issue. 

Again, you’ll be able to find an assessment of how efficiently you are loading images on your website within the PageSpeed Insights report, under ‘defer offscreen images‘. 

For more, be sure to watch the 14-minute long video above or explore more SEO news and tips here.

How long does your website take to load? If it takes more than three seconds, you’re likely losing more than half of your visitors.

It is no secret that everyone wants everything as fast as possible. That is especially true on the web. The faster your page loads, the more people will stick around and the happier they will be with their experience.

What you might not know, is that your site speed can directly affect your conversions and sales.

Data from Kissmetrics shows that up to 79% of customers who aren’t satisfied with your site’s performance say they are less likely to buy from the same site again. Taking that a step further, many first-time customers may leave before they ever get a chance to see what you have to offer in the first place.

Web Development agency Skilled collected 12 case studies from real businesses in an infographic showing just how powerful page load time really is. If you’ve ever doubted the importance of keeping your site optimized to be as fast as possible, you’ll likely be a believer after seeing these:

Page Speed

Clock

Do you know the fastest way to lose potential customers on your website? You might think it would be by creating a page with poor usability, illegible text, or you could get creative and put offensive images on your front page. No matter your choice, there is something that can lose visitors before they even get the chance to see any of those options – long loading times.

Consumers simply don’t accept having to wait for what someone else can offer faster, and this is especially true online. The average consumer is willing to wait approximately five seconds before they become annoyed or frustrated with being forced to wait. If your site takes longer than that for the average user, it is practically guaranteed you are hemorrhaging visitors who aren’t willing to wait.

Long loading times also hurt your site and loses you visitors in a few less direct ways, most notably in rankings. While there are many things we don’t understand about Google’s ranking algorithm, we do know loading speed is one of the biggest factors in establishing your site’s perceived value and ranking.

So, how do you actually go about speeding up your website’s loading times and increasing its effectiveness? These five tips will help you get started:

  • Minimize on-page components. There are plenty of processes going on behind the scenes that can slow a site down. If you can combine style sheets or replace images with CSS, your site will be able to better load everything in a fast manner.
  • Compress large pages. Google has shown time and time again that sites with long-form content, videos, and shareable media are some of the best ways to rank higher, but all the extra content also means there is more to load. Try to compress your larger pages so they take up less space and consume less bandwidth when they load.
  • Use browser caching. Browser caching stores important elements from your site on a viewer’s hard drive in order to improve load times on repeat visits. A shocking number of webmasters forget to implement this tool, which can lead to slower load times for even your most loyal visitors.
  • Optimize visual content. The growing emphasis on visual content might have misled some website owners. If customers enjoy images, video, and graphics, why not fill your site with them? Unfortunately, too many improperly formatted graphics can cause a traffic jam and sluggish load speeds. Take the time to optimize visual content by limiting size, reformatting images into JPEG, and eliminating BMPs, GIFs, and TIFFs, and viewers will love you.
  • Eliminate unnecessary plugins. Particularly if you’re using WordPress, running multiple plugins contributes substantially to slower page load speeds. Though their convenience and ease of use make plugins an attractive option, using too many will cause your load speed to plummet and result in poor user experience. Remove any plugins you don’t absolutely need.