hi, every time i get a surge of traffic, my site becomes crazy slow, especially on mobile devices. im running a 32gb ram server and confirmed with my web hoster that none of my ressources are even close of being used. i tried using google speed test for my site newswatch28.com, i get many errors: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fnewswatch28.com%2F&tab=mobile
i have the td booster pack plugin enabled. im also running w3 total cache plugin with page cache and browser cache enabled.
for Eliminate render-blocking JavaScript and CSS in above-the-fold content: i tried following https://forum.tagdiv.com/page-speed-guide/
i pasted the code in my functions.php removed it got all my files ids that i need to add to the speed booster pack plugin php file:
$this->move_style_to_footer(‘easy-social-share-buttons’);
$this->move_style_to_footer(‘contact-form-7’);
$this->move_style_to_footer(‘google-font-rest’);
$this->move_style_to_footer(‘js_composer_front’);
$this->move_style_to_footer(‘td-theme’);
$this->move_js_to_footer(‘contact-form-7’);
$this->move_js_to_footer(‘td-site-min’);
$this->move_js_to_footer(‘comment-reply’);
$this->move_js_to_footer(‘jquery’);
i tried pasting them where i thought i should but when i tried refreshing the speed test, the errors never went away. i reverted to the original… im not sure where to add them…
For prioritize visible content, i have no clue whatsoever to do, and strongly feel i need to do this. mobile only 31% rendered and 20% on desktop:
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.
For Leverage browser caching: once again, no clue what to do. i tried following the guide again pasted the code from your guide in .htaccess, nothing…. deleted and reverted to original awaiting on your answer.
there’s other minify issues but no instructions on the guide.
i can provide my ftp access, and admin login. please help, really dont know what to do anymore at this point…
Hi,
1) and 2) The js was moved at the bottom – http://screencast.com/t/VOSuXqWz
The css is still at the top, maybe you added those lines in the wrong section, please provide the content of your speedbooster plugin file to take a look, use pastebin – http://pastebin.com/ – Even if you move all css and js at the bottom Google pagespeed test may still show the warning because you have too many resources on the page.
3)On leverage you have the google ads and other js which comes from external resourcess – http://screencast.com/t/tjIX5RnvVJqS , it has a leverage set but it’s considered too low by the pagespeed test, basically google penalizes you for using their ads for which you can’t set a higher leverage.
For css js minifications you have to use a plugin, the settings depend on the plugin used, some may give errors when you minify their css or js so basically you have to make some tests.
Also use a cache plugin, we recommended W3TC in the past but now we made some tests and WP Super Cache seems faster.
Thank you, Emil G.
1) for Eliminate render-blocking JavaScript and CSS in above-the-fold content: like mentioned, didn’t know where to put them so i reverted to the original file. please let me know where to put both, css and js.
pastebin td-speed-booster: http://pastebin.com/MtRgLy7d
2) for cache i’m already using w3 total cache, should i change to WP Super Cache?
3) any plugin to recommend for minify?
4) 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.
What can i do for this?
For basic minification of the CSS and possibly main js files, see my optimization guide.
Be aware that there is really no 100% way to fully optimize loading the above the fold content with any commercial theme like this one — this is because there are many options and functions being loaded in order to render the page at all, and to provide folks to create totally different designs.
Many articles have been written online about getting a perfect score with PageSpeed and WordPress and that requires custom building a theme from scratch and setting up regions where CSS and js are loaded conditionally and in series based on the content sections. Very complex and outside the scope of commercial themes.
Limiting things like mega menus can help, making sure any external resources load via async (we used to use addthis for social buttons on our sites and had to ‘hack’ that to add async loading of their js, because they were too stupid to do it with one line of code in their WP plugin).
Often to get the best “real world” score for your site, you need to disable any/all things which load externally (ads, etc.) and then test that. Optimize. Then switch on external things, optimize “if possible” and then realize the “real score” doesn’t count the Google ads stuff.
You can’t control caching of external elements (time to live), or minification of external resources. With Google fonts you can load the CSS locally in your own style sheet, then simply “draw” the fonts from their CDN. Now that “Roboto” is open source, one could in theory even load that font off your own server and bypass Google entirely. Or just use “web safe” fonts, to eliminate any external font loading.
For the above the fold render blocking blah blah. If your mobile score is above 85 you’re fine; if your desktop is above 90 you’re fine. But there is a notable “tuning” process to this, and again — it’s almost impossible to eliminate the “render blocking” or “above the fold stuff” entirely with *any* commercial theme.
Not sure any of that helps… just some feedback on my own suffering using commercial WordPress themes, and also building my own bootstrap 2 templates which are running our main business portal (using .shtml and custom page builder CMS; not WP).
