This article focuses on the “Files - static content“ report and shows you the importance of static content as well as the common errors and how you can easily identify them.
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:
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.
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.
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:
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
Figure 3: Add the ‘load time’ column in the table
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.
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.
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.
Figure 5: Aggregated file size and use of static content
New to Ryte? Try out Ryte FREE!Start now!
Published on 02/17/2016 by Christian Müller.
Who writes here
Do you want more SEO traffic?
Improve your rankings for free by using Ryte.Register for free