Google Page Speed Insights - Remove Render Blocking JavaScripts

Permalink 1 user found helpful
We are trying our best to improve website performance of our concrete based websites. We are testing a particular website using Google Page Speed insights and get the following warning (see below):

The part that we need advice on is the 2 blocking scripts which are concrete scripts. You can see the results athttps://developers.google.com/speed/pagespeed/insights/?url=http%3A%...

The website ishttp://www.crucialprojects.co.uk

Anybody got any ideas?

Warning below

Your page has 2 blocking script resources and 6 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.
Remove render-blocking JavaScript:
http://www.crucialprojects.co.uk/concrete/js/jquery.js?v=4cee87681f...
http://www.crucialprojects.co.uk/concrete/js/ccm.base.js?v=4cee8768...

Optimize CSS Delivery of the following:
http://www.crucialprojects.co.uk/concrete/css/ccm.base.css?v=4cee87...
http://www.crucialprojects.co.uk/themes/crucial/typography.css...
http://www.crucialprojects.co.uk/themes/crucial/resources/css/reset...
http://www.crucialprojects.co.uk/themes/crucial/resources/css/formr...
http://www.crucialprojects.co.uk/themes/crucial/resources/css/new-g...
http://www.crucialprojects.co.uk/themes/crucial/resources/css/main....

servondesign
 
jpgriffin replied on at Permalink Reply
jpgriffin
Do you get any answers to speed issues and Page Insights? I'm investigating the same.

I notice that your site crucialprojects skips along nice and fast.
servondesign replied on at Permalink Reply
servondesign
Did'nt get an answer in the end and never really moved any further forward. I think we got the site as quick as we could....so had to move on.
core77 replied on at Permalink Reply
Hi. You can prevent concrete5 to load its assets for guests by doing this
https://github.com/vl-ad/c5f5boilerplate/blob/master/elements/header...

and this

https://github.com/vl-ad/c5f5boilerplate/blob/master/themes/c5f5boil...

I don't want to load jQuery 1.7.x because for using Zurb Foundation 5 i need jQuery 2.x. And I load this before the closing body tag...
boonier replied on at Permalink Reply
Hi

In light of 5.7, has this been solved? I know you can include stuff dynamically using the new asset management system, but it still renders the blocking jquery script in head.

To that end I set about changing where the script is rendered, to the footer, by overriding the application/config/app.php but this prevented the UI from functioning correctly when logged in. What I think might work is to check when the user is registered, then conditionally set a flag to either render the script tag in the header or footer.

This is my override code:

<?php
// include order of scripts - jquery in footer.
return array(
   'assets' => array(
       'jquery' => array(
           array(
               'javascript',
               'js/jquery.js',
               array('position' => 'F', 'minify' => false, 'combine' => false)
           )
       )
   )
)


'position' => 'F' is what renders it in the footer. Setting this to 'H' renders in the header. I tried adding a conditional above the return array, but it breaks the code and yields a white screen. I suspect this is not the place to do this - where would be the best place? Is there a proper way to handle this?

Many thanks
Si
guythomas replied on at Permalink Reply
guythomas
I found that you can conditionally re-register the jquery asset, pushing it into the header when it may be required, and down to the footer in normal mode by adding an event listener within the /application/bootstrap/app.php file as follows:

Events::addListener('on_page_view', function($event) {
         $cp = new Permissions($c);
         $al  = \Concrete\Core\Asset\AssetList::getInstance();
         if ($cp->canEditPageContents()) {
            $al->register('javascript', 'jquery', 'js/jquery.js', array('minify' => true, 'combine' => false, 'position' => 'H'));
         } else {
            $al->register('javascript', 'jquery', 'js/jquery.js', array('minify' => true, 'combine' => true, 'position' => 'F'));
         }
      });
psyren replied on at Permalink Reply
This is really good and works very well, but one downside is that it appears to break the imageslider; images will no longer slide across, just stay frozen on the first image. I've managed to hack the imageslider a bit to get 99/100 on PageSpeed insights:

1) use your patch to delay jquery include to before end of body tag,

2) remove javascript generation from inside application/blocks/image_slider/view.php

3) remove $this->requireAsset('responsive-slides'); from concrete/blocks/image_slider/controller.php

4) added image_slider's css into my own css

5) added the following js into my template being inserted right before the closing </body> tag:

<script type="text/javascript" src="/concrete/js/responsive-slides.js"></script>
<script>
$(document).ready(function(){
var xs = document.getElementsByClassName("rslides");
Array.prototype.forEach.call(xs, function(x) {
$(function () {
$("#"+x.id).responsiveSlides({
prevText: "", // String: Text for the "previous" button
nextText: "",
nav:true,
timeout: 4000, speed: 500 });
});

});
});
</script>

Hacky but works for me as my site uses image sliders throughout and all have the same settings. So excited to get 99/100 on both mobile & desktop for Google PageSpeed YAY :-)