Image SEO - Image optimization for search engines

In this guide, I will discuss the following:

• What exactly image optimization for search engines (Image SEO) is
• The benefits of it
• My top 15 tips for optimizing your images
• How you can use different tools to identify problems with the images on your website
• Ways to optimize your images for Google Lens

After reading this guide, you should understand why image optimization is crucial for your website and how it can help you improve your position in search engine results pages (SERPs) and Google Images.

Understanding image SEO and its benefits

Using lots of images on your website is not only beneficial, it's actually recommended. Humans are visual by nature, and nothing grabs our attention like an appealing image. Studies show that online content containing images is viewed up to 94% more often than content without images.

In other words, incorporating images into your content is crucial to capturing users' attention and improving your rankings.

But how can you ensure that images actually contribute to your search engine optimization efforts? This is where image SEO comes into play.

Image SEO involves optimizing your images to increase their visibility in Google Images and the SERPs. This means that they could potentially even appear in the Google Image Pack...

Google Search Result

Search Result Thumbnail

Comprehensively optimizing your images offers a variety of benefits, including:

1. Improved dwell time: engaging images on your pages increase the likelihood that users will want to spend more time with your content. This leads to longer dwell time, which has a positive impact on your search engine optimization.
2. Improved accessibility: Adding alt text (alternative text) to images gives search engines additional information to better understand the content of the images. Alt text is also displayed by search engines when an image cannot be loaded. In addition, providing alt text improves the accessibility of your site for users who use screen readers. These devices convert digital text into Braille or synthesized speech to make content accessible to users who cannot see images. This is not only helpful for these users, but also beneficial for your search engine optimization.
3. Better UX (user experience): Optimized images that display smoothly contribute to an improved user experience. They reduce the risk of oversized images cluttering the screen and obscuring other elements. Poorly optimized, bulky or incorrectly formatted images can significantly increase the loading time of your page. Not only does this lead to a negative user experience, but it can also affect your rankings. By optimizing your images, you can achieve faster load times and improve the user experience of your website.

How to choose the optimal image file format for your website

On the internet, all graphics are available as image files. These files exist in different formats, and while you can often convert the original file format to another, this is not always advisable. The different formats present the same images in different ways and vary in file size.

Each file format is designed for a specific purpose and plays an essential role in terms of appearance, performance and scalability.

1. Appearance**:** Some image formats offer more detail and higher quality than others.
2. Performance: Some image files take up more disk space than others, which can affect the load time of your website.
3. Scalability: While some image formats can be scaled without loss of quality, others are less suitable. This can affect the display on different screen sizes.

The files on your website should have a small file size and load quickly (performance) without compromising quality (appearance/scalability).

The different image file formats

Image formats can be divided into two main categories: Raster files and vector files. Each category has its own purpose.

Vector graphics use lines, points and polygons to represent an image. They are particularly suitable for simple geometric shapes such as logos and icons. Vector files can be infinitely scaled without loss of quality, making them ideal for high-resolution screens and different sizes. However, they are not the optimal format for storing photos.

Vector file formats:

• SVG
• PDF
• EPS
• AI

Raster graphics, on the other hand, use pixel values within a rectangular grid to display an image. They are more suitable for complex images such as photos. Unlike vectors, these file types are resolution-dependent and based on their size. This means that they cannot be scaled without losing quality and becoming pixelated. Most images on the Internet are in raster format.

Raster file formats:

• JPEG
• PNG
• GIF
• TIFF
• PSD

Which image format is best for SEO?

The most important factor is the actual file size of the images (in kilobytes): Always try to keep this under 100 kilobytes or less whenever possible. If a larger file is required (e.g. for hero or banner images), it can be helpful to save images as progressive JPEGs. Progressive JPEGs allow images to be displayed gradually as they load, allowing a blurred version of the full image to appear first, gradually sharpening as more bytes are downloaded. So choose the best format for your needs first and then adjust the settings accordingly!

Some popular tools for image compression:

1. GIMP: A cross-platform, downloadable image editor.
2. TinyPNG: Uses intelligent lossy compression techniques to reduce the file size of your PNG and JPG files.
3. Smush: An image compression and optimization plugin for WordPress.
4. MinifyWeb: A free online service for compressing web files.

