Cascading stylesheet or CSS is the design backbone of ay modern website. You can add CSS to any HTML element using ID or Class. It is possible to make the CSS effective only for an element (inline), all elements on a page (internal) or on the entire site (external). Whatsoever is the method you use to add CSS to HTML element in a page, one big problem you will face.
The changes look fine in browser console when you test will not reflect on the live site after you applied the same style. If you have added the CSS properly, caching is the culprit you should check for the changes to be effective. In this article, we will explain how to make the CSS changes effective on live site by deleting various levels of caching.
Get CSS Details
You may face problems regardless of whether you are testing on localhost server on your computer or editing content on a live site. First thing is to view the page’s source and get the following details.
- CSS ID or class used with the element.
- Page or site URL.
- Complete URL of external stylesheet. If you have a parameter at the end of CSS file’s URL, make sure to get the correct URL.
Depending upon your content management platform and site’s setup, you may need to use them.
1. Check CSS Added Correctly
It is a common and recommended practice to use external CSS stylesheet and link the file in header section of each page on the site. Sometimes you might have overlooked the file version or miss to link correct file in the header section. Browser console will not show page level CSS errors like missing class or ID. However, you can still find the missing external CSS file which will show 404 error.
Make sure the CSS file is linked using <link> tag in the header like the example shown below:
<link href="https://yoursite.com/assets/css/style.css?v=1.2" type="text/css" rel="stylesheet" />Another problem is that editing in browser console and adding CSS in live site are two different things. Even the same updated CSS style is loaded, the result may be different on live site due to various reasons. In this case, you may need to test by adding !important; to your styles or removing the code that is taking precedence over your styles.
2. Disable Ad Blocker and Other Extensions
Some browser extensions may block CSS files loaded from external domains. Ad blockers are the best example as they will block CSS files related to advertisements loaded on the page. If you have done changes in that CSS file, you will not see them on the page as the file itself is blocked. You can see this in browser console as “Issues” mentioning “This page failed to load a stylesheet from a URL”. Click on the link below “Affected Resources” to highlight which file is not loaded in the source code.
If you have installed lot of browser extensions, disable all of them and reload the page to check if the CSS is loading properly.
3. Clear Browser Caching
Whenever you open a webpage, browsers will cache static HTML content, CSS files and JS files. This will help to load the static content from browser’s cache (instead of server) thus reducing the loading time and save server bandwidth. This means the CSS changes you have done on live site will not reflect on browser unless you delete all previously cached CSS files.
So, clearing the browser’s cache is the next thing you should do if you have visited the same page / site before making changes. This is also the case when you are testing on localhost server.
You can simply press “Control + Shift + Delete” (Windows) or “Command + Shift + Delete” (Mac) in Chrome, Firefox and Edge browsers. Make sure to select “All time” for time range and confirm “Cached images and files” item is checked.
On Mac Safari, go to “Safari > Clear History…” and delete all historical items.
Note: If you do not want to clear browser’s cache, use incognito mode or test on another browser.
4. Purge CDN Cache
Nowadays, almost all websites use CDN for speeding up the content delivery. If you are using Cloudflare or any other CDN that caches the content, make sure to purge the cache for the page or CSS file URL. If the CSS file has query string, you should purge the URL with the query string.
After purging the CSS file and page URL, open the page in your browser. This will pull the files from the server as they are not cached yet and you should see the CSS changes are reflected.
Note: Services like Cloudflare offer an option to purge a single page or file. This feature is available for free account users also. You can make use of this instead purging cache of entire site.
5. Disable CSS Optimization Features
It is common to combine all CSS files used on the site as a single file to reduce number of HTTP requests sent to server. When you have edited one of the files, it may not reflect in the combined CSS file due to caching or other reasons. The problem is that you can’t easily find whether your code is minified and combined in the final output file. So, the option here is to temporarily disable combining CSS file feature and test with individual files. Make sure the files are loaded separately in the source code and clear your cache to reflect the changes.
Another popular CSS optimization technique is to remove unused CSS and inline critical or used CSS in the header. Make sure your critical or used CSS has the latest styles you have added and properly loaded on the page. Otherwise, delete cached content of used CSS files and rebuild again with the modified content.
6. Check Plugin’s Caching
Content management systems like WordPress offer caching plugins to speed up your site. Plugins like WP Rocket will aggressively do page caching and serve entire page as a static file. So, if you are using plugins make sure to delete the cache before testing your changes.
7. Check Hosting Setup
Most hosting servers offer Varnish caching and some companies like SiteGround also offers three levels of caching at server side. If you have enabled caching at server side, login to your hosting account and purge the cache. Otherwise, old files loaded from server’s cache will not reflect your latest changes.
Final Words
When you notice the CSS changes are not reflecting on live site, first make sure you have added the code properly and the stylesheet loaded in the source code has your changes. As mentioned, this is slightly difficult to check if you combine CSS files or load critical/used CSS in the header from multiple files. You may need to temporarily disable these features to find the changes are loaded in the source file. If everything is looking fine, clear your cache at different level so that the latest content is pulled when the page is loaded afresh.
Leave a Reply
Your email is safe with us.