Google PageSpeed Insight JS Errors

unreachable as in “time out” or “internal server error”? anything in your phperror-log?

you don’t happen to be running another JS minification component (plugin) simultaneously do you? if so, can you disable that one and try again?

kind regards,
frank

Hi Frank,

I had W3 Total Cache running but didn’t have JS or CSS Enabled. I got nothing but a white screen. I have now deactivated W3 and checked every box under the JavaScript area of Autoptimize. The site looks fine on a desktop but is all messed up on a mobile device.

Here are the errors I am getting for JavaScript – all on a mobile device:

Your page has 5 blocking script resources and 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.

Remove render-blocking JavaScript:https://www.westminsterav.com/…mize_89b57bdb6ed89389130ba7a1bae6cbdf.js
https://www.westminsterav.com/…ck/modules/photon/photon.js?ver=20130122
https://www.westminsterav.com/wp-content/plugins/tab-me/tab-me.js
https://s0.wp.com/…ontent/js/devicepx-jetpack.js?ver=201530
https://www.westminsterav.com/…/minileven/js/small-menu.js?ver=20120206

Optimize CSS Delivery of the following:https://www.westminsterav.com/…ize_e6143ca31798285f118d0e7e8cf83883.css

Thoughts?

Thanks!

Ted

well, don’t just check every box; e.g. “force into head”, “look only in head” and “try/catch wrapping” are there for troubleshooting purposes. so start with just optimizing JS and see if you need any troubleshooting (which is best done excluding specific JS from optimization, see the FAQ for more info).

frank

Hi Frank,

I have read the FAQ and tried every click option you have suggested. My site looks fine and optimizes pretty well on a desktop – but I am unable to get it to show properly on a mobile device with any combination of the options checked.

The site is https://www.westminsterav.com.

Any suggestions?

Thanks!

Ted

well, start with “optimize JS” and look at what’s not working on your site (don’t worry about google pagespeed score just yet). based on what’s not working, you’ll have to identify what needs to be excluded from JS optimization by looking at what (doesn’t) happen on screen and on what is shown in your browser’s error console. if you describe what doesn’t work/ copy/paste info from you browser’s error console, i can try to give you tips on what to do.

kind regards,
frank

Hi Frank,

I have eliminated all check marks in the Javascript area except “Optimize JavaScript Code”. The site generates no errors in the console in Google Chrome and loads fine on a desktop.

On a mobile device, the background does not show thru the logo PNG file and the only things displayed are blog posts. None of the intended front page content aside from the logo is shown.

Thanks for your help!

Ted

OK, how are you doing mobile? any specific plugin I could test against?

I don’t use a mobile plugin. I am running Genesis and the child theme is from Studio Press and it is mobile responsive.

ok, have been looking at your site and apparently the mobile view is taken care of by jetpack (minileven). now what I don’t understand (yet) is that based on minileven’s code, the switch between desktop & mobile view is done serverside (so not reponsive in that sense). so the question is; how does AO impact that server-side logic.

could you systematically try to each of the 3 optimizations (HTML, CSS and JS) and check which specifically of those 3 breaks minileven? based on that I can start digging deeper.

frank

Hi Frank,

I tried each of the options you suggested and none of them worked, so I disabled the Jetpack mobile option. The main reason I installed Jetpack was what I read about the Photon option for web site speed.

Once I deactivated the mobile option in Jetpack, the site rendered much better.

Here is what I am still seeing. The font Open Sans is not rendering on either the mobile or the desktop version.

On the Mobile tab of PageSpeed Insights, the only error is for:

Leverage browser caching:

Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