Common image formats for the internet are JPEG, PNG, WebP, SVG and GIF.

Not all image formats are supported by all browsers, such as TIFF or BMP files. Therefore, I will cover the image file types that are generally supported by web browsers. You should choose the most appropriate format for the images on your website.

JPEG - Joint Photographic Experts Group:

A JPG file is a raster-based image intended for use on the web and in print. The JPG format is the standard file format used by digital cameras and is most commonly used on the Internet due to its compression and universal support.

These files are best suited for storing photos with small file sizes and little noticeable loss of quality. JPGs use lossy compression, which means that the quality decreases with each re-save.

JPGs need to be saved at the correct size and resolution for end use. Social media platforms use specific image sizes to control resolution, avoid pixelation and image stretching, and ensure the photo is fully viewable.

Advantages of JPG:

1. Universal browser support
2. Small size of files and email attachments, fast loading
3. Supports the display of millions of colors
4. Sharp, high quality images

Disadvantages of JPG:

1. Does not support transparent backgrounds
2. Lossy image compression leads to low quality or poor readability of text
3. Not to be used for computer-generated graphics

PNG - Portable Network Graphics

A PNG file is the standard for use on the Internet. These files are pixel-based and cannot be enlarged without becoming pixelated. Similar to JPGs, this means that they must be exported at the correct size for end use.

However, a PNG file supports transparent backgrounds and retains a higher overall image quality than JPGs for graphics (not photos) due to lossless compression - you can save a PNG file without any loss of quality.

PNG files are much better suited for graphics with fewer colors and quick color transitions that need to remain sharp, such as logos, icons and simple illustrations.

Use PNG files on your website and social media as they produce a sharper, clearer image on digital and mobile displays. Optimize your PNG files for the web by keeping the file size as small as possible while maintaining good quality.

PNG-24 exports a sharper image than PNG-8 because it stores an image with more colors, but the file size can be much larger. If your website's CMS does not allow SVG files to be uploaded, a good quality PNG file is the next best thing.

Advantages of PNG:

1. Universal browser support
2. Supports transparency
3. Best suited for graphic elements
4. Lossless compression
5. Small file size with limited colors

Disadvantages of PNG:

1. Large file size with millions of colors
2. Not ideal for printing - optimized for the screen

WebP

WebP is an image format developed by Google in 2010 specifically for better lossless and lossy compression of web images.

Next generation image formats such as JPEG 2000 and WebP offer better web compression than PNG or JPEG. Switching from JPEG and PNG to WebP can help save server space as the image compression retains the sharpness of the original image AND significantly reduces the file size.

This means less data consumption and faster downloads. According to piio, WebP reduces file size by almost 35% compared to JPEG and 50% compared to PNG.

Unfortunately, the WebP format is not compatible with most CMS platforms and often requires a plugin extension or workaround to upload these files, which is why we have not yet optimized our website's images with this file format.

Advantages of WebP:

1. Smaller file size with the same image quality
2. Uses both lossy and lossless compression
3. Supports transparency

Disadvantages of WebP:

1. Not supported by all browsers, especially Safari and Internet Explorer
2. Not supported by all CMS platforms, including Squarespace

SVG - Scalable Vector Graphics

SVG is an extensible markup language (XML) developed by the World Wide Web Consortium (W3C) for vector-based images to describe two-dimensional graphics.

An SVG does not use a pixel format, which means that the image can be scaled and a very high quality is maintained. These files support transparent backgrounds and can be opened in image editing programs and web browsers.

An SVG file is the ideal format for logos, icons and simple illustrations as it offers the sharpest graphic quality compared to PNG and JPG (in that order).

Advantages of SVG:

Universal browser support Small file size Lossless scaling for simple shapes and text Supported by illustration software

Disadvantages of SVG:

Not an ideal format for images or complex drawings Not supported by all CMS platforms, but workarounds are available Not supported by some standard image editing programs

Resizing images for use on the internet

