need a clear answer

need to know how to properly do :

#1 Eliminate render-blocking JavaScript and CSS in above-the-fold content
#2 Minify JavaScript
#3 Minify CSS

in order to improve page speed… 69/Mobile 82/Desktop

Im using W3 total cache with

#1 Page cache:enabled 
#2 Database Cache:enabled 
#3 Object Cache:enabled 
#4 Browser Cache:enabled

and tagDiv speed booster

Thank you

1) remove all external loading elements like social media, advertising, recaptcha, and anything which loads css or js as part of its content; anything not part of the theme

2) use the minification tools I’ve suggested in the pagespeed sticky topic – such as online minification tools, or use the GTMetrix optimized versions provided during the site scan

Basically you need to take the CSS and JS files which PageSpeed is saying need to be minified, and then copy those from your theme directory, minify them, then save the minified version over the original.

One tool to minify the CSS is here:
http://cssminifier.com/

or
http://gpbmike.github.io/refresh-sf/

After you have your minified versions, say of style.css you would need to FTP the minified version(s) to your web site into the wp-content/themes/newspaper folder in the appropriate place.

NOTE: you need to clear all caching, turn OFF caching, and then upload the optimized versions, so that the new versions get cached not the old ones.

3) see 2

If you have a page speed of “82”
then be sure to
1) have faster web hosting account
2) ensure that gzip/deflate are working on your server (mandatory!)
3) enable expires headers (mandatory!)
4) optimize your images

All of this is well covered in the PageSpeed sticky topic in the forum. Optimization of your server, content, and htaccess or nginx config files are not part of the theme.

There is no way for you to optimize external content such as AdSense, AddThis, Recaptcha, Disqus, etc. which are not being served on your actual site.

For max speed you will need to use web safe fonts (not Google fonts), and then comment out the fonts in your functions.php file.

• This reply was modified 12 years by simchris.

i dont want to remove anything …

All i want to know is .. How to :

#1 Eliminate render-blocking JavaScript and CSS in above-the-fold content
#2 Minify JavaScript
#3 Minify CSS

Thats all

i will try to minify like u said
Thanks Christopher Simmons

Thnak you again for your answer

Christopher Simmons

You’re welcome 🙂

ok .. Im done minifying … Whats on local server

Html .. Css and js .. Now im up 2 point .. 84 desktop ;))

The only thing left i need to do is

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Which i cannot find how to do it ..

Thanks

tried this … http://www.wpcub.com/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content/

and didnt work

thanks

What files are being identified as blocking ?

Christopher Simmons here you can see it yourself >> http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fregatulunit.com%2F&tab=mobile

been testing all day :))

tired now …

i managed to get
73/Mobile 85/Desktop without tagDiv speed booster

69/Mobile 82/Desktop with tagDiv speed booster

all i need is to Eliminate render-blocking JavaScript and CSS in above-the-fold content which is in red in mobile and yellow in desktop 🙂

thanks

hi,
to achieve this you need to put all the css and all the javascript code in the source of the page like : http://screencast.com/t/j1RrYGoVy

it will make the page bigger in size but google will not complain about :Eliminate render-blocking JavaScript and CSS in abo…….

however in wordpress you cannot achieve this because wordpress in his wisdom will not function without a file called style.css

Thanks for you message.
Radu A.

Ok …. So you are saying that theres no way this can be done with a wordpress site ??

Correct ?

And whats the cause of speed booster lower speed when in use ???

Thanks

hi,
lets start from the begging, the reason way google is giving that “Remove render…..” is because when the source of the site get downloaded and loads into the browser it find resources like css and javascript files, font file, etc and the browser stop the downloading of the page to start downloading the other files (css, javascript files) and google says that is better to download the source of the page first and at the end to download other resources.

now that we found what happens, moving the css and javascript code at the bottom of the page – I think ???- it can be done by doing something like :
keep the style.css of wordpress, but put all the code in another css file, then
read the file and put the readed content between <style> and </style> in the
footer of your site (probably thru the use of hooks). do the same for javascript
files(need to use the <script> and </script> tags).

Now imagine that for every plugin that have css files and/or javascript files you need to do this reading of files and pasting in the bottom of the page. Is hard to do this but will insure that message “Remove render …..” will disappear.

==== about speed buster
all that td-speed-booster is doing is to move the javascript files from the header of the page to the bottom of the page. in theory this will have to increase the speed in google pagespeed application, but in your case seems that it fails, really don’t know way, this has to be checked.

Thanks for you message.
Radu A.

thank you radu for your reply ..

This is getting to complicated for me …

Im just gonna leave things as they are ..:))

I donr think there i can archive a better score anyway ..

At the end of the day .. I dont care about the score .. Its about the speed .. 🙂

I emailed you guys asking for a tip for a better host … could u please reply back ???

Thanks

Yoluca,

I had the same issue. Try this plugin: Async JS and CSS: Converts render-blocking CSS and JS files into NON-render-blocking, improving performance of web page

It will remove most (if not all of the render-blocking scripts).

Good Luck!

The best managed host is WpEngine. Synthesis is also good. If you’re tech savvy, try Linode/Digital Ocean Clouds. I’m working on transferring to Google App Engine. We’ll see how it goes!

• This reply was modified 12 years by Fudoki.

For many of our sites the best we’ve been able to do is to combine all the CSS into one file, and all the JS into one file, then load the JS via async, and load the CSS from the CDN/Amazon Cloud; then inline the menu stuff we had built custom into the head, along with some CSS which needs to load after Bootstrap.

In most cases you cannot fully remove all render blocking elements, only minimize them. Fix everything ELSE first and you can still get a 90+ desktop score in most cases.

I’ve only seen the render blocking fully fixed by building a minimal theme, and structuring the content specifically to address that issue – but not very pretty site.

So, best tip: fix everything ELSE you can, and don’t obsess over the render blocking stuff as most sites still have this issue due to the way Google is looking at that. They seem to base that “error” on anything which isn’t minimal like Google’s help pages.

@Fudoki you right … that Async JS and CSS does something

im now 77/Mobile 86/Desktop

from 69/Mobile 82/Desktop

thanks

hi,
glad that you fix your issue.

Thanks for you message.
Radu A.