Leverage browser caching for the following cacheable resources:https://www.westminsterav.com/…widget/css/bxslider/images/bx_loader.gif (expiration not specified)
https://www.westminsterav.com/…-widget/css/bxslider/images/controls.png (expiration not specified)
https://www.westminsterav.com/…age-slider-widget/images/ajax-loader.gif (expiration not specified)
https://www.westminsterav.com/…nt/themes/executive/images/bg-search.png (expiration not specified)
https://www.westminsterav.com/…t/themes/executive/images/blockquote.png (expiration not specified)
https://www.westminsterav.com/…content/uploads/2015/03/av-2000×2000.png (expiration not specified)
https://www.westminsterav.com/…/uploads/2015/03/wt-llc-logo-280×100.png (expiration not specified)
https://www.westminsterav.com/…ent/uploads/2015/04/buckeyes-600×267.jpg (expiration not specified)

The Desktop version shows the same error and the following other two:

Your page has 1 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.

Approximately 67% 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:https://s0.wp.com/…ontent/js/devicepx-jetpack.js?ver=201531

Optimize CSS Delivery of the following:https://www.westminsterav.com/…slider-widget/css/frontend.css?ver=4.2.3
https://www.westminsterav.com/…s/bxslider/jquery.bxslider.css?ver=4.2.3
https://www.westminsterav.com/…rettyphoto/css/prettyPhoto.css?ver=4.2.3
https://www.westminsterav.com/…ize_93909e53f854dd88b636d4ce524ac190.php

Prioritize visible content

Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content.

The entire HTML response was not sufficient to render the above-the-fold content. This usually indicates that additional resources, loaded after HTML parsing, were required to render above-the-fold content. Prioritize visible content that is needed for rendering above-the-fold by including it directly in the HTML response. Only about 67% of the final above-the-fold content could be rendered with the full HTML response (see screenshot).

Aside from the CSS and JS errors, does AO help with the others?

Thanks!

Ted

Re. Jetpack Mobile; I’ll test this on my own blogs then, this is weird.

Re. browser caching; that’s not handled by AO (except for the autoptimized files themselves).

Re. above-the-fold content on your page: maybe rerun the tool we discussed in the other topic to re-generate your critical CSS (that way your new slider’s critical CSS will be included as well).

But all in all we seem to be getting there ??

Hi Frank,

You were spot on… I used the tool that you gave me in the other post and the only error left was Leverage Browser Caching. I installed the plugin Leverage Browser Caching Ninjas, which requires NO SETUP.

I am now getting 100/100 on all scores from Google PageSpeed Insights…

Two other quick questions, I tested my page on both Mac and Windows in Safari, IE, Firefox and Google Chrome and on an Android and Windows phone. The font is correct on the Mac views (all browsers) but not on the Windows views and the mobile views (all browsers). Any idea how to get it to load the correct font? If not, no big deal because I am thrilled with my scores…

The other question is unrelated but maybe its a quick answer… On my homepage, the image under image slider with the quote next to it is not becoming mobile responsive. I have no idea why, but I am guessing I have coded something wrong. Any ideas?

Thanks so much for your help! The plugin is awesome and I gave it 5-stars!

Ted

re the font; you need a semi-colon after the import statement

/* Import Fonts
------------------------------------------------------------ */
@import url(https://fonts.googleapis.com/css?family=Open+Sans)

in your child theme’s style.css.

re the non-responsive image; appears to be due to the fact that the parent div has a fixed width and that the grandparent div has class “picright”, removing those seems to make it responsive.

thanks for the review, glad to have been able to help!

Kind regards,
frank

Hi Frank,

Thanks – the font fix worked! (of course!)

Unfortunately, I still can’t get that picture to shrink on a mobile device. I tried eliminating the divs, but that didn’t help and I couldn’t figure out where else I needed to declare the background color for that widget as white – the result was black font over my background image… Obviously it was pretty much unreadable. I eliminated one of the divs and here is the CSS code I have for the other one:

.testimonials{
background-color: #f5f5f5;
border-radius: 20px;
}

I know this doesn’t pertain to your plugin at this point, but any other suggestions would be much appreciated.

Thanks!

Ted

for the image, on the div with id “attachment_582”:
* remove style=”width: 610px”
* remove the “alignright”-class

this will make your image fully reponsive, but then off course it won’t be aligned so that your text flows around it.

but I’m out of my league here, really ??

frank