It is important to know that image size and file size are two different things. Image size refers to how large or small an image is in relation to its width and height (e.g. 1050 pixels by 1000 pixels). The file size is the amount of disk space it takes up (e.g. 350 KB).

Images with large dimensions (width and height) can slow down the loading speed of pages considerably. This is because the browser has to load the entire image, even if it is larger than the maximum width displayed by the website.

For example, if the maximum width of your blog is set to 650 pixels and you upload an image with a width of 5,500 pixels, the browser will still have to download the full-size image. This can significantly slow down the loading speed of a page.

The image must therefore be adapted to the intended display size.

Of course, this means that you need to check the maximum width and height of the intended display size. You can find out how to do this in the helpful guide I have linked to.

Once you have determined the correct dimensions for your images, you can resize them. One of my favorite tools for resizing images is Bulk Resize Photos.

All you have to do is open it in your browser and then drag your images over or upload them from your device.

Once your images have been resized, you can download them to your site.

High-resolution images can also affect page load speed. Granted, these images look great and are ideal for print, but when it comes to uploading them to your website, you'll have to sacrifice some of that quality in favor of a faster and more responsive site.

The standard resolution for images on the web is 72 pixels per inch (PPI). Pixels (px) are the individual dots that make up images on our desktop and mobile screens. PPI indicates how many of these dots appear within one inch of space on the screen.

Most mobile and desktop screens display images at 72 PPI, so a higher resolution won't necessarily make your images look better.

To summarize, always size your images to fit the intended screen size and limit your image resolutions to 72 PPI or less.

How to optimize images to speed up your website

Optimize your image

Image optimization is the process of converting images to the smallest possible file size without sacrificing quality. In addition to their smaller size, optimized images require minimal HTML/CSS resizing so that the browser can render the image as it appears on the web page.

There are four common methods of image optimization - and you should use them all to achieve an optimal balance between file size and image quality.

Compression

You can use lossy and lossless compression algorithms to further reduce the file size. With lossy compression, redundant pixels within an image are found and reduced, while with lossless compression, the data within an image is rearranged without affecting any pixels.

The best way to compress individual images is with tools such as Kraken and Optimizilla. If you're a developer, you can also use programmatic tools like imagemin that work with build tools like Gulp as part of an automated workflow.

Perform load tests

Most businesses are aware of the importance of performance when it comes to ensuring an ideal user experience and the best search engine rankings.

Google PageSpeed Insights is a good first step in identifying issues with a website or application. After entering your URL, you can see key performance metrics and get specific advice to make important improvements.

While PageSpeed Insights is helpful for an initial check, load testing is the best way to keep an eye on performance over time. These load tests can also be targeted at key user workflows to ensure maximum performance.

LoadNinja makes it possible to create and run load tests with real browsers. After recording a load test through a browser-based interface, you can replay it across tens of thousands of browsers in the cloud to identify key bottlenecks.

Descriptive alt text

Descriptive Alt TextAlternative (alt) text is designed to convey the "why" of the image in relation to the content of a document or web page. It is read aloud to users by screen readers and indexed by search engines. It is also displayed on the page if the image cannot be loaded, as in this example of a missing image.

Icon for a broken image with alt text under "Tourists pose for a photo at the foot of the John Harvard statue".

Write a good alt text

Add alt text for all non-decorative images. Keep it short and descriptive, like a tweet. Do not include "image of" or "photo of." Leave the alt text blank if the image is purely decorative. It is not necessary to write text in the Title field.

Why is alt text important?

Alt text provides context for people

There are many good reasons to invest the time in writing alt text for the images on your website, but the most important goal is to ensure that visitors of varying abilities are well served. Alt attributes allow screen readers to read the information about the images on the page to help people with visual impairments, low vision, varying learning abilities, and people who cannot otherwise view an image online.

Alt text provides context for image searches

Another great reason is that it can help search engines like Google better understand your photos and rank them in the image-based results that are so prevalent.

You see, image packs show up in searches when Google interprets the query in a way that is best supported by visual accompaniment. Visual search makes searching easier when you don't know what you're looking for, or when you're looking for visual guidance for inspiration or to further refine your search.

