WordPressでレンダリングをブロックするJavaScriptやCSSを排除しようとしていますか？
Google PageSpeed insightsでサイトをテストすると、レンダリングをブロックするスクリプトやCSSを削除するよう提案されることが多い。しかし、それはあなたのWordPressサイトでそれを行う方法についての詳細を提供していません.
この投稿では、Google PageSpeedのスコアを向上させるために、WordPressでレンダリングをブロックするJavaScriptとCSSを簡単に修正する方法を紹介します。
レンダーブロックJavaScriptとCSSとは？
レンダーブロックJavaScriptとCSSは、これらのファイルを読み込む前にサイトがウェブページを表示しないようにするファイルです。
WordPressサイトには必ずテーマとプラグインがあり、JavaScriptや CSSファイルをサイトのフロントエンドに追加します。
これらのスクリプトはサイトのページ読み込み時間を長くし、ページのレンダリングをブロックすることもあります。
ユーザーのブラウザーは、ページの残りのHTMLを読み込む前に、これらのスクリプトとCSSを読み込む必要があります。つまり、接続速度の遅いユーザーは、ページを表示するのに数ミリ秒多く待たされることになります。
これらのスクリプトやスタイルシートは、レンダーブロックJavaScriptやCSSと呼ばれる。
Google PageSpeedスコア100を目指すWordPressサイトオーナーは、この問題を解決して満点を目指す必要がある。
Google PageSpeed Scoreとは？
Google PageSpeed Insightsは、ウェブサイトの所有者が自分のウェブサイトを最適化し、テストするためにGoogleによって作成されたWebサイトのスピードテストツールです。このツールは、速度のためのGoogleのガイドラインに対してあなたのサイトをテストし、あなたのページのロード時間を改善するための提案を提供しています.
これは、あなたのサイトが通過した監査の数に基づいてスコアを表示します。ほとんどのサイトでは50～70の間です。しかし、中には100（ページが獲得できる最高スコア）を達成しなければならないと考えるサイトオーナーもいる。
Google PageSpeed Scoreの完璧な “100 “は本当に必要か？
Google PageSpeed insightsの目的は、サイトのスピードとパフォーマンスを向上させるためのガイドラインを提供することです。あなたは厳密にこれらのルールに従う必要はありません.
スピードは、Googleがあなたのサイトのランク付けを決定するのに役立つ数多くのサイト検索エンジン最適化（SEO）指標の一つに過ぎないことを覚えておいてください。サイトのユーザー体験を向上させるため、スピードはとても重要です。
より良いユーザー・エクスペリエンスに必須なのは、スピードだけではありません。有益な情報、より優れたユーザーインターフェース、テキストや画像、動画を使った魅力的なコンテンツを提供することも必要です。
あなたのゴールは、素晴らしいユーザー体験を提供する高速サイトを作ることであるべきだ。
Google PageSpeedのルールを提案として利用することをお勧めします。ユーザーエクスペリエンスを損なうことなく簡単に実装できるのであれば、それは素晴らしいことだ。そうでなければ、できる限りのことをやってみて、あとは気にしないことだ。
とはいえ、WordPressでレンダーブロックを起こすJavaScriptとCSSを修正するためにできることを見てみましょう。
WordPressのレンダリング・ブロッキング・リソースを排除する2つの方法を取り上げます。あなたのサイトに最適な方法をお選びください：
方法1：WP RocketでレンダリングブロックスクリプトとCSSを修正する
この方法では、WP Rocketプラグインを使用します。WP Rocketプラグインは、技術的なスキルや複雑なセットアップを必要とせず、素早くサイトのパフォーマンスを向上させることができる、市場で最高のWordPressキャッシュおよび最適化プラグインです。
まず、WP Rocketプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
WP Rocketはすぐに動作し、サイトに最適な設定でキャッシュを有効にします。さらに詳しくは、WordPressにWP Rocketを正しくインストールしてセットアップする方法についての完全ガイドをご覧ください。
初期設定では、JavaScriptとCSSの最適化オプションはオンになっていません。これらの最適化はサイトの外観や一部の機能に影響を与える可能性があるため、プラグインではこれらの設定をオプションで有効化することができます。
これを行うには、設定 ” WP Rocketページにアクセスし、’ファイル最適化’タブに切り替える必要があります。
ここから、CSS Filesセクションまでスクロールし、’Minify CSS’、’Combine CSS Files’、’Optimize CSS Delivery’にチェックを入れる。
CSS配信の最適化」設定について、WP Rocketは「未使用のCSSを削除する」方法を選択することを推奨します。
最高のパフォーマンスを提供するだけでなく、ページサイズやHTTPリクエストの削減にも役立つ。
注意:WP Rocketキャッシュプラグインは、CSSファイルをすべて最小化して結合し、サイトの表示部分に必要なCSSだけをロードしようとします。
これはサイトの外観に影響を与える可能性があるため、複数の端末や画面サイズでサイトを徹底的にテストする必要があります。
次に、JavaScript Filesセクションまでスクロールする必要があります。ここから、パフォーマンスを最大限に向上させるためのオプションをすべてチェックすることができます。
CSSでやったように、JavaScriptファイルを最小化して結合することができる。
WordPressがjQueryMigrateファイルを読み込まないようにすることもできます。これは、古いバージョンのjQueryを使用しているプラグインやテーマの互換性を提供するためにWordPressが読み込むスクリプトです。
ほとんどのサイトではこのファイルは必要ありませんが、このファイルを削除してもテーマやプラグインに影響がないことを確認するために、サイトをチェックすることをお勧めします。
次に、もう少し下にスクロールして、「Load JavaScript Defered」と「Safe Mode for jQuery」オプションの横にあるボックスにチェックを入れる。
jQueryセーフモードでは、インラインでjQueryを使用する可能性のあるテーマに対してjQueryの読み込みを許可します。テーマがインラインでjQueryを使用していないことが確実な場合は、このオプションをオフにしたままにしておくことができます。
変更を保存」ボタンをクリックして、設定を保存することを忘れないでください。
その後、Google PageSpeed Insightsであなたのサイトを再度テストする前に、WP Rocketのキャッシュをクリアすることもできます。
テストサイトでは、デスクトップ端末で100％のスコアを達成し、レンダーブロックの問題はモバイルとデスクトップの両方のスコアで解決されました。
方法2：自動最適化でスクリプトとCSSのレンダーブロックを修正する
この方法では、サイトのCSSとJSファイルの配信を改善するために特別に作られた区切りのプラグインを使用します。このプラグインは仕事はこなしますが、WP Rocketのような強力な機能はありません。
まず最初に行う必要があるのは、サイトのパフォーマンスを高速化する無料のプラグイン、Autoptimizeをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後、Settings ” Autoptimizeページにアクセスしてプラグイン設定を行う必要があります。
まず、JavaScriptオプションブロックの「JavaScriptコードを最適化する」にチェックを入れます。Aggregate JS-files’オプションのチェックが外れていることを確認してください。
次に、CSSオプションボックスまでスクロールダウンし、「CSSコードを最適化する」設定にチェックを入れます。
Aggregate CSS-files’オプションのチェックが外れていることを確認してください。
Save Changes and Empty Cache（変更を保存してキャッシュを空にする）」ボタンをクリックして、設定を保存することができます。
PageSpeed Insightsツールであなたのサイトをテストしてください。私たちのデモサイトでは、我々はこれらの基本的な設定でレンダリングブロックの問題を修正することができました.
レンダリングをブロックするスクリプトがまだある場合は、プラグインの設定ページに戻って、JavaScriptとCSSの両方のオプションの設定を見直すことができます。
例えば、プラグインにインラインJSを含めることを許可し、seal.jsやjquery.jsのように初期設定で除外されているスクリプトを削除することができます。その後、「変更を保存してキャッシュを空にする」ボタンをクリックするだけで、変更が保存され、プラグインのキャッシュが空になります。
完了したら、先に進み、PageSpeed Insightsツールでもう一度サイトをチェックする.
Autoptimizeはどのように機能するのか？
Autoptimizeは、キューに入れられたすべてのJavaScriptとCSSを集約します。その後、最小化された CSS と JavaScriptファイルを作成し、キャッシュされたコピーを非同期または遅延としてサイトに提供します。
これにより、レンダリングをブロックするスクリプトやスタイルの問題を修正できます。ただし、サイトのパフォーマンスや外観に影響を与える可能性があることに留意してください。
レンダリングをブロックするJavaScriptとCSSが存在する場合の対処法
プラグインやWordPressテーマのJavaScriptやCSSの使用方法によっては、レンダリングをブロックするJavaScriptやCSSの問題をすべて完全に修正するのは難しい場合があります。
上記のツールは役に立ちますが、プラグインが正しく動作するためには、優先度の異なるスクリプトが必要な場合があります。そのような場合、上記の解決策はそのようなプラグインの機能を壊してしまったり、予期せぬ動作をする可能性があります。
レンダーブロックの問題を完全に排除しようとするのではなく、サイトを高速化するための別のアプローチを行うことをお勧めします。例えば、CDNサービスを使って静的なJavaScriptやCSSファイルを提供し、ロード時間を短縮することができます。
詳しくは、WordPressのスピードとパフォーマンスを向上させる究極のガイドをご覧ください。
この投稿が、WordPressでレンダリングをブロックするJavaScriptとCSSを修正する方法を学ぶのにお役に立てば幸いです。また、WPBeginnerが6つのヒントでページ読み込み速度を向上させる方法の投稿や、最高のマネージド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.
Jiří Vaněk
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
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
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.
管理者
Fahad Khan
Hi,
Is there any other way to get this thing done except wp rocket and autopitmize?
WPBeginner Support
There are likely other tools but these are the current ones we recommend for beginners.
管理者
Rizz
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
Thanks for sharing some recommendations you’ve found through editing your site.
管理者
Muhammad Farhan
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
Glad our guides continue to be helpful to you
管理者
Lu
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
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
管理者
subin
how can i Fix Render-Blocking JavaScript and CSS in WordPress without a plugin.
WPBeginner Support
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.
管理者
Ben
Thank you for this! Autoptimize just helped me get a better page score!
Ben
WPBeginner Support
You’re welcome, glad our recommendation could help
管理者
MoneyManch
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
Glad our recommendation could be helpful
管理者
sachin
How to identify the script URL and CSS URL?
WPBeginner Support
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.
管理者
Raksh
The new google page speed insights doesn’t showing the link what should I do.
WPBeginner Support
There should be a dropdown arrow and when you click that it should show the links to the files
管理者
Monika
I am not sure how many times this website has helped me!!! Thank you SOOO MUCH!
Mr Jatt Poonam
how can i Optimize images, which i had been add in my website in the past?
Love Goel
Thanks dude, Really appreciate your tutorial. I used Autoptimize Plugin and worked for me really well.
Deeksha
When I use all these plugins suddenly my website go slow down & it shows inappropriate content…
What Can I Do ?? Please Help
WPBeginner Support
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.
管理者
sumit kumar gupta
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
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
I use wordpress.com, any plugin to do the same thing here on wordpress.com since this plugins are no supported here? Thanks
ben
Autoptimize works for me. it nicely condenses my scripts, bit I do still see the render-blocking script warning
Ismail
Hello,
Currently I am using WP Rocket, is it possible to use Autoptimize plugin together? Thanks for sharing this valuable information.
Gaurav Areng Chakraverti
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
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
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
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
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
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
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
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
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.
管理者
Angie
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
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.
管理者
Kat
This has actually made my render blocking worse. How do we remove it?
Chris Daly
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
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
I just installed and it broke my homepage. All the images are gone.
Any idea how to fix this?
Bruno Ayres Martinez
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
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
Hi Dev,
Thanks you for the kind words. We are glad you find WPBeginner helpful
管理者
steve
I just put this site in google page-speed test and only got 66 for mobile and 77 for desktop!?
Digember
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
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
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
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
YIKES! This made the performance of my site drop drastically! Help!
Erez Elias
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
I trying to reach 100% but impossible
John Bolhano
I am trying to get 70+ but still nowhere near.
Mayank
Haha, great, google sucks but after all i am at 80+
David
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
I have used all the plugins..But still the page speed is bad.
Michael
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
My Website is an RTL one after i saved the settings of the “Autoptimize” plugin my website turn into LTR !
Manohar Rao
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
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
Thanks. It works for my blog.
Fued
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
Just do it auto
Nirmal Kumar
Both these methods did not work. Is there any other better way to do this?
ibraheem Warriach
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
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
I don’t see the option to “Add a stylesheet”, any ideas why?