How to Analyze and Optimize Your Static Content

What is static content?

Generally, a distinction is made between static and dynamic website content. Dynamic content is generated by webservers through scripts (e.g., PHP) and static content is saved as files on the server. Examples of static contents include images, JavaScripts, and CSS files.

Why is it important to optimize static files?

Static files are largely responsible for the appearance and functionality of a website. Imagine a user visiting a product page - firstly the page takes too long to load, and then no product images are displayed. This could be due to the following two factors:

1. Slow loading time due to the use of too large or too many static files.
2. Flawed appearance of page due to incorrect status codes from the static content

This negatively affects the user experience and the user’s confidence in the website, which in turn sends negative signals to search engines. It is therefore very important to correctly integrate image files, JavaScripts, and CSS files on the website and constantly monitor them. In this article, we describe how to use our static files report to analyze the static content on your website to help you avoid slow page loading times, errors, and to constantly keep track of the functionality of your website.

Where can I find the analysis?

The static contents evaluation can be done in the Website Success in the "Files (static content)" report. This report analyzes and evaluates the image files, JavaScripts, and CSS files that are on the website.

Images

Importance for websites

Correct display of images on your website is crucial for visitors. A website without images can leave a negative and unprofessional impression on users. Even a single image that fails to load can be reason enough for a reduced conversion rate, for example when a visitor is looking for a specific product but the product image is not displayed. Images should always have the status code 200. You can find more detail about the status code of your website in the status code report. Images should also contain an ALT attribute that is displayed in the place of the image in case the image fails to load. The ALT attribute or ALT text is important for accessibility, as visually impaired users can still find out about the content of the image with screen readers. ALT tags also help search engines understand the content of the image, so you have more potential to rank in the Google image search.

Typical errors

These are some typical errors when it comes to website images: 404 status code: Always use the status code to check if all images are displayed correctly. Images that have a 404 status code should be corrected as soon as possible. Missing ALT attributes: One common mistake occurs when an ALT attribute for a specific image, which has been used on multiple websites, is set only once. The ALT should be set on each website where the image is embedded. Here, you should also note that an image, which has been used on several websites, should also have identical ALT text. You can easily identify the missing ALT attributes: Go to the "Files (static content)" report -> Images -> ALT values. This displays a list of all images that are used on the corresponding URLs as well as their respective ALT tags. Add a filter and use the following values:

• Search for "ALT tag" and select it from the dropdown list.
• Set the dropdown displayed below to “is” and leave the input field empty.
• Click "save & close".

Figure 1: Add filter - all images that have ALT tags

All images that do not have an ALT tag will now be displayed.

Figure 2: Evaluation of all images that do not have an ALT tag

The URL in the left column additionally shows you the page on which the image with the missing ALT tag is used. Further resources for image optimization

• How Alt Attributes Can Boost Your Image SEO
• Image SEO 101: How to Get Better Rankings for Your Images
• Image SEO: How Do You Properly Use ALT and Title Attributes?

JavaScripts

Importance for websites

There are different ways to implement JavaScripts on a website. JavaScript is important for visitors as it creates interaction elements on websites. Incorrect implementation, faulty, or too many JavaScript files can have a negative impact on the functionality of the website and its loading time. For example, if JavaScript causes issues in the shopping cart area of the website, this will have a negative impact on the user experience and the user’s trust in the website. You should always keep track of the JavaScripts on your website in order to ensure the conversion rate is not impacted negatively. The "JavaScript status codes" and "JavaScript usage" reports help you keep on top of that. Try to avoid the following errors:

Typical errors

404 status codes: Make sure your JavaScript files can load correctly. Make sure you avoid 404 status codes to ensure your interaction elements implemented with JavaScript are working properly. Excessive use: Too many JavaScripts on a page result in a very large file size. This can have an effect on the loading time and increased crawling time needed by search engine bots. You should therefore set a reasonable limit for JavaScript files per page. We recommend using less than four JavaScript files per page. In the "JavaScript usage" report, you can customize the table by clicking on the gear icon and add the "Load time (group)" column.

Figure 3: Add the ‘load time’ column in the table

This example shows the effect that the number of JavaScript files on a page can have on the loading time.

Figure 4: Evaluating the number of JavaScript files and the loading time

It is often useful to combine JavaScripts and compress them. Combining JavaScript files is particularly effective for scripts that are used on all pages. A JavaScript file, which is only used on one specific page, should not be combined with other JavaScript files.

CSS files

Importance for websites

CSS files are a style language and determine the graphical design of a website. It’s vital to integrate CSS files properly because the website’s design is of course the first thing that catches the visitor’s eye. The CSS report enables you to monitor the status codes and usage of CSS files on each page in order to avoid the typical errors listed below.

Typical errors

404 status codes: Faulty CSS files are easily noticeable for visitors and often lead to a negative user experience. You should therefore review the status codes of the CSS files using the "CSS status codes" report and immediately correct any CSS files that have the status code 4xx. Excessive use: Similar to JavaScript files, the use of too many CSS files can negatively impact the website’s loading time. With CSS files, it is also important to note that they can also overwrite each other. Therefore, copying and pasting CSS files in an existing source code should only be exercised with caution in order to ensure that existing files are not overwritten. We recommend using a maximum of four CSS files per page.

Aggregated file sizes and performance of a URL

In the "Performance" > "File sizes" > "Aggregated" report, you can check the file size of your URLs, including all static files. The aggregated file size is calculated using the respective HTML document + images + CSS files + JavaScript files in the URL. You can also add columns in the table by clicking on the gear icon. For example, you can include "Load time (group)", "CSS file count", "JS file count" and "Included images (counter)", as well as a number of other options.

Figure 5: Aggregated file size and use of static content

Conclusion:

How a website looks and functions is very important for a great user experience. CSS files, JavaScript files, and images play an important role in how a website looks. This is why you should always monitor the static files on your website and ensure they are functioning, and that they are not causing other problems such as a slow page speed. Use this report to improve your website and make it the best it can be.