While accessibility is the most important reason for including alt text, providing contextual information to search engines is another important reason. When optimizing for image search, you should pay particular attention to ensuring that images show up when users make text-based search queries.

To do this, follow image SEO best practices such as:

Modern file formats Alt text Relevant file names Schema markup

What does the alt text look like in HMTL code?

It's easy to see what the alt text looks like in the HTML code of a website. You can right-click on any image and "inspect" to open the Chrome DevTool and search for "img alt".

Is alt text a ranking factor?

According to John Mueller from Google, alt text is a ranking factor for image search. In general organic search, Google treats alt text like any other text on the page. Since the text on your page contributes to the overall ranking, alt text is obviously a part of that overall picture, but it's good to get confirmation from a Google representative that your investment in alt text will be most beneficial to your image search ranking goals.

In addition to implementing best practices for image titles and file names, alt text is critical for computer surfers of varying abilities. It also gives context clues to bots that are programmed to understand the content of your website.

Alt text gives you another opportunity to include your target keyword. Since keyword usage on the page is still an important factor in search engine rankings, it's in your best interest to create alt text that both describes the image and, if possible, includes a keyword or keyword phrase you're targeting.

Additionally, if traffic from image search is an important part of your SEO strategy, it makes sense to give Google the right information about your images to convey the relevance of the topic. You can do this by using modern file formats, alt text, relevant file names and schema markup correctly.

Relevant file names

It is good practice to choose the names of your image files so that they are relevant to your image. However, when it comes to search engine optimization, it is important to use descriptive file names.

Normally, a file name would be something like "IMG_948392.jpg" or something similar. However, such file names are not helpful for search engines. Therefore, it would be best if you change the file name from its default name so that the search engines can understand your images and ultimately improve your SEO value.

Take this simple, delicious image of an ice cream for example.

Strawberry ice cream The image above could potentially be called "strawberry-ice-cream.jpg" depending on the context, which makes it easier for users and search engines to understand the purpose of the images used in the content.

Don't overload keywords

This is one of the biggest mistakes when it comes to naming images. It would be best if you kept in mind that naming images does not mean that you are inserting keywords to boost your rankings.

If you do this, it won't do your SEO any good. Example: If I name the above image as "best-strawberry-ice-cream-with-essence-available.jpg", Google will only consider this image as spam.

Therefore, it is recommended to keep your image names short and only use your main keyword.

Keep your image names short

We recommend that you keep your image names short and concise. Try to limit your image names to 5 words or even less than 5.

Separate your image names using hyphens. For example: "strawberryicecream.jpg" is difficult for Google to understand. So call it "strawberry-ice-cream.jpg" to make it easier to understand.

The argument for responsive images With so many different sizes possible on different devices and pages, the best way to manage this complexity is to use responsive images on your website.

Simply put, you give the browser a list of image URLs via the srcset attribute instead of a single image URL in the src attribute. The browser then automatically loads the image in the correct size, depending on the user's device. You can find out more about responsive images in this guide.

Example of a responsive image tag with srcset attribute:

Again, your CMS or the theme you are using might already implement responsive images. If not, you can always use ImageKit's real-time transformations to generate the different sizes you need for your responsive image tag.

Implementing this feature would require technical changes, such as changing the theme or template of your website. However, this would be a one-time change. If you do it right, you can be sure that your browser will always use the correct image size.

Optimization of captions and accompanying text

"Optimizing captions and surrounding text" refers to improving the text elements that accompany your images to improve their overall SEO value and visibility. This applies to both the caption directly below the image and the text surrounding the image on the page.

When optimizing captions, it is important to provide clear, descriptive and relevant information about the image. Captions should be concise but informative and provide a brief summary or context to help search engines understand the content and purpose of the image.

In addition to captions, the text that accompanies the image also plays an important role in image SEO optimization. It is important to ensure that the text around the image is relevant and naturally written. By seamlessly integrating keywords that relate to the image and its topic into the accompanying text, you can further increase the visibility and relevance of your images.

Remember that search engines rely on context to understand the meaning of an image, and optimizing captions and surrounding text will help provide this necessary context. It's helpful to include relevant keywords and phrases that match the image and your overall content strategy.

