How to fix “Eliminate render-blocking JavaScript and CSS in above-the-fold content” in joomla


Tags: javascript,css,joomla

Problem :

I'm using Joomla to develop my website, and when I test my website on PageSpeed Insights on Google, it generates the following must-fix warning for me:

Eliminate render-blocking JavaScript and CSS in above-the-fold content.

How to do this in Joomla? I did try to use extension to move the JavaScript down, but it's resulting in errors in the layout, and breaking the responsive functionality on my website.



Solution :

The problem with JCHOptimize is that it's hard to get it to increase your Google PageSpeed Insights rankings on your website without it breaking other stuff.

In order to address these issues, you will need to work on 2 areas, CSS and JavaScript.

For the CSS, you will need to split your main CSS file to 2 parts: The first part is the one that you will absolutely need to make your website look well when it first loads (for example, the width of the body), while the second part is the one that you can live without for a second or so (until the page fully loads).

As for the JavaScript, you will need to add async to the JavaScript libraries that are not necessary during pageload, and you will need to get rid of all the JavaScript libraries that you don't need.

In my opinion, trying to get something over 85 with Google PageSpeed Insights is overkill and is not really necessary. I know that most people strive for a 100, but for many, this number is technically impossible (we've seen it though on a few websites).


    CSS Howto..

    How to fill a QTextBrowser with a single table in Qt?

    How to keep an :active css style after clicking a link?

    how to do css changes only to links that are in side specific div without defining classes to a elements

    How to align a table menu to an Banner

    How do I Add border to text in inputfield

    How to specify height using fancybox 2.1.4

    how to center a form using css?

    How to put an image at the left side of text without putting the image into css

    Cache policy, css/js/images how to make them not to load each time i do full postback?

    How can I add the css to my project asp.net mvc? [closed]

    How to refer to an id with special characters in CSS

    How should I change css style of fixed element to not crossing scrollbar

    How to set the jquery draggable with margin left?

    How to add custom css in Cognos?

    mkd2pdf, wkhtmltopdf, how to make PDF for slide

    How do I replace color: windowtext;

    CSS: How to set image width larger than the container's [closed]

    How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?

    How to set CSS for disabled checkboxes?

    how to get true css property names from CSSStyleDeclaration object?

    How to vertical-align text on this input box for IE

    how to select a sibling element when hovering in CSS?

    How could I use postcss-bem with css-modules or postcss-js in React component

    CSS : How to remove margin between
  • How can I properly add CSS and JavaScript to an HTML document?

    CSS - how to trim text output?

    How To Make iPhone6 Plus Landscape Mode Work Better with Bootstrap3?

    How to modify the orientation of a
      spanning multiple columns?

    how to get value of colors from CSS

    How to embed SVG styling with javascript?