Page Speed Insights / GTmetrix focuses

[Anonymous]

Hi Franky —

I just put a new theme on http://NEOHgolf.com and I was optimizing it for Google’s Page Speed Insights [https://developers.google.com/speed/pagespeed/insights/] and GTmetrix [https://gtmetrix.com/].

I noticed a couple of issues created by EME.

The biggest is that the Google Maps js (62K) is called on every page, when it should be called only on the pages on which it is used. Saves resources and round trips.

Another issue is that the eme_location_map.js is render-blocking. I tried deferring it with a plugin, but that stopped the map from rendering on the locations page and prevented the nav from working between calendar pages.

Finally, all of the eme js and css should be combined and minified to reduce calls and loads.

The gold standard of WP themes and plugins is to get A-100 on PSI or GTmetrix during testing, something that can be touted on WP to get downloads. EME causes a few hiccups so it might be worth a look.

Thanks!

[Franky]

EME only loads gmail js if needed, see e.g. the code in the function eme_general_footer (in short: only when EME location maps are to be shown on a page).
Also, the JS for EME can be loaded in the header or footer, footer should be preferred for speed. If you select header, it will indeed always get loaded …
Concerning minifying: I personally don’t believe in it, since it combines several JS files into 1 and just changes variables and removes newlines (more or less). I only load the specific JS files where and when needed, and based on the small kb-sizes, it should be ok. But minifying could be done by other caching plugins …
Concerning the render-blocking: in the past I removed the jQuery(document).ready around google.maps.event.addDomListener(window, ‘load’, loadGMap) in js/eme_location_map.js, maybe re-adding that would help.

[Anonymous]

Maybe you can confirm, as I see the Google Maps call on my homepage at http://NEOHgolf.com but I don’t have a map there. (I know the call is placed on the homepage by your plugin because I had a key entered on the Maps settings page in EME. That key is removed right now, but it’s the same.)

From the homepage source code:
<script type=’text/javascript’ src=’//maps.google.com/maps/api/js?’></script>
<script type=’text/javascript’ src=’http://neohgolf.com/wp-content/plugins/events-made-easy/js/eme_location_map.js’></script&gt;

Both GTmetrix and PSI count that Maps call as a ‘render-blocking script’.

I’ve been testing caching plugins for a few hours now and between the various plugins and theme I use can’t find one that doesn’t break something. So right now I have no cache plugin active.

And candidly I don’t know enough about js and cache to quickly fix this myself.

I hope you take all this as me merely pointing out what GTmetrix and PSI both state, and I bring it up only in hopes you might keep it in mind as something to noodle out as you continue your work on the plugin. I love what you’ve built and I’ve sent a few donations in the past to show as much…

[Anonymous]

BTW, the biggest reason I haven’t been able to activate a cache plugin that works for me yet is that it keeps breaking the calendar. If I start combining and moving js around I can’t get the months on the calendar to move forward to the next month’s page…

[Franky]

Did you try my 2 suggestions:

– “Also, the JS for EME can be loaded in the header or footer, footer should be preferred for speed. If you select header, it will indeed always get loaded …”
– “Concerning the render-blocking: in the past I removed the jQuery(document).ready around google.maps.event.addDomListener(window, ‘load’, loadGMap) in js/eme_location_map.js, maybe re-adding that would help.”

So, change EME setting to load the JS in the footer already, not the header. and change the lines at the top of js/eme_location_map.js

[Franky]

Btw, in eme_events.php, maybe this line needs (occurs 2 times) to change from

echo "<script type='text/javascript' src='//maps.google.com/maps/api/js?".$gmap_api_key."' ></script>\n";

to

echo "<script type='text/javascript' src='//maps.google.com/maps/api/js?".$gmap_api_key."' async='async' defer='defer'></script>\n";

[Anonymous]

Thanks again Franky! I changed the Setting to load in the footer, and I revised the eme_events.php as you suggested. Those two steps did indeed move some EME items to the footer and eliminate the maps.google call from pages without a map.