However, it is important to avoid keyword stuffing or misleading captions. Focus on providing valuable information that is truly relevant to both the image and the overall content of the page. This way, you can ensure that your images are effectively optimized for search engine optimization (SEO), which will increase the visibility of your website and lead to more organic traffic.

Create added value

Your captions should provide users with additional information that enhances their understanding of the image. This can include interesting facts, historical context or personal anecdotes.

For example: "The Eiffel Tower in Paris, France. It was built in 1887-1889 as the centerpiece of the 1889 World's Fair".

You don't have to caption every single picture on a page. Only add captions that you believe will improve the usability of the page and provide additional value to the reader.

Add keywords

You should also optimize your captions by including keywords in them. This helps search engines associate your images with specific keywords that match users' search queries.

This way you can increase the relevance of your content and increase the likelihood of your images appearing in the SERPs and on Google Images when users search for a keyword.

To find keywords for your captions, you can use our old friend, the Keyword Magic Tool. Follow the steps above to access the tool, enter your keyword and select the most relevant ones to include in your caption.

Using schema markup for images

There is a special type of schema markup called ImageObject. This is a structured data format that you can use to provide search engines with detailed information about the images on your website.

It helps search engines understand the context and content of your images, which can lead to better indexing and visibility in search results.

This means that your images may be displayed to users who are actively searching for visual content related to your niche.

Implementing ImageObject Schema markup can lead to rich results that can include features such as image thumbnails, captions and other visual enhancements.

Image thumbnails are generated by search engines themselves based on various factors such as the content of your page, the images included, and the match to the search query.

These eye-catching additions can make your listings more attractive to users and improve click-through rates (CTR).

You can provide detailed information such as:

The name or title of the image A description of the image content The URL of the image file The URL for a thumbnail of the image The author or creator of the image The date the image was created or published If you implement Schema Markup, you may see the following types of rich results, among others:

Image thumbnail: A small preview or thumbnail of the image. Title: A title or description that relates to the image. Author or source: Information about the source or creator of the image. Publish Date: If applicable, the date the image was published or uploaded. Description: A brief description or caption associated with the image. Additional Links: Links to related content or pages on the site. Ratings and reviews: If applicable, user ratings or reviews of the image. Image license information: Details about the license or usage rights of the image. Currently, Google Images supports the following types of structured data:

Products Videos Recipes Suppose you run an e-commerce website where you sell shoes. If you use schema markup to define an image as a product, Google could display the image with a price tag icon (often referred to as a "badge") in the Image Pack on the SERPs and in Google Images. To do this, you need to add product structured data to your pages.

Create unique images

You want your photos to stand out on your website. If you fill your website with stock images, you'll look unoriginal - like thousands of other websites that don't stand out.

Too many websites are cluttered with the same generic stock photos.

Think of a corporate website, a consulting firm, a company that prides itself on customer service. All of these websites use virtually the same image of a smiling businessman.

I'm sure you've seen one that looks like this before:

ImageCompression Even if you've optimized your stock images perfectly, they don't have the same impact or potential SEO benefits as a high-quality original image.

The more original images you have, the better the experience for the user and the better your chances of ranking for relevant search queries.

Remember, large images are more likely to show up in Google Discover.

As Google recommends in its resource for advanced SEO,

"Large images must be at least 1200 px wide and enabled by setting max-image-preview:large or by using AMP."

Don't use your logo as an image.

Creating an image sitemap

XML sitemaps help search engines find your pages for indexing, while also helping them understand the structure of your site. I like to think of them as a kind of roadmap for search engines. Image sitemaps are similar, but there are some important differences.

An XML sitemap is a comprehensive list of all the pages on your website. It contains URLs for all types of content, including blogs, articles and product pages. You can also add image URLs to an XML sitemap so that Google can crawl and index them. This is called adding image sitemap tags. If you want to learn more about this, read Google's sitemap guide.

Image sitemaps provide Google with a list of all the images on your website.

This increases the likelihood of them appearing in image-specific search results such as Google Images, as Google can find and index them. This way, you can reach more users who are specifically searching for visual content.

