I have lost development time adjusting CSS with some - but not all - results when checking at Safari. Some results is much worst than no results in terms of productivity, thus this question. All results do show on the next day or so (based on cache refresh maybe). I see suggestions to clear cache but nothing conclusive. Is there a permanent fix to solve that? Maybe a script to clean cache again and again?
There are multiple things that might cause this: server cache, local cache even performance plugins if you use something like Wordpress.
Finding the exact cause needs more information from your side. But, even in the most extreme cases, there is one solution that you can use and it works almost every time for me: add a get parameter when including the .css file and change it when you make changes (style.css -> style.css?something=3123131, change the number every time).
You can do it in the files or you can even do it in developer tools, find the tag with the file and add the parameter manually there, the file willreload and you'll see the latest changes.
EDIT: this is a hack, use it when you can't control the cache or changes are small and it would be more time consuming to setup the system than to use this hack.
Related
I'm optimizing my website and attempting to enhance the Largest Contentful Paint, but the only item that appears to require work are the optimised CSS files made with W3Speedster; here is a link to the Google speed test I performed. I want the LCP to be less than 2.5.
Any advice would be greatly welcomed; thank you!
That does not mean it takes over 3 seconds to render the content.
The rendering of you page from start render to document complete is only about 0.100 seconds.
You server is your biggest problem. It's slow.
The best thing you could do for your pages is either eliminate shareaholic.js, or get it to load sooner. It appears there may be some sort of lazyload. I does not load until 1.8 seconds. That is likely the reason the page rendering starts too late. That and too many font and CSS files. The Browser cannot begin rendering and till it has all the CSS and font files. shareaholic.js is your 15th file being loaded. There are 5 images being prefetched before this js.
You need to get the page to start rendering sooner. You could join some of the CSS files together to reduce the number of files being retrieved.
It's just your ads. :)
You'll most likely not be able to make it any faster. Maybe a little bit. I reduced it from 4 seconds on Cloudways Nginx servers to under 2 seconds on WPX Apache servers.
The problem is, when your ads are loading in the beginning a bidding war takes place. It's only after this they can load in the ads. So it'll always take time.
If I were you, I'd change the host to something like WPX, they will also help you make it as optimized as possible, with ads. If not changing the host, I'd focus on the CLS. Much bigger factor and easier to do something about.
Hello I am developing a website on ASP.NET and while developing it I am also testing its behavior and changes. The problem I am facing is some times when I make change on .CSS file those changes does not appear on the browser even when I refresh it or rerun the project but when I run that project on different browser it began to show those changes. If it is a code related or browser related or IDE related please let me know. Thanks
Try hitting ctrl-F5 - that will force a re-load.
Unless you change the name of the css file or other resource, the browser can cache that information for months on end.
In fact, some utilities will even add say a dummy parameter to the linked css file - thus on each build the parameter is updated - and thus the browser will not use the older cached value (but, I not found a great working and easy to use utility that does this).
The other way? Empty your browser cache. So yes, the cache can be a REALLY nasty issue during development. And in fact it can be REALLY nasty when you update your site - users will not see say a modify css file, since it been cached, and with the same name, then users will not see new fixes/style changes or even even things like text alignment that you fixed in the css file.
As noted, in most cases, if you launch a page, then try hitting Ctrl-F5 (I think this works in most browsers). If that fails, then you have to in the browser re-set the cache (empty the cache), and then you see the new changes.
I wish had a better solution, and I wish one could just say:
Ok, please re-set ONE time for all past users - since they will often not see your changes - and you don't have much control with any real great ease to re-set the cached information. There are truck-loads, book sized articles in dealing with this issue, but sadly, there not really a great solution right now. If you want say things like cached css stuff to go away client side? Then you have to change the name of the css file - and that can be painful.
At least during development? Well, let the page load, then try Ctrl-f5 - that works well in most cases.
procureure.com/types-de-droits
Here's how it looks via customize.php
Link
I was not doing any major changes. Cleared cache and changed stuff in customize.php but thats it.
I've been working for 2 straight days to get a decent gtmetrix score and overall design. Help would be greatly appreciated.
Just a quick note: GTmetrix score/ Pingdom or google page speed test
are just recommended approach and the speed they show does not
necessarily mean real world differences. Those scores do not cover the
complexity of code of the server side (which also delays the page load
time). So there are scenarios where you have to ignore few of the
recommendations to make sure everything works fine.
Although in your case i can see that there are no css on you page applied externally nor internally. Kindly tweak the css rendering settings to see if it works. The theme is working fine on customize.php because the changes do not affect the back end of the website it's only the front end which gets affected. So CSS are rendering on back end but not of the frontend. It maybe of theme issue if css are not enqueued properly. there can be serveral reasons. Switch to one of the default themes and see if the plugin is working properly. This will help you find out where exactly the problem exists.
Is this common? When I save my external stylesheet and update my browser the changes applies directly for the most of the time, but after a while when I save again the changes does not apply at all. Nothing I do to the stylesheet at this moment will apply for a while. Then it continues to work for a while and then it stops working again for a while and so on and on and so on.
Any thoughts?
Take care
Good question. In general browsers try to cache any resource they have loaded previously.
Checkout this post that details this behaviour a bit more: Browser Caching of CSS files
I want to automatically refresh chrome immediately after an change of my less files. For some reason chrome can not even read my less file. So i always need to wait until the lessc have created my .css file. There a tools out there that are checking resources for changes and reload the page. I've even written my own: Luba Autoreload. What i annoying is the waiting time between less compiles and the extension request resources to detect changes. Chrome DevTools seems do not solve the problem as well. After mapping my style.css to a network resource i always need click inside the source in chrome to refresh for some reason (no auto reload).
I really prefer a way to immediately detect a less change and reload the browser. I can write a solution but i do not can spend all my time in stuff like these. Maybe somebody have an idea. Maybe there a solutions for Firefox ? I'm also using a prefixer, but i think i can forget it in this context.
Use LivePage extension. It supports LESS also. It also works offline and for file:// too.
EDIT:
Increase the refresh duration to 1000ms in LivePage's option page. It may help you. And don't select the option for "Entire Domain". It will monitor whole domain and will slow down your system, if you have many files in your domain. Use LivePage for the file, or files you are currently working on.