CSS/JS caches are usually flushed for every production release. When changes are made to CSS/JS files of responsive sites, there are chances that those changes may not reflect immediately on your live server. This may happen due to caching in mobile devices.
Usually, the cache is cleared through Magento admin. But this clears the cache on the server side only. Clearing cache through Magento admin does not work well for the devices/browsers and for responsive sites.
We can solve this caching issue in responsive sites by the following methods.
Method 1: Fixing Syntax Errors in CSS files
Syntax errors in your updated files could be one of the reasons as to why the files are not immediately updated after your production release. The best solution is to use Safari’s User Agent , set it to iPhone mode and find the syntax errors in console. By clearing those syntax errors, it will fix your caching issues.
Method 2: Expiring the CSS files at specific period of time
You can give specific period of time to update your cache files through your .htaccess file
Reference Link: https://gtmetrix.com/add-expires-headers.html
Method 3: Versioning CSS/JS files
To resolve the caching issue, a simple solution is to rename the file to refresh the cache from the browser.
In Magento, you can change the URL content with ‘?’ and ‘some random letters or numbers’ to clear the cache of a particular file in the browser, because Magento’s full page cache caches the file by URLs.
So if we can change the URL by passing a query string it will be cleared from the cache. This solves your caching problem.
To do this first you need to create a module and override the function &_prepareStaticAndSkinElements in app/code/core/Mage/Page/Block/Html/Head.php file.
In your etc/config.xml file:
In your etc/system file
In your Block file:
app/code/local/Namespace/Page/Block/Html/Head.php
That’s it. When you have a production release just change your versioning number from the back-end. This will update the CSS and JS files immediately in the mobile devices.
If you want to add versioning in a particular CSS/JS file, you can simply include a query string in your layout.xml file or else you can create custom text field at back-end for including CSS/JS file and use it in block file as per your requirement.
Hope this helps. If you have any queries, do not hesitate to let us know. We will be happy to help you.
Need a mobile friendly experience for your online store? Here’s Magento 2, an eCommerce platform that delivers seamless mobile shopping experiences to your customers. Migrate to Magento 2 Now!