When creating a regular XML sitemap that contains image URLs or an image sitemap, certain image tags need to be included. Here's advice straight from Google:

What are open graph meta tags?

Open Graph meta tags are snippets of code that control how URLs are displayed when they are shared on social media.

They are part of Facebook's Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter (in the absence of Twitter Cards).

You can find them in the section of a website. All tags with og: in front of a property name are Open Graph tags.

Here are some examples from our guide on how to become an SEO expert:

Why are Open Graph tags important?

Arguably, people are more likely to see and click on shared content with optimized OG tags, which means more social media traffic to your website.

There are three reasons for this:

They make the content stand out on social media. They tell people at a glance what the content is about. They help Facebook understand what the content is about, which can increase your brand's visibility in search. Let's go into more detail on this last point, as it's often overlooked.

Here are the results of a Facebook search for "alternative search engines":

Which Open Graph tags should you use?

Facebook lists 17 OG tags in its official documentation, plus dozens of object types. We won't go into all of them here. Only four are necessary for Facebook to understand the basics of your page, and there are a few others that are sometimes helpful.

Let's take a look at these.

og:Title The title of your page.

Syntax

Best practices Add it to all "shareable" pages. Make sure it's accurate, valuable, and clickable. Keep it short to avoid overflow. There are no official guidelines for this, but 40 characters for mobile devices and 60 for desktop computers is about right. Use the raw title. Do not include any branding (e.g. the name of your website). og:url The URL of the content.

Syntax

Best practice Use the canonical URL. It helps to consolidate all related data, such as likes, across all published duplicate URLs. og:image The URL of an image for the social snippet.

Note that this is perhaps the most important Open Graph tag as it takes up the most space in the social feed.

Syntax

Best practices Use custom images for "shareable" pages (e.g. homepage, articles, etc.) Use your logo or other branded image for the rest of your pages. Use images with an aspect ratio of 1.91:1 and a recommended minimum size of 1200x630 for optimal clarity on all devices. og:type The type of object you are sharing. (e.g. article, website, etc.)

Syntax

Best practices Use article for articles and website for the rest of your pages. Describe the object types further if necessary (optional). og:description A short description of the content.

Syntax

Best practices Add to the title to make the snippet as appealing and clickable as possible. Copy your meta description here if it makes sense. Keep it short and sweet. Facebook recommends 2-4 sentences, but this often gets cut off. og:locale Specifies the language of the content.

Syntax

Best practices Use only for content that is not written in American English (en_US). Facebook assumes that content without this tag is written in this language.

How does lazy loading affect page load times?

Lazy loading is an optimization technique that is used to increase the response time of a website. Content is only loaded on the page or in the browser when it is needed or requested.

This means that content that is not immediately visible on a page or interacted with is only loaded when it is needed.

The main benefit of lazy loading is that it can improve the performance of a website by reducing page load times. Since the content is only loaded when needed, this can result in a shorter loading time and a higher page speed. It also reduces server load and bandwidth usage, helping to conserve web server resources.

On a more technical level, lazy loading can help optimize a website for faster loading and rendering by reducing the overall size of the DOM (Document Object Model) tree. This tree consists of all the elements involved in a web page. This includes styles, scripts and images. By loading content only when it is needed, the overall size of the DOM tree is reduced. This leads to more efficient page rendering times and faster loading times.

As well as reducing page load times, lazy loading can also help to improve SEO rankings. This is because optimizing page speed is an important ranking factor for search engines. A website that loads quickly is more likely to perform better in search engine rankings than one that loads slowly. A faster loading time increases user satisfaction, boosts user engagement and in turn improves the website's ranking in the SERPs.

It is important to note that slow loading is not suitable for all page elements. Some page elements, such as videos and images, load best when a user scrolls or interacts with the page. This ensures the best experience for the user. In addition, third-party content, such as ads, should not be delayed in loading. This is because if the ads load too late, they may not be as relevant or up-to-date.

Lazy loading can be a good way to improve the loading speed of a website. By loading content and resources only when needed, loading times can be drastically reduced and user satisfaction increased. Optimizing pages for speed can also improve search engine rankings. However, care should be taken to ensure that content is loaded at the right time and does not take too long to load.

