Remove Render Blocking Javascript and CSS With Autoptimize Plugin

Подписаться 1,4 тыс.

Просмотров 95 тыс.

50% 1

Update: A new video on Autoptimize is available, be sure to take a look:
• Autoptimize Remove Ren...
Improve site performance for your WordPress Blog and remove render-blocking Javascript and CSS.
This can all be accomplished with the Autoptimize Plugin and a free tool called Critical Path CSS Generator (see link below). The correct Autoptimize plugin settings will remove render-blocking Javascript and render-blocking CSS. That is Javascript or CSS that loads above the fold, thereby impacting your website performance. By eliminating this render-blocking code from your site, you will see a drastic improvement to your website load times.
jonassebastianohlsson.com/cri...
And if you're interested in how to combine external javascript and/or CSS to reduce the number of HTTP requests, take a look at my latest video:
• Combine External Javas...

Наука

Опубликовано:

3 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 76

@frankgoossens 7 лет назад

I'm AO's developer and I approve of this video ;-)

@VintageHeavyMetal 6 лет назад

Frank, I followed Mr. Craigerson's and all went perfectly...I do have a question, hopefully it's not too much of a beginner question...Can I safely add additional custom CSS to my child theme in the future without further steps in Autoptimize?

@vatueugen 6 лет назад

How can i do it for my shopify store please?

@harsherharsh 5 лет назад

I am god and i don't approve you!

@HyberCrashDK 5 лет назад

My site went from 22 to 4 after i used autoptimize... Cant recommend

@ecosolarhomeimprovement5748 7 лет назад

Very helpful went from a 30 to a whopping 74%. Great job.

@dwarkeshsavaliya4751 5 лет назад

I show 5 to 10 video and download many plugins but nothing works but your video solve my problem great video

@chase_h.01 5 лет назад

This made my website go from a 34 score to a 91. Very helpful video.

@Craigerson 5 лет назад

That's awesome. Glad it helped.

@theunifiedfield. 6 лет назад

It really helps to perform a database cleanup after optimisation. You'll be surprised how much it can speed things up. Hummingbird is good for helping to show performance diagnostics and how you can improve things and has a built-in database cleaner.

@roelhr 7 лет назад

Worked like a charmed to me!! Thanks!

@rdevanney 5 лет назад

Hi, I followed along with your video, struggled initially with critical path because my CSS was over 800,000 characters, so had to do it in 2 goes, but it worked! Google page speed now says nothing about render blocking, so thanks a lot. Just got to work on the leverage browser caching now, still comes up on page speeds even though it's set through W3.

@mustaquekhan4255 4 года назад

Excellent man... It worked... I was having 11 css files.. Now I'm having only 4...... And my earlier Gtmetrix page speed score was 95, yslow 82...now it increased to 99 and 93...... Love you man.... U owe me a dinner 👍👍

@Craigerson 4 года назад

👍

@acrepaircenter4480 6 лет назад

thank you so much. improved a lot.

@Arkmale 5 лет назад

Thanks, Bro! Very userfull. I'm going to try. :)

@DesWalsh 7 лет назад

Thanks for this. Very helpful. I'm curious about leaving the jquery file. In mine it is also there and there is an exclusion from Autoptimize in the relevant box.

@halal-habit 5 лет назад

5 star dude. from 13 to 75. thats awesome

@Craigerson 5 лет назад

👍

@oliverjordanov4155 5 лет назад

Thank you very much. This video helped me a lot.

@Craigerson 5 лет назад

Glad to hear that Oliver.

@mangeshrane9424 7 лет назад

Yesterday I did this today I wrote a post published it checked speed yesterday it showed 6 sec load time now it's shows 13 sec. how do I reduce speed load time ?

@fernandoluis53 6 лет назад

What about the settings in w3 total cache? My website is totally messed up. How can I undo the changes?

@PEGDOLLRECORDS 6 лет назад

