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

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

ただいまの
回答率

87.60%

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

受付中

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,577

score 10

前提・実現したいこと

質問させて頂きます。ページスピードインサイトで表題のような警告が出て、改善したいです。とにかく、ワードプレスで画像が多いサイト運営なのでスピードが遅く、また最近速度が遅いと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/ツールのバージョンなど)

初心者で恐る恐るコードをいじって、失敗しての繰り返しです・・・アドバイスをお願いします、

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yoshinavi

    2019/01/23 20:48

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

    キャンセル

  • otasuk2

    2019/01/23 20: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>
    こういうのですか?
    こういうのだとしても、どのシートのどの部分にこれをいれるのかがわからないのです。。。。

    キャンセル

回答 3

+2

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

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

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

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

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

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

<script src="...">


へ直接async属性を追加して

<script async src="...">


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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/25 11: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を上記のように入れたのですが、これでよいのでしょうか?

    キャンセル

  • 2019/01/25 17:21

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

    キャンセル

  • 2019/01/28 16: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というテンプレートを使っております。

    キャンセル

  • 2019/01/29 01:24

    スクリプトではなくCSSの読み込みですね。
    https://firstlayout.net/load-css-asynchronously-with-loadcss/
    が一番参考になると思いますがテーマ内の編集が必要ですので知識がなければあきらめてください

    キャンセル

0

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/24 00: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に記述すればよいのですね!!

    記述する場所とかはどこでも良いのですか?

    キャンセル

  • 2019/01/24 17:22

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

    キャンセル

  • 2019/01/25 11:30

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

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/29 15:16

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

    キャンセル

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

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る