質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

3回答

614閲覧

ワードプレスで、レンダリングをブロックする JavaScript を除去する方法

otasuk2

総合スコア10

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/01/23 09:47

前提・実現したいこと

質問させて頂きます。ページスピードインサイトで表題のような警告が出て、改善したいです。とにかく、ワードプレスで画像が多いサイト運営なのでスピードが遅く、また最近速度が遅いとgoogleからの評価が悪くなると聞いて、すごく不安です。どなたかアドバイス願います。

発生している問題・エラーメッセージ

function.php に該当のソースコードをいれると、解決すると聞き、入れたのですが、ワードプレスの管理画面の上のところにこのコードがバグったように表示され、まずいと思いそのコードを消して、元に戻してから保存すると、今度は更新がうまくできませんでしたとエラーが出て(ソースコード以外のところを消したりはしてません)、その後管理画面に入れないなどの不具合が発生。直前にバックアップとってたので再度バックアップの状態に戻し、今現在に至ります。とにかくスピードアップをしたいのです・・・

エラーメッセージ ```上記の通りです。またfunction.phpのどこに張り付けかわからないので、一番下に張り付けました。 ### 該当のソースコード if (!(is_admin() )) { function add_async_to_enqueue_script( $url ) { if ( FALSE === strpos( $url, '.js' ) ) return $url; //.js以外は対象外 if ( strpos( $url, 'jquery.min.js' ) ) return $url; //'jquery.min.js'は、asyc対象外 return "$url' async charset='UTF-8"; // async属性を付与 } add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 ); } ### 試したこと 上に記載してしまいました。 ### 補足情報(FW/ツールのバージョンなど) 初心者で恐る恐るコードをいじって、失敗しての繰り返しです・・・アドバイスをお願いします、

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2019/01/23 11:48

「SEO」にも関わる部分ですが、読込部分で、async属性やdefer属性の設定は試されましたか?
otasuk2

2019/01/23 11:56

早速のご回答ありがとうございます。 読み込み部分での設定が、わかりません。 今調べましたが、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" defer></script> <script src="jQuery/myScript.min.js" defer></script> こういうのですか? こういうのだとしても、どのシートのどの部分にこれをいれるのかがわからないのです。。。。
guest

回答3

0

質問にあるコード自体は
・管理画面では除外
・.js以外は対象外
・jquery.min.jsは、async対象外
という条件に該当しないスクリプトにはすべてasync属性を追加しなさいというものになっています。結構ものぐささん用のコードとなっています(笑)。

質問からレンダリングをブロック・・・という言葉がどうも理解されていないようですがどうでしょうか?

ざっくり説明すると質問に出てくる「async」はスクリプトは後から読み込んでねという意味で、「defer」は後から読み込むことにして一旦無視しましょ!という属性になります(本当にざっくりした説明です)

スクリプトの中にはこうした属性を指定しなくてもフッターに入れて読み込ませて動作するものもありますし、ヘッダーに入れてこれらの属性を付加いないと動作しないものもあり、属性を付加すると動作しないものもあります。

要するにそのスクリプトによる・・というところが大きいのです。特にブログパーツやブログランキング、広告コードなど外部へ接続して外部にあるスクリプトを動作するものについては1つ1つ確認しないといけません。

functions.phpへ追記した質問のコードを一旦やめて、ヘッダーに入れているものやブログパーツのようにこれを張り付ければ・・・となっているコードの

<script src="...">

へ直接async属性を追加して

<script async src="...">

のようにしてきちんと動作するのか?警告は出るかのテストをしてはどうでしょうか??

ちなみにレンダリングをブロックしている・・・を改善するのもサイト表示高速化の1つですが、外部のスクリプトを使う=外部の処理速度によるということになるので、それらの処理速度にもよってきますからなるべく使わないようにすること、とか、本当にそれが表示速度低下の原因になっているのか?など総合的に判断して妥協する部分は妥協するというのが必要かと思います。

画像を未圧縮や実際に表示する大きさよりも大きいままで表示するようにしているため転送量が多くなり、それが原因・・・なんてことが結構多いです(スマホで見たときなどはパケット量ばかり増えて大迷惑です)。

できるだけ分かりやすく回答したつもりですが分かりにくかったらすみません。お役に立てれば幸いです。

投稿2019/01/24 10:12

momosiri

総合スコア1509

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

otasuk2

2019/01/25 02:52

ご回答ありがとうございます!レンダリングをブロックする・・・のところは、サーチコンソールに出てきた文言なのです。訳が分からずそのまま転記したり、検索したりしてました。 アドバイスの件ですが、「functions php」の中に以下の記述がございました。 <script async type="text/javascript"> var cfmf_text = { title:'<?php _e('Please Select Image', 'tcd-w'); ?>', button:'<?php _e('Use this Image', 'tcd-w'); ?>' }; </script> ここにasyncを上記のように入れたのですが、これでよいのでしょうか?
momosiri

2019/01/25 08:21

上のコードはテーマが内部処理しているものですからあまり関係なさそうですけど、そのコードに該当するものがサーチコンソール上でレンダリングをブロックする・・・という項目の詳細にあるものなら効果はあるかも知れませんね。回答にかかせていただいたようにsrc=""で自身のサイト上でないものから疑った方が効果はあるかも知れません。
otasuk2

2019/01/28 07:28

ご回答ありがとうございます。また、返信が遅れてしまい、すみません。すみませんが以下に詳細を記しますので、お教え願いますか? ページスピードインサイトの表示は レンダリングを妨げるリソースの除外 3.03 s ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。詳細 https://mariko-jp.com/wp-content/themes/lotus_tcd039/style.css?ver=2.0.2 https://mariko-jp.com/wp-includes/css/desk/block-library/style.min.css?ver=5.0.3 などが挙げられるのですが、これらはfunctions phpの中にはないのです・・・ <script src=・・・・・>のような場所が、どこ探してみないのです。 大変お手数ではございますが、詳細を教えてください。 ちなみにワードプレスのサイトでTCDというテンプレートを使っております。
guest

0

WordPress をお使いで、PHPがあまりわかないとお見受けしましたので、プラグインを使われるのはどうでしょうか?

WordPress Plugins で、
「async css」や「async JavaScript」等のキーワードで検索すると

等のプラグインが見つかりますので、これらのプラグインを1点ずつ試してみて、一番効果のありそうなものを使われるのはどうでしょうか?

投稿2019/01/29 04:27

CHERRY

総合スコア25171

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

otasuk2

2019/01/29 06:16

Autoptimize なども試したのですが、速度が改善しなかったので、それ以外あまり試すと、キャンセルしたとしてもそのカス?のようなものが残り、結果重くなっていくかもとか聞いてまして、できれば自力で少しずつでも前に進めればと思い、質問させて頂きました。おっしゃるとおり、ほとんどわからないのですが、プログラムは勇気をもっていじってます・・・
guest

0

投稿2019/01/23 12:06

yoshinavi

総合スコア3523

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

otasuk2

2019/01/23 12:12

ありがとうございます。この中のどれをいれたらよいですか?
yoshinavi

2019/01/23 14:27

まずは「参考サイト2」の下の提示コードで様子を見てみると良いかと思います。
otasuk2

2019/01/23 14:35

ありがとうございます。本当に基本的な質問ですみません。この、参考サイト2のコードを張り付けるだけでよいのですか?また、それはどこに張り付けるのでしょうか? すみませんが教えてください。
yoshinavi

2019/01/23 14:43

「function.php」に記述してください。 <script type='text/javascript' async="async" src='***'></script> 上記のようにasync属性をjavascriptを実行するファイルに適用されるようになります。 「function.php」に記述しなくても、各ファイルに1つずつ記述しても良いですが、「function.php」に記述する事で、まとめて処理されるようになります。
otasuk2

2019/01/23 15:49

ありがとうございます! てことは、参考サイト2の function replace_script_tag ( $tag ) { return str_replace( "type='text/javascript'", 'async', $tag ); } add_filter( 'script_loader_tag', 'replace_script_tag' ); これをこのまま、function.phpに記述すればよいのですね!! 記述する場所とかはどこでも良いのですか?
yoshinavi

2019/01/24 08:22

どこでも良いです。バックアップを取ってから試してみてください。
otasuk2

2019/01/25 02:30

ありがとうございます。試してみましたが、デスクトップの際の表示が、TOPページのブログ「一覧の画像が表示されなくなったのと、速度が少し落ちてしまい、TCDのテンプレサイトだとよくないのかもしれません・・・親身にご説明くださり、ありがとうございます。もしも私にわかるものでかんたんなものがございましたらまたご指導ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問