SEO, Google Page insights, blocking rendering ressources "above the fold"

Hi lami4d,
Work through your CSS files one by one and exclude the offending CSS file from minification that is causing the flash.
I tried 5 or so plugins for both CSS and JS minification.
For me, The best results were from WPMU DEV Humming Bird, which compressed without causing too many display errors.
Humming Bird also allows you to defer CSS as JS to the header or footer. I know it’s a paid plugin. But it gave the best results.

I also took my speed optimisation one step further by pre-compressing both JS and CSS file in the parent theme. Keeping both the original and a compressed version. However, I would need to repeat this process every time I upgrade ENFOLDS.
I have suggested to Kriesi that precompressed resources should also be available with the theme. There are too many display issues caused by third-party minify plugins for a one click suit all scenario. One day hopefully.

I have posted my optimisation results here – https://kriesi.at/support/topic/enfold-vs-avada-speed-test/
I plan at some point to provide an in-depth guide. Don’t hold your breath.

1. Don’t minify any existing CSS files that already have .min.css
Exclude from minify, however, you can still combine these CSS files.

2. Don’t minify, but combine.
jquery-core :: wp-includes/js/jquery/jquery.js

3. There are 3 main files that I found, that if ‘combined’ caused display issues with ENFOLDS
avia-scs :: enfold/css/shortcodes.css
avia-layout :: enfold/css/layout.css
avia-dynamic :: dynamic_avia/enfold_child.css

To remove the flash – You could also try – Above the fold CSS.
Remove all CSS minification.
Render the page
Then get your above the fold CSS for the home page.
Try this: https://jonassebastianohlsson.com/criticalpathcssgenerator/
Or there is a chrome extension – Critical Style Snapshot
Move a copy of header.php from themes/enfold/ to themes/enfold-child/ then add the above the fold CSS to the header.php file just before the </head>

<style type="text/css" id="above_the_fold" media="all">
Insert above the fold css here 
</style>
</head>

All CSS required to render the page successfully has been added to header.php
You can then try to turn your minification back on – to see if you still get the flash.

The only other tip I can add … Page Speed Insights.

Leverage browser caching
https://www.google-analytics.com/analytics.js (2 hours)

There are a lot of suggestion on how to get around this, but they are all complicated. The easiest method to solve Leverage browser caching for Google Analytics is too….
1. Install Google Tag Manger.
2. Implement Google Analytics via Google Tag Manager
3. Remove your legacy Google Analytics.

I found this video series very informative.

Thanks – Julian Juenemann from Measureschool

Let me know how you go

hello everyone
i have found that this plugin work the best for my enfold theme for my clinets
WOT CACHE PLUGIN the best thing is that it has a premade preset that you just need to choose enfold from it and thats it the plugin do the rest
also you have in it image optimization which help me alot with optimization

Hello I have followed the advice of Tiranmoy and I bought the plugin WOT: my score with google speed now is 89/97. Plugin recommended.

Regards
Maurizio

• This reply was modified 6 years, 7 months ago by mfregosi.

Hello tiranmoy,
thanks for your hint. Don’t get me wrong, but in checking your replies here in the forum over the time I see that all you do is recomending this plugin. ;-) Do you have any conflict of interest we need to know? Once again: Don’t get me wrong.

Best Regards
Sigmund

Hi Rikard,
thanks for the clarification. I have read your review. The free version of WOT Cache has been deleted from the WordPress repo, https://wordpress.org/plugins/wot-cache/ is closed.

Do you know if the pro version can handle the “above the fold” topic in enfold which google insights is always complaining about?

Best Regards
Sigmund

• This reply was modified 6 years, 5 months ago by Sigmund.

Hi, is there any free working solution in 2018?
My website is ridiculously slow. Loading time is about 11s. I tried to figure out how to boost it, but I am not a programmer.

Back again! Some healthy discussion here.

WOT CACHE
I recently purchased WotCache for a client and tested it out. The default preset for Enfolds was disappointing.
After resetting and doing manual tweaks, I got some impressive results in the high 90’s. However, several other issues surfaced.
1. Admin Bar Disappeared. As per the preset – Be sure to exclude CSS: admin-bar.min.css and dashicons.min.css
2. Minify JS worked fine, however, for whatever reason I could not track down – WotCache also minified some shortcode inline js breaking the JS cookie. It seems to be all or nothing. For now, I have disabled Minify JS. I am working on segmenting the shortcode inline JS to an external file – so that it could be excluded.
3. The compression minify engine – results were good – however, on testing with Pagespeed insights, GTMetrix, WebPageTest and Pingdom. All suggested that the CSS and JS could be reduced further. Most of these sites allow you to download optimised assets. What is the go here? There must be a reason why WotCache is using a particular minify engine.
4. With Cache activated, I soon noticed 404 errors on editing and publishing pages.
5. The WOT CACHE spin icon was always present at the bottom of the page in admin
6. Clearing the Cache would time out and the spinning icon would not go away
7. On publishing an update, the cache for that post was not auto updated. The client found this very annoying – having to constantly manually clear the cache.

