|
When running a Google PageSpeed test on your store's domain, one of the suggested corrections is to "Eliminate render-blocking JavaScript and CSS in above-the-fold content" and a variety of suggestions will be made.
Unfortunately, the CSS and JS elements mentioned in the report are required for the proper display of your Shift4Shop website. Eliminating or relocating these to the footer (as suggested by the report) will cause issues in the way the website displays.
For example:
Remove render-blocking JavaScript
It’s preferable for performance that JavaScript files are loaded in the footer of your site, or asynchronously so that they don’t block the downloading of other assets on your site - thereby slowing it down. But what Google does not take into consideration is that sometimes it is not possible to load everything in the footer; especially if you are using a custom theme.
If you are seeing the "remove render-blocking JavaScript" notice, it means that some JS files are still being loaded in the header. But this may have been intentional on the part of the theme or plugin developer. Sometimes when you move JavaScript files from the header to the footer, you can actually break functionality on your website.
Optimize CSS Delivery of the following
Moving the CSS to the footer would cause your site to load without any styles, making it look broken and providing a terrible user experience.
Google suggests you can "Optimize CSS delivery" by "inlining" it in your code.
Essentially they want you to separate out the CSS needed to render the first part of your page and embed it directly into the code of your page, rather than in the main stylesheet.
These changes won’t necessarily improve the overall load time of your page, but it will increase your PageSpeed score, and may appear to load faster because the elements at the top of the page will load sooner. For visitors the server load time is more important since JS and CSS elements are cached after the initial load of the site.
For Google, the goal is to get a green score for the desktop version, and this usually can be achieved by optimizing the images on the site, which usually consists of re-formatting and compressing the images to reduce their respective sizes.
|