But there is still one EME script that is render-blocking:
<script type=’text/javascript’ src=’http://neohgolf.com/wp-content/plugins/events-made-easy/js/eme.js’></script&gt;

Also, I could not implement your suggestion to “add back in jQuery(document).ready around google.maps.event.addDomListener(window, ‘load’, loadGMap) in js/eme_location_map.js” because I require more specific instructions to do so. Can you tell me exactly what to put where?

[Anonymous]

I’ve been working on PageSpeed / GTmetrix for a couple days now with additional help from the theme’s author. The one plugin he suggested that helps PageSpeed enormously is WP Deferred Javascripts: https://wordpress.org/plugins/wp-deferred-javascripts/

With it, my site gets 99% on GTmetrix, and it eliminates all Google concerns for js too.

But with this plugin activated, Google Maps will not appear on an EME Event Locations page at all: http://neohgolf.com/golf-course-directory/

I’ve tried everything I can think of to get Maps to appear with the Defered plugin activated: I’ve put the Google Maps js and eme_location_map.js in both the header and footer; I’ve tried to have the plugin not include the maps/eme js in its deferring; and I’ve even re-installed the latest version of EME just in case any of the tweaks we’ve made on the two threads I’ve been working with you had an effect. No luck.

So is there any suggestion you might make to resolve this Google Maps no-show with WP Deferred Javascripts activated?

[Anonymous]

P.S. to last post: actually, the Google Map won’t appear on ANY page from which it’s called when the WP Deferred Javascripts plugin is activated.

I just posted the first event of 2017 and the map won’t appear on the Event page either…

[Anonymous]

…and I just realized the Calendar months won’t advance forward or backward when the WP Deferred Javascripts plugin is activated.

I’m turning off the plugin on my site for now.

It would be awesome if you could figure out a way to allow me to turn it back on, as it’s a PageSpeed godsend…

[Franky]

Indeed, because it needed further tuning.
The defer plugin is no longer needed, I implemented this myself.
Concerning all the changes: try the dev-version, to be downloaded from here:
https://downloads.wordpress.org/plugin/events-made-easy.zip

[Anonymous]

But the defer plugin is still needed for the theme and several other plugins, so I need to activate it.

I’ll upload, reactivate and test now. Thanks Franky!

[Anonymous]

Unfortunately, when the defer plugin is activated, the new version of EME you gave me does not load Maps.

[Franky]

Deferring all javascript will cause problems all over the place. Even wordpress.org doesn’t do that, so I won’t either. Currently, on my site I have 90/100 for deferring js on pagespeed, as has wordpress.

[Anonymous]

FYI even with the defer plugin disabled, the Calendar months won’t advance on my Samsung 6 android phone using the standard Chrome browser.

Sorry, but there really aren’t “problems all over the place” using the defer plugin; only EME is breaking. I have about 20 plugins and a js-complex theme installed, and everything but EME works fully with the WP Deferred Javascripts plugin enabled.

And there are about 20 other js/css defer plugins out there with hundreds of thousands of installs in total. So this request affects a large potential user base…

[Franky]

Did you try the dev-version as I asked? I’m deferring most of the js too.
As said: I’m not aiming at more points as wordpress itself has. 90/100 seems just fine.
And I fixed a google maps issue (the google doc said to load it async too, but that fails on chrome), so redownload the dev-version. On my pc with firefox/midori/chrome: all work. Smartphone ok too.

[Anonymous]

I am downloading it again now and will reinstall. Thx.

[Anonymous]

I uploaded the plugin again, cleared the phone’s cache, and now the calendar months advanced.

I understand what you are saying about not deferring everything, and I’m not trying for a 100 score. But the theme I’m using has a ton of js not deferred so I’ll try to find a balance using the plugins.

Thank you Franky! I appreciate it and I’ll send a donation your way.

[Author]

Posts