Website assets not loading or updating: Causes and solutions

Website assets, such as images, videos, and scripts, are crucial components of a website and play a significant role in providing a good user experience. However, sometimes these assets may not load or update, causing frustration and confusion for users and developers alike.

In this post, we will explore some common causes of this issue and provide solutions to resolve them.

• Content Security Policy (CSP) blocking
• Caching issue
• Incorrect resource paths
• Slow server response time
• CSS property ignored
• Incorrect MIME types
• Blocked by Ad Blockers

Content Security Policy (CSP) blocking

CSP is a security feature that helps prevent cross-site scripting (XSS) and other code injection attacks. A website’s CSP can be set by the server or through a meta tag in the HTML. If a resource is not allowed by the CSP, the browser will block it from loading. This can cause website assets to not load, resulting in broken images or missing scripts.

You can check for Content Security Policy (CSP) errors in Chrome using the Developer Tools console. Here are the steps to do so:

1. Right-click on the web page and select ‘Inspect’
2. In the Developer Tools window that opens, click on the ‘Console’ tab.
3. Look for any CSP errors in the console output

CSP errors will typically be displayed in red and start with “Refused to…”. Here is an example:

If you see any CSP errors in the console, it means that the website is not properly configured to allow the requested resource to load or execute. To fix the error, you will need to adjust the CSP policy to allow for the resource or remove the resource that is violating the policy. Read more on how to fix your set up and change the CSP.

Caching issue

Let’s say you have a website with a logo image that you’ve recently updated. When you visit your website after making the change, you notice that the old logo is still being displayed instead of the new one.

This issue can occur when the browser or server is caching the old version of the image, preventing the updated version from being loaded. Caching is the process of storing a copy of a webpage or asset on the user’s computer or in the server’s memory to improve performance and reduce network traffic.

To fix the issue, you can do one of the following:

• Rename the asset’s filename.
• Add a cache-busting query parameter to the URL of the asset, such as “example-image.jpg?v=2”, which will tell the browser to fetch a new version of the asset instead of using the cached version.
• Wait for the cache to clear.

To check how long an image or any other asset will be cached for, you can use your browser’s developer tools. Here’s how to do it in Google Chrome:

1. Open the page containing the image you want to check.
2. Right-click on the page and select “Inspect” or press Ctrl+Shift+I (Windows) or Command+Option+I (Mac) to open the Chrome DevTools.
3. In the DevTools window, select the “Network” tab.
4. Reload the page to capture the network traffic.
5. Find the image you’re interested in and click on it to select it. This should display a new panel with information about the selected asset.
6. Look for the “Cache-Control” or “Expires” header in the “Headers” tab of the asset information panel. This header will indicate how long the image will be cached for.

If the “Cache-Control” header is present, it will specify the maximum age of the asset in seconds. For example, if the header value is “max-age=86400”, the asset will be cached for 24 hours.

If the “Expires” header is present, it will specify the exact date and time when the asset will expire and need to be reloaded from the server.

Knowing how long an asset is cached for can help you understand caching behaviour and troubleshoot any issues related to caching.

Incorrect resource paths

Incorrect resource paths is a fancy way of saying you’ve added the wrong url for your asset. 

If the paths to your website assets are incorrect, the browser will not be able to load them. This can occur if you have moved assets to a new location, changed the name of a file, or made other changes to your file structure. 

Here are some steps you can take to fix incorrect resource paths:

• Check for any typos or misspellings in the file path. Make sure the file extension is also correct.
• If the resource is located on a different server, check the protocol (http:// or https://) and domain are correct.
• Instead of using an absolute path, use a relative path. Relative paths are based on the current file’s location and can make it easier to manage resources.

Slow server response time

A slow server response time can cause website assets to take longer to load, or not load at all. This can be due to issues such as a high number of requests, heavy traffic, or a slow server.

To check if an asset hasn’t loaded because of the server, you can use your browser’s developer tools. Here’s how to do it in Google Chrome:

1. Open the page where the asset is supposed to be loaded.
2. Right-click on the page and select “Inspect” or press Ctrl+Shift+I (Windows) or Command+Option+I (Mac) to open the Chrome DevTools.
3. In the DevTools window, select the “Network” tab.
4. Reload the page to capture the network traffic.
5. Look for the asset in the network requests list. It will typically be labelled with the type of asset, such as “image”, “script”, or “stylesheet”.
6. Check the status code of the asset. If it’s a 4xx or 5xx status code, such as 404 or 500, it means that the server could not find or retrieve the asset, and the asset did not load.

If the asset is not present in the network requests list, it may not have been requested by the browser, which could indicate a problem with the HTML code or a JavaScript error preventing the asset from being requested.

CSS property ignored

You may have updated your JS or CSS but when you check the website nothing seems to have changed. Unlike one of the previous examples this isn’t a problem with a missing file or the css file not updating such as the caching issue. This is because your browser (such as IE11) is incompatible with the new CSS and just ignores the CSS property it doesn’t understand.

You can check which CSS is compatible for different browsers using Can I Use.

Incorrect MIME types

Every asset on a website, such as an image or a video, has a specific MIME type that the browser uses to determine how to handle the resource. If the browser comes across a MIME type it doesn’t understand, it won’t load the resource. 

For example, there are many different types of image MIME types, such as .tiff, .jpg, and .gif. Some image files can be loaded by your browser, while others can’t. If an image isn’t loading on a webpage, you can check the browser console for errors related to MIME types. In the console, it will usually show an error message with the specific MIME type that is causing the issue. For example, if a browser doesn’t support the .webp image format and you try to load a .webp image on a webpage, the console may show an error message stating that the MIME type of the image is not supported.

Blocked by Ad Blockers

Browser plugins such as Ad blockers can block assets from loading or cause some strange behaviour on your website.

A simple check is to view your website in incognito mode or disable the plugins you’ve got installed on your web browser.

Compatibility Mode in Internet Explorer

The last issue to check is only an issue for Internet Explorer (IE). 

When a website is designed for an older version of IE, a developer may set a parameter called the X-UA-Compatible header to “IE=8”. This parameter tells newer versions of IE, such as IE11, to behave like the older IE8 browser.

While compatibility mode can help older websites work properly on newer browsers, it can also cause some assets on the website to stop working or loading correctly. This is because newer browsers have different features and capabilities than older ones, and compatibility mode essentially “turns off” these new features to make the browser behave like an older version.

Summary

These are just a few examples of causes for website assets not loading. By understanding the potential issues, you can take steps to prevent and resolve them, ensuring that your website is functioning smoothly and providing a good user experience.