Why use an image CDN?

Image content delivery networks (CDNs) are ideal for optimizing images. By switching to an image CDN, the size of image files can be reduced by 40-80%. Theoretically, it is possible to achieve the same results using only build scripts, but in practice this is rare.

What is a CDN for images?

Image CDNs specialize in converting, optimizing and serving images. They can also be thought of as APIs for accessing and editing images on your website. For images loaded from an image CDN, an image URL not only specifies which image is to be loaded, but also parameters such as size, format and quality. This makes it easy to create variations of an image for different use cases.

Using asset caching to improve SEO

Page speed, i.e. the time it takes a user's browser to receive information from your server and load a page, is one of the most important ranking signals in Google search results. Since retrieving content over the network takes time and resources, reducing the amount of content is a good way to reduce load time.

What is browser caching?

Browser caching is the ability of a web browser to store files directly on your computer and load these files from there the next time you visit the site. In this way, these files do not have to be downloaded again, which can significantly reduce the loading time of the page.

When a browser displays a web page, it has to load many different things:

Images CSS files Scripts Various other widgets and files The next time you open a page, load it with the network window open. This shows which elements are loaded when the page is displayed and how long each element takes to load.

You will probably notice that the loading time for certain elements is significantly reduced if you load the page a second time. This is thanks to caching. These files are loaded directly from your local computer, which increases the efficiency of the connection between your browser and the site's server.

How to use browser caching for SEO

There are 2 ways to use browser caching to speed up your page load time:

Expires header Cache-control header Both methods are enabled by adding code to your site's .htaccess file.

The .htaccess file is very important for your website. So if you are not familiar with working with such a file, read this guide on htaccess before attempting to make any changes.

1. Expires headers To use Expires headers in your .htaccess file, add the following code to the top:

EXPIRES CACHING

ExpiresActive On ExpiresByType image/jpg "Access 1 year" ExpiresByType image/jpeg "Access 1 year" ExpiresByType image/gif "Access 1 year" ExpiresByType image/png "Access 1 year" ExpiresByType text/css "Access 1 month" ExpiresByType text/html "Access 1 month" ExpiresByType application/pdf "Access 1 month" ExpiresByType text/x-javascript "Access 1 month" ExpiresByType application/x-shockwave-flash "Access 1 month" ExpiresByType image/x-icon "Access 1 year" ExpiresDefault "Access 1 month"

EXPIRES CACHING

If you go through this section line by line, you can see that the idea behind the Expires headers is not that complicated.

The ExpiresActive On line activates the Expires module. Each additional line defines how long a browser should keep a certain file type in its cache. In the example above, JPEGs and GIFs, i.e. all files ending in .jpg, jpeg or .gif, should be cached for one year, while CSS should be cached for one month.

To change these times, simply replace "1 month" with any number of months, weeks or years you wish.

2. cache-control headers

The Expires method of caching works for most servers. However, not all servers work with Expires. Also, it is a bit cumbersome to have a separate line for each file type you want to cache.

A simpler but slightly more advanced way of activating caching is to use the so-called cache control.

To use cache control, add the following code to your .htaccess:

1 month for most static content

<filesmatch ".(css|jpg|jpeg|png|gif|js|ico)$"=""> Header-Set Cache-Control "max-age=2592000, public"

The first line, the one with the hash, is just a hint. Your file will ignore it, but it's useful to leave it for others who may be working on your site, especially as your caching optimization becomes more complex.

The next line, <filesmatch ".(css|jpg|jpeg|png|gif|js|ico)$"="">, says that something should happen to any file type that matches one from the list. In this case CSS, JPG, PNG, GIF, JS and ICO. If you don't want one of these files to be cached as long as the others, simply remove it from this line.

In the third line, Header set Cache-Control "max-age=2592000, public", the actual header is inserted and the cache time is set.

The "Header set Cache-Control" part defines the header, while the "max-age=2592000" part states that the browser should save the files for one month (2592000 seconds). The time specifications here are always in seconds.

The public part says that the file is public on your server.

Finally, the last line concludes the code block.