![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
November 24, 2016 at 5:02 pm #716500
Hi,
SEO is quite important for us and Google just informed our marketing team that the page-speed, especially on mobile sites, becomes more and more important for the google organic-search index.
Unfortunately the index of our page is only at 66 (everything below 80 might have an impact on SEO)
I could not find an advice in the enfold-support-forum, maybe i got the wrong search-terms?
Are there any plans to improve this in the future?November 25, 2016 at 7:37 am #716677Hey net-files,
Your results are 82 on desktop which I would say it acceptable but you could try one or more of these plugins to see if you see any improvements:
GZip Ninja Speed Compression:
https://wordpress.org/plugins/gzip-ninja-speed-compression/
WP Smush:
https://wordpress.org/plugins/wp-smushit/
W3 Total cache:
https://wordpress.org/plugins/w3-total-cache/
BWP Minify:
https://wordpress.org/plugins/bwp-minify/Best regards,
RikardNovember 25, 2016 at 10:05 am #716739Thank you for the information, the desktop value is correct, but the “Mobile-Insight” is getting more and more important and our marketing team is keeping a very close eye on this issue. It’s “only” about the JS- and CSS-ressources “above the fold”! I’m aware that changing this is almost an open heart surgery.
I just wanted to let you kow that we are thinking about migrating to another theme/CRM if this gets more serious in the medium-term! And i would be surprised if we are the only ones concerned.
November 26, 2016 at 6:04 am #717133Hi,
Ok, thanks for the information. I understand your concern and no, you are not the only one who would like to remove that notification. I’ve answered this question many times before but it’s difficult to get the message across most of the time, but I can say this much; what the Google tool is indicating as something which should be fixed is not really an error, I would say that almost all modern site will display this message if you have a look around. Take this as an example, one of the largest german sites that I know of: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.bild.de%2F&tab=mobile. Their results are far worse than yours, do you think that they are being punished in SERPS by Google? I wouldn’t think so to be honest. This message is displayed on all sites who load stylesheets and scripts in the header (before the fold). Why are they loaded there? Because they are needed to render the site properly is the easy answer.
I don’t blame you for wanting to improve your sites performance, but before you switch themes or platform, please check a demo or something similar first.
Best regards,
Rikard-
This reply was modified 7 years, 9 months ago by
Rikard.
November 26, 2016 at 6:08 am #717135Hi,
Here’s another example to continue my mini-rant: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.sueddeutsche.de%2F&tab=mobile. They are getting basically the same results as your site is. I’m not sure what business you are in but try analysing your competitors sites and see what results you get.
Best regards,
RikardNovember 26, 2016 at 6:31 pm #717241To add some useful information to this thread: I am using the above-the-fold-optimization plugin in WordPress. At the moment I have succeeded to get all critical-css into html-inline css, and am nearly done with the javascript.
To get a non-blocking html-page you need to have all critical css and js to be inline in your html page (thus not to be called from an external .css or .js file) and have the inline javascript call the remainder of the css and js. This can all be done by the plugin I mentioned.
Right now I have 79/100 on desktop and 69/100 on mobile, and hope to have a better score when I find the blocking javascript function.
I keep you posted with my progress.
BR, ArnoldNovember 27, 2016 at 6:54 am #717375Hi Arnold,
Thank you very much for sharing, that was news to me. I’m not sure exactly what plugin you are using but here are search results from wordpress.org: https://wordpress.org/plugins/search.php?q=above-the-fold-optimization. It shouldn’t matter if the scripts are inline or not though, technically it’s the same thing.
Best regards,
RikardNovember 27, 2016 at 1:05 pm #717421Hi Rikard,
The first result of your query is the plugin I am using: https://wordpress.org/plugins/above-the-fold-optimization/
The only technical difference between inline javascipt and css versus external .js and .css files is that WordPress will not start rendering the output html before all necessary .css and .js files are loaded. Of course putting all css and js inline gives a much larger html-output which will also be a blocking issue on slow connections e.g. mobile devices with 3G. So I am still checking what needs to be inline and what can be loaded (asynchronously) from .css and .js files and still have all functionality as it should be.
Right now I already have a 80/100 on mobile and 82/100 on desktop which is already a great score, but now both on mobile and desktop the “Next-Section” button does not work anymore.
I keep you posted.
Best Regards
ArnoldNovember 28, 2016 at 6:07 am #717569Hi Arnold,
Thanks a lot for sharing your experiences, a lot of our user want to get rid of these messages from Google so any feedback you might have is appreciated.
Best regards,
RikardNovember 28, 2016 at 9:19 am #717627Hi,
thank you for all those answers. It seems to be a matter of “if you want the features, you have to swallow this pill”. It will be hard to find a theme that has similar features like Enfold but only inline CSS&JS.
Best regards,
WernerNovember 29, 2016 at 6:08 am #718105Hi Werner,
I guess you could say that yes, but this would be the case with more or less any modern website you analyse with the Google tool. In my opinion it’s a mistake by Google to report this as something users should fix, as it’s industry standard and not something only a few websites do.
Best regards,
RikardDecember 5, 2016 at 12:32 pm #720432Hi all,
I agree with Rikard that a Google-tool decides for you if your site has a good user-experience or not.
I mentioned that I will update the experiences I have done on my website.
Right now I have 93/100 on Mobile and 97/100 on Desktop via the https://developers.google.com/speed/pagespeed/insights website. The last few percentages are javascript-optimization items, but some js-optimization plugins I tried broke the website-functionality.Below are the settings I made to get to this score. Of course it took a lot of time trying, testing and reading to get to this point. Don’t be disappointed if it does not work for you, those are my settings for my website and things will depend on which other plugins you have deployed on your site, that might have other blocking css or js.
What I did:
Installing
Install the plugin Autoptimize.
Install the plugin Comet Cache.
Install the plugin Above the Fold Optimization.
Activate them all.
So far the easy part ;)Go to Comet cache settings :
(only important settings below)-
Enable: yes
Automatic Cache clearing: set them all to yes
Cache Directory: any writable directory on you hosting server; keep default cache/comet-cache
Client side cache: yes
Get requests: noAbove the fold Optimization (Pagespeed)
Critical CSS:
Critical Path CSS: <get the full CSS, and put it into an online CSS-optimizer and paste it here>
Enable Condition CSS: noCSS:
-
Optimize CSS Delivery: yes
Enhanced loadCSS: yes
Position: Footer
Ignore List: <empty>
Remove List: print.css
Optimize Web Fonts: yes
webfont.js Load Method: async
Load Position: footer
WebFontConfig: <default>
Google Web Fonts: Lato:300,400,700:latin <and your other fonts that you use from Google, each on one line>
Exclude List: <empty>Javascript:
-
Optimize Javascript Loading: yes
Script Loader: little-loader + HTML5 Web Worker <for this setting to enable, you need also to enable Proxy Scripts on the Proxy Tab>
Position: header
Ignore List: <empty>
Remove List: <empty>
Force Async: yes
Async Disabled List: <open the avia.js in a text-editor, find the function for Smooth Scrolling (starts at line 713, ends at 853), copy and paste it here>
Abide dependencies: no
JQuery Stub: yes
Lazy Load Scripts: noAutoptimize
Show Advanced Settings
HTML Options-
Optimize HTML Code: yes
Keep HTML comments: noJavascript Options
- Optimize JavaScript Code: no
CSS Options
-
Optimize CSS Code: yes
Generate data: URIs for images: no
Remove Google Fonts: no
Also aggregate inline CSS: no
Inline and Defer CSS: yes
<paste necessary/critical CSS here that you acquired in the previous step>
Exclude CSS from Autoptimize: admin-bar.min.css, dashicons.min.css, print.css-
This reply was modified 7 years, 9 months ago by
Arnold. Reason: formatted this post a bit
December 6, 2016 at 8:33 am #720880Hi,
Thank you very much for sharing that, we appreciate it a lot!
Best regards,
RikardJanuary 7, 2017 at 11:29 am #730671Hello,
Thanks for this useful information first. I tried to follow the way Arnold suggested. Thanks!
I experienced a problem and would like to ask you.
Critical Path CSS;
I downloaded Full CSS from same page (Critical Path CSS), and used CSS Compressor online web tool (Standart compresssion saved it %26.61)then copied the code after compression and pasted to Critical Path CSS on Above The Fold Optimization plugin’s Critical CSS page.Then set it up with the settings you suggested. I had a problem with website CSS and it messed up. I tried every single option to find which option make this. And I found it. If I checked “Optimized CSS Delivery – Enabled” in Above The Fold’s CSS section, issue came back.
So, what can be wrong with it?
Thanks,
Orhan-
This reply was modified 7 years, 8 months ago by
erkuto. Reason: I made some tests and could describe the issue more clear
January 8, 2017 at 6:27 am #730786Hi Orhan,
Glad you found the thread useful, I have only looked at that plugin briefly so I’m not sure I can help you out much unfortunately. Did you try reaching out to the plugin developers to see if they can help you out?
Best regards,
RikardJanuary 12, 2017 at 10:49 pm #732867Hi all,
I am finetuning my settings to further optimize the “Above the fold’ issue. By reading a lot of information on the internet how this works you should get good knowledge of this complicated matter could be solved. The short story is that all CSS and JS files loaded in the <HEAD> section of your webpage could block the rendering (loading). By placing them in the <BODY> section the webpage starts rendering the page earlier. The disadvantage is that the layout of the page could be messed up, so that is why some of the CSS content should be loaded in the <HEAD> section. In stead of loading CSS files, you can also add CSS as inline stylesheets, thus not blocking the rendering of the webpage. The JS part is a bit more complicated, so I am still reading (and learning) about this.
Maybe this will help to you too Orhan:
In the Above the Fold plugin, at the Critical CSS tab extract the full CSS.
Then disable the Above the fold plugin.
Go to https://jonassebastianohlsson.com/criticalpathcssgenerator/
At this website, at number 1 type your website URL
At number 2 paste your full-extracted CSS
Press the button at number 3.
Copy the generated CSS.Go back to your WordPress admin and enable the Above the Fold plugin again.
Go to the Critical CSS tab of the Above the Fold plugin and paste the newly generated CSS here.
Go to the CSS tab and enable the Optimize CSS Delivery option and save all settings,To be sure the website loads with this settings empty the cache of your webbrowser, and if you have cacing plugins on you site, also clear those caches.
Good luck.
ArnoldJanuary 13, 2017 at 8:16 am #733024Hi Arnold,
Thank you very much for sharing your experience, we appreciate it a lot!
Best regards,
RikardFebruary 4, 2017 at 11:36 pm #742888This is an amazing thread and I really appreciate the time you took, Ahogerhuis, on putting this guide together!
One question… on this step:
Above the fold Optimization (Pagespeed)
Critical CSS:
Critical Path CSS: <get the full CSS, and put it into an online CSS-optimizer and paste it here>When you say “get the full CSS, and put it into an online CSS-optimizer….” how do we get the full CSS to add to this box? I know, stupid question, but my css skills are fairly minimal.
Thanks!!
February 9, 2017 at 7:51 pm #745006I’m curious if the above mentioned fixes actually made the site load more quickly in mobile or just made your scores higher in Google PageSpeed?
February 10, 2017 at 12:12 pm #745353@goldengate415
In the settings of the Pagespeed/Above the Fold plugin, when you are on the tab CriticalCSS, then halfway the page you see:Extract Full CSS For the creation of Critical Path CSS you need the full CSS of a page. This tool allows you to extract the full CSS from any url and optionally to select the specific CSS files you want to extract. You can quickly output the full CSS of any url by adding the query string ?extract-css=0eae7250104aba6e53dcec8cb3d6c00e&output=print.
At that point you can download your complete css of your website.
@CurlyHost
You should start a Chrome Webbrowser, press Ctrl-Shift-I to open the developer tools.
With the plugin disabled and your browser-cache cleared, open your website and check in Chrome-dev-tools on the network-tab how fast you site was loaded. Notice the number of files that are downloaded from the webserver.
Now enable the plugin, clear your browser cache and open your website again and check the network speed in the Chrome-dev-tools. The number of files is decreased, and also the time to load the total number of files is less.
So there should be a difference, less files should be downloaded because more css is rewritten as inline style.
Of course you should know that Google also uses the loading-time of your website to rank your website, although this is only small part of your ranking.March 14, 2017 at 1:15 pm #760688Hi,
it seems like Google updated its page speed insights. Our page dropped from orange to red since JavaScript- and CSS-Ressources in “above the fold” contents obviously became more important.
I’m writing this to inform you once again that the issue becomes more and more critical and something needs to be done about this.
March 15, 2017 at 7:10 am #761176Hi @net-files,
Thanks for the feedback, though I think the topic has been discussed in depth throughout the thread and suggestions have been given to this supposed problem.
Best regards,
RikardMarch 15, 2017 at 9:15 am #761227We just wanted to make clear that this “supposed problem” is a serious issue for us and if the ranking keeps getting worse we are considering to switch the theme!
March 15, 2017 at 9:48 am #761250Hi!
If you follow @Arnold’s suggestion above, the page speed insight score should increase by 40 points. Most of the issues listed in page speed insight test, aside from the “eliminate-render-blocking” or “atf (above the fold)”, are not created by the theme (ex: “optimize images”). And other issues (ex: leverage caching) can be fixed by simply adding a plugin or modifying the .htaccess file.
Best regards,
IsmaelMarch 21, 2017 at 5:21 am #763963Hi,
A blog post from the good people at WP Rocket on Google Page Speed insights: https://wp-rocket.me/blog/the-truth-about-google-pagespeed-insights/
Best regards,
RikardMay 21, 2017 at 2:33 am #797135Hi ,
Thanks so much for this post.
I only discovered this article mid way through my optimisation efforts.
Please refer to my final results and setup here:May 21, 2017 at 7:44 am #797161June 1, 2017 at 10:58 pm #802805Amazing thread!! Definitely bookmarking it!! Thank you all for your incredible insights, findings and contributions!!
June 2, 2017 at 12:26 pm #802969Hi @havi,
Glad you found the thread useful, please contribute if you should have any additional information on the topic.
Best regards,
RikardJune 17, 2017 at 12:52 am #809164Thanks for all the suggestions.
I have successfully applied most of the recommendations. Have an average score of 90.
However, I havING A flash of unstyled content after using inline and defer CSS in Autoptimize.
A unstyled menu shows up before page loads completely. Sometimes, content occupies just a segment of the entire width before finally occupying the whole screen size.
Had to turn on the page preloader to hide this error.
So, my question is this;
What CSS file should I exclude to prevent this FOUC from popping up?
You can navigate to have a glimpse of the problems.
Thanks.. -
This reply was modified 7 years, 9 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.