Försöker du eliminera renderingsblockerande JavaScript och CSS i WordPress?
Om du testar din website på Google PageSpeed insights, kommer du troligen att se ett förslag om att eliminera renderingsblockerande skript och CSS. Det finns dock inga detaljer om hur du gör det på din WordPress site.
I den här artikeln visar vi dig hur du enkelt fixar renderingsblockerande JavaScript och CSS i WordPress för att förbättra din Google PageSpeed-poäng.
Vad är renderingsblockerande JavaScript och CSS?
Renderingsblockerande JavaScript och CSS är filer som hindrar en website från att displayed en page innan dessa filer har hämtats.
Varje WordPress-webbplats har ett theme och tillägg som add to JavaScript och CSS-filer till front-enden av din website.
Dessa skript kan öka din sites sidladdningstid och de kan också blockera renderingen av sidan.
En användares webbläsare måste ladda dessa skript och CSS innan den hämtar resten av HTML på sidan. Detta innebär att användare med en långsammare anslutning måste vänta några millisekunder längre för att se sidan.
Dessa skript och stylesheets kallas renderingsblockerande JavaScript och CSS.
WordPress-webbplatsägare som försöker uppnå en Google PageSpeed-poäng på 100 måste fixa det här problemet för att uppnå den perfekta poängen.
Vad är Googles PageSpeed Score?
Google PageSpeed Insights är ett verktyg för hastighetstest av webbplatser som skapats av Google för att hjälpa webbplatsägare att optimera och testa sina webbplatser. Verktyget testar din website mot Googles riktlinjer för hastighet och ger förslag på hur du kan förbättra laddningstiden för din page.
Det visar dig en poäng baserat på antalet revisioner som din site passerar. De flesta websites får någonstans mellan 50-70. Vissa website-ägare känner sig dock tvungna att uppnå 100 (den högsta poäng en page kan få).
Behöver du verkligen den perfekta ”100” Google PageSpeed-poängen?
Syftet med Googles PageSpeed-insikter är att ge dig riktlinjer för att förbättra hastigheten och prestandan på din website. Du är ej obligatorisk att följa dessa regler strikt.
Kom ihåg att hastighet bara är en av de många metrics för optimering av webbplatsens sökmotorsoptimering (SEO) som hjälper Google att avgöra hur din site ska rankas. Hastigheten är så viktig eftersom den förbättrar användarnas upplevelse på din site.
En bättre upplevelse för användarna är obligatorisk, och inte bara hastighet. You måste också erbjuda användbar information, ett bättre användargränssnitt och ett engagerande content med text, images och videoklipp.
Your goal should be to create a fast website that offers a great user experience.
Vi rekommenderar att du använder Googles PageSpeed-regler som förslag. Om du kan implementera dem enkelt utan att förstöra upplevelsen för användarna är det bra. Annars bör du försöka göra så mycket du kan, och sedan inte oroa dig för resten.
Med detta sagt, låt oss ta en titt på vad du kan göra för att fixa renderingsblockerande JavaScript och CSS i WordPress.
Vi kommer att täcka två metoder som kommer att eliminera renderande blockerande resurser i WordPress. Du kan välja den som fungerar bäst för din website:
Metod 1: Fixa Render Blocking Scripts och CSS med WP Rocket
För den här metoden kommer vi att använda WP Rocket plugin. Det är det bästa WordPress caching och optimering plugin på marknaden som tillåter dig att snabbt förbättra din website prestanda utan några tekniska färdigheter eller en komplicerad installation.
Först måste du installera och aktivera WP Rocket plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
WP Rocket fungerar direkt från boxen och aktiverar caching med optimala Settings för din website. Du kan läsa mer om det i vår kompletta guide om hur du installerar och konfigurerar WP Rocket på rätt sätt i WordPress.
Som standard aktiveras inte alternativen för JavaScript- och CSS-optimering. Dessa optimeringar kan potentiellt påverka din websites appearance eller vissa funktioner, vilket är anledningen till att pluginet tillåter dig att aktivera dessa inställningar valfritt.
För att göra det måste du besöka Settings ” WP Rocket page och sedan byta till tabben ’File Optimization’.
Härifrån rullar du till CSS Files section och kontrollerar boxarna bredvid ”Minify CSS”, ”Combine CSS Files” och ”Optimize CSS Delivery”.
För inställningen ”Optimize CSS Delivery” rekommenderar WP Rocket att du väljer metoden ”Remove Unused CSS”.
Förutom att erbjuda bästa möjliga prestanda kan det bidra till att minska sidstorleken och HTTP requests.
Note: WP Rocket cache plugin kommer att försöka minifiera alla dina CSS-filer, kombinera dem och bara hämta den CSS som behövs för den synliga delen av din website.
Detta kan påverka din websites appearance, så you need to thoroughly test your website on multiple devices and screen sizes.
Därefter måste du rulla till JavaScript Files section. Härifrån kan du kontrollera alla alternativ för maximal prestandaförbättring.
Du kan minifiera och kombinera JavaScript-filer gillar du gjorde för CSS.
Du kan också hindra WordPress från att hämta filen jQuery Migrate. Det är ett skript som WordPress hämtar för att ge kompatibilitet för tillägg och themes som använder gamla versioner av jQuery.
De flesta webbplatser behöver inte den här filen, men du vill ändå kontrollera din website för att se till att temat eller tilläggen inte påverkas om du tar bort den.
Därefter rullar du ner lite längre och kontrollerar boxarna bredvid alternativen ”Load JavaScript Defered” och ”Safe Mode for jQuery”.
Dessa alternativ fördröjer att icke-väsentliga JavaScript hämtas, och jQuery safe mode allow you to load jQuery for themes that may use it inline. Du kan låta det här alternativet vara avmarkerat om du är säker på att ditt theme inte använder inline jQuery någonstans.
Glöm inte att klicka på knappen ”Save Changes” för att spara dina inställningar.
Efter det kanske du också vill cleara cachen i WP Rocket innan du testar din website igen med Google PageSpeed Insights.
På vår testsite kunde vi uppnå 100% poäng på stationära enheter, och render-blocking issue löstes i både mobila och stationära poäng.
Metod 2: Fixa renderingsblockerande skript och CSS med Autoptimize
För den här metoden kommer vi att använda ett separat plugin som är speciellt framtaget för att förbättra leveransen av din websites CSS- och JS-filer. Även om detta plugin får jobbet gjort, har det inte de andra kraftfulla funktionerna som WP Rocket har.
Det första du behöver göra är att installera och aktivera Autoptimize, ett gratis plugin som snabbar upp prestandan på din website. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Efter aktivering måste du besöka Settings ” Autoptimize page för att konfigurera plugin-inställningarna.
Först måste du kontrollera boxen bredvid ”Optimize JavaScript Code” under JavaScript Options block. Se till att alternativet ”Aggregate JS-files” är avmarkerat.
Därefter rullar du ner till CSS Options box och kontrollerar alternativet ”Optimize CSS Code”.
Se till att alternativet ”Aggregate CSS-files” är avmarkerat.
Du kan nu klicka på knappen ”Save Changes and Empty Cache” för att lagra dina inställningar.
Gå vidare och testa din website med PageSpeed Insights tool. På vår demo site kunde vi fixa render-blocking issue med dessa grundläggande inställningar.
Om det fortfarande finns skript som blockerar rendering kan du gå tillbaka till pluginets inställningar page och reviewer inställningarna under både JavaScript och CSS alternativ.
You kan till exempel allow the plugin to include inline JS and remove scripts that are excluded by default, like seal.js or jquery.js. Sedan klickar du bara på knappen ”Save changes and Empty Cache” för att spara dina ändringar och tömma plugins cache.
När du är klar kan du kontrollera din website igen med verktyget PageSpeed Insights.
Hur fungerar Autoptimize?
Autoptimize samlar ihop all JavaScript och CSS som står i kö. Därefter skapar den minifierade CSS- och JavaScript -filer och serverar cachelagrade kopior till din website som asynkron eller uppskjuten.
This allows you to fix the render-blocking scripts and styles issue. Tänk dock vänligen på att det också kan påverka prestandan eller appearance på din website.
Vad ska man göra om JavaScript och CSS som blockerar rendering fortfarande finns kvar?
Beroende på hur tilläggen och ditt WordPress tema använder JavaScript och CSS kan det vara svårt att helt fixa alla renderande blockerande JavaScript- och CSS-problem.
Även om ovanstående tools kan hjälpa, kan dina tillägg behöva vissa skript på en annan prioritetsnivå för att fungera korrekt. I så fall kan lösningarna ovan leda till att sådana tillägg inte fungerar som de ska, eller att de beter sig oväntat.
Istället för att försöka eliminera problem med blockering av rendering helt rekommenderar vi att du använder alternativa metoder för att snabba upp din website. Till exempel kan du använda en CDN-tjänst för att servera dina statiska JavaScript- och CSS-filer och minska laddningstiden.
För mer information kan du läsa vår ultimata guide för att öka WordPress hastighet och prestanda.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du fixar renderings-blockerande JavaScript och CSS i WordPress. Du kanske också vill se vår artikel om hur WPBeginner ökar sidans laddningshastighet med 6 tips och vår jämförelse av de bäst hanter ade webbhotellen för WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
I use autoptimize and also wp-rocket. It helped me tremendously. However, it is necessary to be very careful with some changes. One setting and the entire website can immediately stop working correctly.
Amina says
Hello there, your site and tips have really been helpful. Thank you wpbeginner!
My AMP says customize JavaScript script not allowed. I have tried using and followed your instructions for autoptimize but it didn’t solve the problem. The amp shows the error is in line 12:10 and 18:2.
WPBeginner Support says
Glad our article was helpful, for AMP specific questions like that we would recommend reaching out to AMP’s support and they should be able to assist.
Administratör
Fahad Khan says
Hi,
Is there any other way to get this thing done except wp rocket and autopitmize?
WPBeginner Support says
There are likely other tools but these are the current ones we recommend for beginners.
Administratör
Rizz says
For W3 Total cache users
Dont add jquery Script (/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp) It will work otherwise your site will not load properly.
Css will not through any error
If Revolution silder will post an error after it –> go to revslider global settings and turn on Insert scripts in footer.
WPBeginner Support says
Thanks for sharing some recommendations you’ve found through editing your site.
Administratör
Muhammad Farhan says
I don’t remember when ever i find myself struck in a difficult position, you are always there to help me when no body is around i don’t know of any best site of wordpress guide than wpbeginners, thank you so much
WPBeginner Support says
Glad our guides continue to be helpful to you
Administratör
Lu says
Great info as always!
I’m with Siteground so have SG Optimizer on my site. I’ve gone through the settings as much as I understand, but still getting the Eliminate render-blocking resources.
Can I use Autoptimize as well, or will it clash with SG? Thanks
WPBeginner Support says
You should be able to use Autoptimize with SG Optimizer but if you have any concerns if you reach out to the plugin’s support they should be able to let you know if there are currently any conflicts between the two
Administratör
subin says
how can i Fix Render-Blocking JavaScript and CSS in WordPress without a plugin.
WPBeginner Support says
You would need to manually go through the code and set the CSS and JS files to load after the content is added to the page.
Administratör
Ben says
Thank you for this! Autoptimize just helped me get a better page score!
Ben
WPBeginner Support says
You’re welcome, glad our recommendation could help
Administratör
MoneyManch says
Hi WP Beginner Team,
Thanks a lot for sharing such a useful article. Autoptimize is an awesome plugin.
I was looking for a plugin to boost the speed of my wp blog. After reading this post, I installed and activated ”Autoptimize” on my blog. And to my surprise it increased the speed of my blog from 39 to 61 for mobile and 76 to 95 for desktop checked on PageSpeed Insights.
Thank once again for guiding new bloggers like me.
WPBeginner Support says
Glad our recommendation could be helpful
Administratör
sachin says
How to identify the script URL and CSS URL?
WPBeginner Support says
If you use Google Page insights then there is a dropdown arrow which will show you the URLs that are causing the problem with a learn more link for how to find the url without their tool.
Administratör
Raksh says
The new google page speed insights doesn’t showing the link what should I do.
WPBeginner Support says
There should be a dropdown arrow and when you click that it should show the links to the files
Administratör
Monika says
I am not sure how many times this website has helped me!!! Thank you SOOO MUCH!
Mr Jatt Poonam says
how can i Optimize images, which i had been add in my website in the past?
Love Goel says
Thanks dude, Really appreciate your tutorial. I used Autoptimize Plugin and worked for me really well.
Deeksha says
When I use all these plugins suddenly my website go slow down & it shows inappropriate content…
What Can I Do ?? Please Help
WPBeginner Support says
Hi Deeksha,
Both plugins are quite safe. If you are seeing inappropriate content on your website, then please make sure that your website is not hacked. You can disable both plugins at any time.
Administratör
sumit kumar gupta says
Sir When we install Autoptimize plugin in our WordPress blog then our blog is not opening it says this page is not working. What should I do Sir?
Sir I would like to know when we add javascript link to eliminate render blocking code following by your steps then any affect is occuring on my blog ranking. please help
Tim Helmer says
Sumit:
The plugin is not working so you need to rename the plugin folder to turn it off. You need ftp or a file manager plugin. Can you access the dashboard via your wp-login.php location? Like domain/wp-login.php
Henry Ramirez says
I use wordpress.com, any plugin to do the same thing here on wordpress.com since this plugins are no supported here? Thanks
ben says
Autoptimize works for me. it nicely condenses my scripts, bit I do still see the render-blocking script warning
Ismail says
Hello,
Currently I am using WP Rocket, is it possible to use Autoptimize plugin together? Thanks for sharing this valuable information.
Gaurav Areng Chakraverti says
Hi there. I’ve tried the W3 method and as soon as I turn on Minify (using Disk) I get this:
Fatal error: Unknown: Cannot use output buffering in output buffering display handlers in Unknown on line 0
How does one fix that?
Great tutorial though overall! Thanks for this.
Gaurav Areng Chakraverti says
EDIT: This problem goes away when I deactivate Autoptimize, however, so does the rest of the site. Only the bare bones remain with no actual content.
David says
The settings for Autoptimize has changed. The only JavaScript Options available is Optimise JavaScript Code? The rest of the options in your screenshot is not available, at least not on the one I have. Last time I tried W3 Total Cache, nobody could access the site. I am still looking for a way of solving the load time of the page, which for some reason stand at anything from 10 – 17 seconds.
Chris says
David, try Gmetrix web speed tool. On the results list there is a waterfall chart showing how the site loads and what the largest files and scripts slowing the page load.
I find the slowest scripts are googles cdn scripts like google fonts! The very same company insisting, forcing users to their demands have to scripts taking an age to load. You couldn’t make it up.
Divij says
Can you use minify on w3 total cache simultaneously with cloudflare? We are using minify in cloudflare and left it disabled in w3cache. But we still keep getting the message- Eliminate render-blocking JavaScript and CSS in above-the-fold content.
Thanks!
Rana Jayant says
The plugin 23 cache UI has been changed and it doesn’t have any option where we can put our .js URL for optmization.
I am talking about ”Now head over to your WordPress admin area and go to Performance » Minify page.”
MATTY says
Great tutorial. However is W3 Total cache safe to use now due to an issue earlier in the year? I’ve stopped using it since but it was the best plugin out there.
Mohamed says
Thanks for sharing this article but you said (please keep in mind that it can also affect the performance or appearance of your website)
Please clarify if this effect will be good or bad for the website google ranking?
WPBeginner Support says
Hi Mohamed,
A faster website is certainly good for SEO rankings. However, when fixing render blocking issues you may end up changing appearance of your theme or get even a lower page speed score than before.
Administratör
Angie says
Ha, funny.
I was looking for help here.
then I did the google speed tool for YOUR post here.
Google result
mobile Poor
54 / 100
desktop
Needs Work
66 / 100
Do you have any clue at all?
WPBeginner Support says
Hi Angie,
Often people obsess about getting a perfect 100 with Google PageSpeed which is nearly impossible for most functional websites. If you have any sort of social media buttons, retargeting scripts, or ads, then your site will never get a perfect score.
Chances are that you’ll be far from it. But that’s why you have other tools like Pingdom to verify your speed results.
For example: WPBeginner.com homepage loads in 508 ms (which is insanely fast) –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot1.png
But has a Google Pagespeed score of 74 on desktop (which those who don’t know any better will consider it to be bad). –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot2.png
If you look through all popular websites like ESPN, NYTimes, TechCrunch, etc you’d notice that none of them have a perfect score .. actually far from it.
Here’s an example of ESPN score – 62 on desktop –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot3.png
Here’s an example of NYTimes – 68 on desktop –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot4.png
Here’s an example of TechCrunch – 49 on desktop –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot5.png
Our advice is to focus on making your website as fast as possible by following our guide on how to speed up WordPress and use tools like Pingdom as a reference point for what your users will see when they load your website.
Administratör
Kat says
This has actually made my render blocking worse. How do we remove it?
Chris Daly says
Every single time I use Autoptimize or W# Total Cache my site explodes. The mobile web view gets trashed into an html menu list and parts of the site stop working. I have tried each of these on 4 different sites and dropped both of them.
Chris says
Chris I suggest you read and adhere to the W3 Cache warning on the minify section. Minify html and css only and again be wary not all css should be mini-fied due to the reasons stated in the post above.
I use W3 Cache selectively, tinyjpg for image optimisation, and set OpCache in the .htaccess file. Templaters love to use Sliders…but they bloat the page with images screen width at 1920pxs. Ditch the sliders, smaller images (with a modal box if greater detail required) and icons instead.
Mary Cahalane says
I just installed and it broke my homepage. All the images are gone.
Any idea how to fix this?
Bruno Ayres Martinez says
Hey guys! I’ve loved the W3 tutorial. There’s just one information missing: The Embed Location for the JS File Management.
Is it ”Embed before Body”? Or ”embed in Head”? Or ”Embed after Body”?
Dev thapa says
I am new to Blogging, however, I have been following Wpbeginner.com for quite sometime and whatever they are writing I found them very useful and don’t hesitate to say that, today if my blog page is Live…30% credit goes to Wpbeginner.com team and Sayed Balkhi for creating such a wonderful and useful webpage.
I am thankful to Wpbeginner.
Keep it up, all the best.
WPBeginner Support says
Hi Dev,
Thanks you for the kind words. We are glad you find WPBeginner helpful
Administratör
steve says
I just put this site in google page-speed test and only got 66 for mobile and 77 for desktop!?
Digember says
Plugins increase loads on our website which makes our site slow. At wpbeginner, I haven’t seen a single method of speed optimization without the use of plugins. Teach us something useful, these methods don’t work for everyone.
Patricia Lynn says
Great detailed information on using Autoptimize plugin dealing with Java-scrip, CSS and plugin w3 Total Cashe to fix render blocking while enhancing website speed performance
Sumit yadav says
Thanks a lot for this information. Earlier my page loading load time speed was 63 and after installing Autoptimize plugin it increases to 81.
Yoseph says
I am not very sure what happen, I installed autoptimize in one of my site, then the page size increase from 2.8mb to 4mb
Shaye says
YIKES! This made the performance of my site drop drastically! Help!
Erez Elias says
Thanks for sharing.
Overall the speed of the site increased by very little. But the issue with render blocking is not resolved.
Comment if you have other suggestions.
thanks.
almbrouk idris says
I trying to reach 100% but impossible
John Bolhano says
I am trying to get 70+ but still nowhere near.
Mayank says
Haha, great, google sucks but after all i am at 80+
David says
I got 3 new websites down to almost 500 ms, faster than 96% of sites on Pingdom. Similar for other speed testers.
Thought great, till Google brought me back down to earth with their page insights. Mainly low score for mobile, but thought these modern themes are meant to be responsive? Obviously not!
I squeezed every image down to next to nothing before uploading as well, so it is frustrating.
Also, none of the apps work for me with Browser Cache, etc.
I’d say the same three problems I have – once the basics are done – are:
1. Render blocking Javascript.
2. Browser caching.
3. Images wrong size for mobile.
Muthukrishnan says
I have used all the plugins..But still the page speed is bad.
Michael says
I’m a bit confused. I just ran a Google speed test on wpbeginner and if didn’t score well at at all. What am I missing?
Yasser says
My Website is an RTL one after i saved the settings of the ”Autoptimize” plugin my website turn into LTR !
Manohar Rao says
Both Autoptimize and W3 Total cache plugins have damaged my website. These plugins works with certain themes only. One has to be very careful to use these two plugins.
Toby Forage says
When I installed Autoptimize, as suggested in this article, it completely screwed up my website. Maybe I set it up wrong, but after removing it entirely, I reached a Google PageSpeed score of 92 for desktop. Mobile is at 67, so I’m working on improving that, but won’t be using Autoptimize again, that’s for sure!
Nik says
Thanks. It works for my blog.
Fued says
Hi WP beginner,
Very helpful article!
Thank you!
Just a random question?
Can I set it back minified mode from manual to auto and delete the minified files without harm? And what do you recommend: manual or auto?
Cheers
Mayank says
Just do it auto
Nirmal Kumar says
Both these methods did not work. Is there any other better way to do this?
ibraheem Warriach says
Hi i Liked article butt em not getting option to add scripts in W3 Total cache plugin kindly let me know how to get that?
MASI says
Thank you very much for your great article, it’s really helped me.
Just i have an small problem, i’m confused now!
I added all .js and .css manually on W3TC, but still one .css has problem on google page checker:
Consider Fixing:
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
26952.default.include.c9d602.css is available currently on .css list, but i see this error. How can i fix this problem?
Christian says
I don’t see the option to ”Add a stylesheet”, any ideas why?