I tried using JavaScripot to load the CSS file in the footer and it made the page jump. It does work but requires a lot of effort for a small page loading decrease.
I would be tempted to move all your JavaScript to just above </body>. I find the move does make the page render far more snappier.
No need to repeatedly load the above, it can be removed and replaced with a single file in your root directory. Google will supply the necessary file name and contents.
Edit:
Your ONLINE stylesheet should be in the <head> ...</head> section and minimised. There are many free online tools which simply require copying and pasting the raw CSS file contents and then saving the optimised results Online.
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
http://iogproducts.com/Styles/style.css
Itâs not as simple as that, Ryan. There are lots of tricks to improving site performance, which has shown to give a huge boost to online sales etc., so it canât just be dismissed. On a small, ordinary site it is probably massive overkill, but still, itâs a legitimate science.
Iâve seen nothing to contradict the assumption that this will be an ordinary site.
My point is, there is other stuff the OP should probably be focusing on; better use of his time. If he finds that his loading time is terrible, once done, perhaps he can revisit this. Going on 5 days now, Iâm not sure whethe this was time well spent.
@csosa
Answer this question and you can be told how to do it.
Which do you prefer?
every page takes a little bit longer to download before itâs rendered and if you need to make changes you will have more trouble and spend more time doing it.
every page takes a little bit longer to download before itâs rendered and if you need to make site wide changes you will need to edit and re-upload every file.
the first page a user visits will take a little bit longer to download, but after that pages will download more quickly.
the first page downloads a little more quickly, but users will see the page with no style for a short time and the page will look âjumpyâ when the styles get applied. after that pages will download more quickly and be properly styled
Any above the fold styles that are embedded in the head should be contained in a single include file, meaning you could still edit them in one place.
The point of this kind of optimization is just the opposite: the above the fold CSS loads faster, along with the page, while not render blocking, while the rest of the CSS (thatâs not needed for the initial page view) loads afterwards.
Iâve just been reading a book about this, and though Iâm not really interested in doing it myself, I can see the point of it.
But as @ralphm mentioned. there are ways to do it so âabove the foldâ isnât render blocked and what happens âbelow the foldâ doesnât really matter as presumably the styles will have been applied by the time a visitor scrolls to them.
Whether or not itâs worth the effort depends.
Just how slow is the page loading because of this? Is it bad enough that some might give up and leave?
Sounds more like when the validator gives a Warning.
i.e. itâs not necessarily that something is wrong, only that it is something you should be aware of and take into consideration. As long as you understand the potential problems it might cause, and you know it isnât a problem, then itâs safe to ignore.
Indeed, these suggestions are just for those who want to squeeze every last byte of performance out of their site. It does make a difference of big sites. Studies have shown that all these optimizations put together can boost business by a huge amount, but thatâs on sites that do a lot of business, of course.