Hi Craig. I have developed our website in the Elementor Plugin and when I generate the css code and past it into the Extract Critical CSS form and hit Create Critical Path CSS it does not show how yours does or on another tutorial I have watched giving the same advice. Instead it shows with a long line of information rather than a drop down of different codes :( I have pasted this back into wordpress where advised and nothing happens. Any idea why it would not be showing in a similar layout?

@veersinghrana9030 6 лет назад

its not working for me dear. This plugin conflicting with my cache plugin. Please help me to improve my blog load speed.......

@subkuch5224 4 года назад

by using this, my load time deduce and performance become 14 from 19, load time from 3.1 sec to 5.5 sec what should i do ?

@mohammaduzairhanif5848 4 года назад

really helpful thanks

@Canadiancookingadventures 6 лет назад

I tried this and it looked a bit different in the plugin there was OPTIMIZE CSS option but no INLINE option on mine? So anyway I checked that one along with the others and my site went wonky. I had to disable it!! My page insight says I need to do the same thing as you, so im very confused. I use BREEZE as my caching tool. HELP?

@Bluz1 5 лет назад

Yes but this is only about solving the CSS problem, what about the Javascript?

@vivekharidas9624 6 лет назад

how to get custom css back which was removed by autoptimize plugin in wordpress

@CLDisabilityAwarenes 6 лет назад

Hi, I got Autoptimize yesterday. I turned on javascript and CSS, but it didn't expand so to see the other options. Why? Also I ran the pagespeed and before the plugin, it was 55 and now it's 40. Can you help me please?

@Canadiancookingadventures 6 лет назад

same here no other options

@cheeloongpoh2322 5 лет назад

There's a "Show advanced settings" option at the top right

@steveogut2318 5 лет назад

thank you so much.

@catalinafandarac3877 5 лет назад

Bn eu am tuuwuehsjurjjrr i juru rufhfrysheheydjrhrheuseyheye1

@markwells7512 7 лет назад

Thanks! so much..........

@javonners 7 лет назад

I am loving this tutorial. But I got caught when you clicked on the consolidated css file within the homepage source. I don't seem to have a consolidated file even through I have autoptimize settings just like yours. Any thoughts?

@Craigerson 7 лет назад

That's weird Javon. This is one of the primary features of the plugin, to create that consolidated source file. By chance, did you search your source file for that consolidated CSS file, by doing a search on "autoptimize"?

@Stevostevi 7 лет назад

Hi, I used this method to optimize my site and while I did get a better score on PageSpeed, the images on my site were removed when doing this. However when I deactivated Autoptimize, all the pictures return. Any tips for fixing this?

@madrus2 4 года назад

I have the same issue. Have you found a solution?

@MarkElliottMCIM 5 лет назад

Hi Craigerson, I am unable to locate the "Inline and Defer CSS" Option in the most recent plug in (Feb-2019) please can you advise where the Critical Path CSS is now to be placed? (If it still is of course). Many thanks!

@Craigerson 5 лет назад

I need to play around with the most recent version Mark. Seems like there’s been a number of changes, and my video may be a bit dated.

@FITTEK--PerformanceTrainer 7 лет назад

Hi can anyone help please. I'm using Wp cache and have also added autoptimize. Can i use both or is one preferred to both? I've added autoptimize and my score seems to have gone down but cleared minify java script etc. any help would be greatly appreciated

@funnypet8953 6 лет назад

Reece Harris no you can't both together it can break your site

@Niallphillips 6 лет назад

If I optimise JavaScript my js with AO my whole site goes down, any idea why that would be?

@TravisJeffries 6 лет назад

Did you find a solution to this dilemma? Currently facing the exact same situation.

@Canadiancookingadventures 6 лет назад

same here so i disabled it :(

@robbedoes160 5 лет назад

Hi there! thanks a lot for this video. I am student in online marketing and i was wondering if anyone here has had a problem with Autoptimize disabling the Carousel on my homepage. (all images now stand under eachother instead of the carousel). I can simply fix it by disabling Autoptimize, but its a shame since it boosted my performance up from 31% to 73%! Help would be appreciated.

@Craigerson 5 лет назад

Awesome that your performance went up that much. Haven’t used the carousel feature for my images, so I’m afraid I can’t help you with that. Have you reached out to the developer? You should see a comment from him below.

@davidderyckere9126 4 года назад

tahnks for this awesome video but you need to fix the sensitivity of your microphone, hearing you swallow your spit isn't nice lol

@aryalatuihamallo1744 7 лет назад

so my autoptimze says my cache is 100% and it keeps blinking red, should i delete cache? will it break my site?

@Craigerson 7 лет назад

It won't break your site. If your cache is maxed out, it's time to purge it.

@waturfgurus1021 7 лет назад

hi brother i did what was in the video now my homepage looking like just very basic help plese

@erix43 6 лет назад

You fix that shit?

@JimKernix 5 лет назад

wtf - click on what css file?

@c.marvin4011 7 лет назад

I found 3 css files in my source, is that normal? if so which one do i use?

@Craigerson 7 лет назад

Look for the one that is referenced with Autoptimize. It's referenced around the 4:40 mark in the video.

@BluartStack 7 лет назад

I've ticked all the correct boxes and no CSS file shows up in view page source area. Is there something I'm missing?

@Craigerson 7 лет назад

Sounds like it Stuart. I'm assuming you are referring to the consolidated CSS file, and that you can't find it in your source. If you've ticked all the correct boxes, including the inline and defer CSS box, it should be there. Did you search for autoptimize in your source (and are you spelling it correctly)?

@19digital90 4 года назад

My site went from 49 to 71 I like it

@happynation7347 6 лет назад

My Autooptimize plugin do not have that option :O Why?

@Craigerson 6 лет назад

Don't have what option?

@davidwignall609 6 лет назад

You have "Hide advanced options" set - look at the top right of your screen. You need to select the show advanced options

@happynation7347 6 лет назад

Ty mate!

@peristiloperis7789 6 лет назад

You shouldn't expect great results by just pressing buttons. And by the way, as you can see in the video, Page Speed is not accurate. Use another tool, something like GTmetrix.

@Craigerson 6 лет назад

Not exactly sure what you mean by "just pressing buttons"? GTmetrix uses the same base code as PageSpeed Insights (the on-line tool used here). The GTmetrix algorithm & recommendations are slightly different because the PageSpeed Insights SDK used by GTmetrix is no longer updated by Google, so they did their own thing. Bottom line, you shouldn't rely on one service to check your performance, I would use both GTmetrix and PageSpeed Insights (or others).