After dealing with these issues – In this instance – have disabled the WotCache plugin.
I’m not saying that the plugin doesn’t work, but with a few improvements, performance could be better.
Hopefully, the guys at WotCache can resolve these issues with future updates.

FIRST BYTE
I currently host over 20 sites with DREAMHOST a USA hosting provider. I am in Australia and so are my clients.
With most speed test from US servers, everything is lightning fast. However, when speed testing with an Australian severs first-byte is the main issue.
The use of a CDN would resolve this issue, however, with Dreamhost, at the moment, there is a restriction with the Cloudflare that the domain must force WWW – which creates the “too many redirects issue”.
And I believe DreamHost has saturated their Shared Server Hosting. With Vanilla install of WordPress and Enfolds with no traffic, the site automatically exceeds Dreamhosts’ CPU usage. Dreamhost is forcing users to upgrade to DreamPress or a VPS.

On the back of this, I am trialling hosting with SiteGround – and with a vanilla install of Enfolds out of the box with no CDN, using http://www.webpagetest.org/ Sydney as my speed test server location, For first-byte I get a yellow “C” on Siteground instead of a red”F” from Dreamhost.
SiteGound has built-in server caching solution, SuperCache – https://www.siteground.com/tutorials/supercacher/sgcachepress/

I have yet to do further testing with Enfolds on the SiteGound Server. I will report back later with a more resolved conclusion.

I hope this helps.

WOT CACHE

I decided to do some comprehensive testing on the DEVELOPMENT SITE

WOTCACHE After loading the PRESET for ENFOLDS
1. Front page – On page load first render there is a CSS flicker
2. Front page – The full-page Slider – not rendered
3. Front page – Testimonials slider – not rendered
4. Front Page – Gravity Form – not rendered
5. Page Content – Animated images and galleries – not rendered
6. Page Content – Portfolio Grid – not rendered
the list goes on.

Reset the WOT Cache Preset to GENERAL
Make the following edits
———————————————
HTML/CSS
Minify [ √ ] HTML / [ √ ] CSS
EXCLUDE CSS
admin-bar.min.css
dashicons.min.css
wp-content/plugins/wordpress-seo/css/dist/adminbar-510.min.css
wp-content/themes/enfold/css/print.css
wp-content/plugins/gravityforms/css/formreset.min.css
wp-content/plugins/gravityforms/css/formsmain.min.css
wp-content/plugins/gravityforms/css/readyclass.min.css
wp-content/plugins/gravityforms/css/browsers.min.css

COMBINE CSS [ √ ]
Exclude CSS
wp-content/themes/enfold/css/layout.css
wp-content/themes/enfold/css/shortcodes.css
wp-content/uploads/dynamic_avia/enfold_child.css
admin-bar.min.css
dashicons.min.css

ASYNC CSS [ ] don’t tick

ASYNC GOOGLE FONTS [ √ ]

REMOVE QUERY STRINGS [ √ ]

EXCLUDE PAGES – empty

———————————————
JAVASCRIPT

MINIFY JAVASCRIPT [ √ ]
EXCLUDE JAVASCRIPT
wp-includes/js/jquery/jquery.js
wp-includes/js/admin-bar.min.js

MOVE JS [ √ ]

COMBINE JS [ √ ]
EXCLUDE JS [ ] empty

ADD TRY-CATCH WRAPPING [ ] don’t tick

DEFER JAVASCRIPT [ ] don’t tick
EXCLUDE PAGES – empty
———————————————
LAZY LOAD – OFF

———————————————

CACHE – ACTIVE

———————————————

Let me know how you go with these settings.

hello to all i am from wot support which you can also send this qustions too :)

This is a fact, that every Cache plugin needs tuning. There is no magic wand
but as Sigmund said
in virgin theme preset will work fine, if you add alot of plugins in to it then it will need set up
also regarding server issue it is under testing by us this is a rare thing that happend only twice from hunders of installs
and its a server issue so we are looking for a way around it
we stand fully behind our product and will refund anyone who dont get the result he desire
most of our sites get 90+ in results

I did what Arnold suggested but got no results.
So I delete the three plugins,
Now my performance are:
Pingdom: 84/100 – Load time: 14″
GTmetrix: 71% – Load time: 28″
PageSpeed Insights: 45/100

Who should I trust?
For instance, Pingdom says tha Leverage browser caching is 90, but GTmetrix says is 56.
How can it be possible?

@huxburyquinn – Using Google Tag manager actually doubles up the Leverage browser caching problems, having two, instead of just one .js file.