レンダリングをブロックしている JavaScriptをフッターに移動させる

今回は「PageSpeed Insights」で指摘されていた「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」に対策する事にしました。

とは言っても既に前回の記事でレンダリングブロック(読み込みを邪魔している)CSSについては対策しておきました。
余計なCSSを1つにまとめてWordPressを高速化

という訳で今回はレンダリングブロックしているJavaScriptに対策をしておきますが、その前にちょっと基本的な部分を解説しておきます。

スポンサーリンク

レンダリングブロックしているJavaScript

そもそもレンダリングブロックしているJavaScriptってなんやねん!という方もいるかと思いますのでちょっとだけ説明しておきます。WordPressではプラグインを利用して簡単に色々な機能を装備する事ができます。

例えば「トップに戻るボタン」とか「ヘッダー画像をスライド表示させる」とか「SNSボタンを表示させる」とかプラグインで何でもできますよね。

これらの機能を実装するためにプラグインを有効化した時点でブログにJavaScriptや、jQuery、CSSファイルが追加されます。

特にjQueryと呼ばれているのがJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリで良く使われています。

簡単に言うとJavaScriptコードを簡単に記述できるのがjQueryで多くのプラグインでこのjQueryやJavaScriptが使われています。

さて、このjQueryを利用するにはjQuery本体が必要なんです。まあ、ゲームのソフトを利用するにはゲームの本体が必要という感じです。WordPressには元々jQuery本体が組み込まれていて、jQueryの記述を加えると自動的にjQuery本体が出現します。

ちょっと分かりにくいと思うので実際に見てみましょう。自分のブログを表示させて何も無いところで「右クリック」して「ページのソースを表示」をクリックします。

cssopt-2

すると自分のブログのソースを確認できます。

cssopt-3

ソースの中から「script type=’text/javascript’」という部分を探してみて下さい。「Ctrl」+「F」を押すと検索窓が出ますのでそれで探すと早いです。jQueryを利用している場合には次のような記述が見つかります。

<script type='text/javascript' src='http://dokidome.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://dokidome.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

バージョンが違う場合もあるかも知れませんが上記のような2つの記述があると思います。「jquery.js」と「jquery-migrate.min.js」という2つの記述です。これがjQuery本体で通常はソースの「head」部分に出力されます。

なんで2つも記述があるのか?というとjQuery本体のバージョンアップに伴って、以前のバージョンで作成されたプラグインとの互換性を保つため、jquery-migrate.min.jsが追加されています。そう、古いバージョンで作成されたプラグインも不具合なく作動させるため、2つの記述がある訳です。

さて、記事の冒頭でも書いたように「PageSpeed Insights」ではスクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScriptを排除しなさいと指摘されます。つまりブログの「head」部分にあるこのjQuery本体も読み込みの邪魔をしている訳です。

しかしながらこれを削除するとjQueryを利用しているプラグインが動きません。ゲームソフトはあるけどゲームの本体が無いという事になりますので、このjQuery本体を「head」部分ではなく邪魔にならない場所(フッター)で出力する事にすれば解決できるという訳です。

実はこのような「head」のJavaScriptをフッターに移動させるプラグインというのもあります。「Head Cleaner」とか「JavaScript to Footer」で簡単にできますが、仕組みが分からないものを利用するのはちょっと怖いですし、不具合が出た時に対応ができません。

という事で自分でできる事はプラグイン無しでやってみる事にしました。結構勉強になりました。

レンダリングブロックしているjQuery本体を移動させる

jQuery本体をフッターで出力するには幾つか方法があるのですが、functions.phpに記述を加えるのが一般的です。

今回はWordPressに元々入っているjQuery本体をフッターに移動する方法を書きますが、WordPressに入っているjQuery本体を利用せずにCDNを利用する方がほとんどだと思いますので、CDNについてちょっと説明しておきます。

CDNとは?そのメリット

CDNというのはコンテンツデリバリネットワークの略です。説明すると難しくなるので、サーバーの負担を軽くする物と思っていたらいいかも知れません。サイト内で使用する画像や動画、CSS、JavaScriptといった静的なファイルなどをCDNに置いて配信できる仕組みです。

つまり負荷のかかる物は自分のサーバーではなく、別のサーバーに設置して配信してもらう事で自分のサーバーの負荷を減らして高速なページ表示が可能になるわけです。アクセスが集中するようなサイトでは非常に有効という事です。

今回の記事で書きたいのはCSSとか画像とかではなく、jQuery本体の配信をCDNにやってもらおうというお話です。

上記でも書いたようにWordPressには元々jQuery本体が組み込まれていて、jQueryの記述を加えると自動的にjQuery本体が出現します。でもCDNを利用する事で自分の利用しているサーバーの負荷を減らしてjQuery本体を配信してもらう事ができます。

今回はWordPressに元々入っているjQuery本体を出力しないようにして代わりにCDNにやってもらうという作戦です、それもフッターでね。

CDNを利用するメリットとしては先ほども書いたようにサーバーの負担を減らす事ができるという事と、自サイトに置いてあるファイルを読み込むよりも通信速度が早い、それとキャッシュの効果を期待できるという事です。

GoogleのCDNを利用する

Googleさんの超ハイスペックなサーバーからjQuery本体を利用させてもらいます。まずはバージョンを確認しておきましょう。
Google Hosted Libraries

scroll-2

ここに2種類表示されています。

1.X系2.X系の違い
1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョン、
2.x 系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョン、という認識で良いのではないでしょうか。

制作環境に合ったバージョンをダウンロードして下さい。

という事なのですが、無難にIE8 以前もサポートする「1.x 系」の最新版を利用する事にしましょう。私が確認した時点で「1.x 系」の最新バージョンは「1.11.1」でしたのでこれを利用する事にします。

GoogleのCDNをWordPressで利用する

手順としてはWordPressに元々入っているjQuery本体を出力しないようにしてGoogleのCDNを新たに登録します。さらにレンダリングブロック(読み込みの邪魔)にならない場所(フッター)に出力する事にします。

それから作業の前に必ずバックアップはしておきましょう。functions.phpを編集しますが、記述ミスがあるとブログが真っ白になります。真っ白になったらFTP(ロリポップFTP)等でfuncitons.phpの記述を元に戻してもう一度ミスがないか確認して下さい。

「functions.php」を追加する場合には他の子テーマのように親テーマの記述をコピーするのではなく、白紙で作成しておきます。つまり、子テーマにファイル名だけ書いて保存すればOKです。

親テーマと同じ記述をするとブログが表示されない状態になります。まあ、記述をミスってもFTPからこのファイルを元に戻せばOKですので心配は無用です。

js-6

ここまでできたらWordPressに戻り、「外観」⇒「テーマの編集(エディタ)」と進み、先ほど作成した「functions.php」を開きます。

js-7

js-8

子テーマに初めてfunctions.phpを追加した方は最初と最後に次の記述をしておき、この中に全ての処理を書いていきます。

<?php

//ここに処理を記述していきます

?>

functions.phpに記述です。私は子テーマのfunctions.phpに記述しています。

if (!is_admin()) {
    function deregister_script(){  // 登録の解除
        wp_deregister_script('jquery');
    }
    function register_script(){  // CDNに変更して登録
        wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1', true );
    }
    function add_script() {  // 登録したjqueryを出力
        deregister_script();
        register_script();
        wp_enqueue_script('jquery');    
            }
    add_action('wp_enqueue_scripts', 'add_script');
}
  • wp_deregister_scriptで登録を解除
  • wp_register_scriptでCDNを登録し、フッターで出力するように設定
  • wp_enqueue_scriptで登録したCDNを装備する

という感じの3段階です。なぜ一度解除して登録しなおすかというと登録する時にwp_register_script( $handle, $src, $deps, $ver, $in_footer )という情報を記述できます。この最後の項目$in_footerを「true」にするとフッターで出力されます。

そのため、一度既存の登録を解除して再登録、その登録の段階でフッターで出力するように指定しなおした訳です。これでCDNのjQuery本体はフッターに移動するはずですが、もしこれでページのソースを確認して依然として「head」部分に出力されているのであれば原因はプラグインかも知れません。

後はこれで「プラグインが正常に機能しているか」という部分と「ページの表示スピード」を確認しておきましょう。

私の場合はプラグインが邪魔してjQuery本体がフッターに移動しませんでした。私が利用していたプラグイン「Scroll To Top」というプラグインが原因だったと思われます。このプラグインを停止するとjQuery本体はきちんとフッターに移動しました。

という訳で私の場合は「Scroll To Top」の機能(ページの先頭に戻るボタン)はプラグインは利用せずに自作してフッターに追加する事にしました。

自作した「Scroll To Top」の作り方は別記事で解説します。
ページの先頭に戻るボタンを自作してみた

以上がレンダリングをブロックしている「jQuery」の対策です。

「head」に追加されているJavaScriptファイルをフッターに移動する

ここからは説明が結構難しくて私も苦戦しております。色々なプラグインを追加していたりすると「head」部分でJavaScriptやjQueryのファイルが追加されている場合があります。フッターで出力されていれば問題はないです。

「jQuery」に関しては先程フッターに移動しましたので、次は「JavaScript」ですが、結構難易度高いかもしれません。

作戦としてはこのような方針で行う事にしました。一応私のやり方です。

  • まずは「head」内に追加されたJavaScriptファイルを自分のファイルにコピー
  • 「head」内に追加されたJavaScriptファイルを出力しないようにする
  • 自分のファイルにコピーしたJavaScriptファイルをフッターで出力

プラグイン等で追加されたJavaScriptを自分のファイルにコピーするので準備をしておきました。

JavaScriptをコピーする準備

ロリポップで説明しておくと「ロリポップのユーザー専用ページ」⇒「webツール」⇒「自分のドメイン」⇒「wp-content」⇒「themes」⇒「child(子テーマ)」に「js」という「フォルダ」を作成しました。ファイルではなくフォルダね。

js-1

js-2

それで今度は作成した「js」というフォルダの中にjsの「ファイル」を追加します。

js-3

ファイル名は自分の分かりやすい名前で「〇〇.js」としておけば問題ないでしょう。

js-4

それでこの「〇〇.js」のファイルにこれからコピーするJavaScript(jQuery)等を記述いくことになります。とりあえず準備は完了。

「head」内で出力されているjsファイルを探す

ページのソースを見て「script type=’text/javascript’」という記述部分を探してみます。「Ctrl」+「F」を押すと検索窓が出ますのでそれで探すと早いです。あくまでプラグインで追加されたものを探すのが目的です。

プラグインで追加された物かどうかはURL部分で判断できると思います。

あまりいい例が無かったのでプラグインで追加された物ではないですが「twentytwelve-navigation.js」を例にやってみる事にしました。

これはTwentyTwelveでスマートフォン表示したときに表示される「メニューボタン機能」のJavaScript。実際はこの「twentytwelve-navigation.js」は元々フッターで出力されるようになっているのでこのままでもいいのですが、「head」部分で出力されていたと仮定してフッターで出力する実験台になってもらいます。

TwentyTwelveの場合ページのソースをみるとフッターでこのような記述があります。

<script type='text/javascript' src='http://domain550.com/wp-content/themes/twentytwelve/js/navigation.js?ver=20140711'></script>

これはフッターで出力されているので、特に変更は必要ではありませんが、一応サンプルとして、ヘッダーで出力されていたと仮定して説明していきます。

この「href=’http://~」という部分をクリックするとそのJavaScriptの中身を見る事ができます。この中身を先ほど作成したファイルにコピペして「保存」。これで準備はOKです。ファイル名は「navi.js」としておきました。

js-opt-2

ここから先ほど追加したfunctions.phpに記述をしていきますが、functions.phpでは同じ記述を2回書くとブログが真っ白状態になります。そのため、先ほどjQuery本体を移動したコードと一緒に記述しておきます。必要な分だけ追加する形です。

真っ白になったらFTP(ロリポップFTP)等でfunctions.phpを元に戻してください。

if (!is_admin()) {
    function deregister_script(){  // 登録解除する項目
         wp_deregister_script('jquery');
         wp_deregister_script('twentytwelve-navigation');  // ここに解除するjsを追加
    }
    function register_script(){  // 登録する項目
        wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1', true );
    }
        wp_register_script( 'navi', get_stylesheet_directory_uri() . '/js/navi.js', array( 'jquery' ), '', true);  // 作成したnavi.jsを登録
    }
    function add_script() {  // 装備(出力)する項目
        deregister_script();
        register_script();
        wp_enqueue_script('jquery');
        wp_enqueue_script('navi');  // 作成したnavi.jsを出力
        
            }
    add_action('wp_enqueue_scripts', 'add_script');
}
  • wp_deregister_script(‘twentytwelve-navigation’);で登録解除
  • wp_register_scriptで名前を適当に付けて登録(今回はnavi)
  • wp_enqueue_script(‘登録した名前’);で出力

wp_register_script( $handle, $src, $deps, $ver, $in_footer )という情報を記述します。最後の項目をtrueにしてフッターで呼び出しです。

  • $handle : 登録する名前何にする?
  • $src : スクリプトファイルの場所はどこ?
  • $deps : スクリプトより前に読み込む必要がある物を記述。単体で動くならarray()。jQueryを使うならarray(jquery)
  • $ver : バージョン(特に必要ないなら「’’」のように空欄でOK。
  • $in_footer : フッターに入れるならtrue。head部分で出力するならfalse。

なのでハンドル名は自分で名づけて変更してもらえばOKです。それからパスURL($src)ですが、今回は「子テーマ」に追加したフォルダ「js」を作りました、その中に「〇〇.js」というファイルを作りましたね。「get_stylesheet_directory_uri()」で子テーマのURLを出力できますので、get_stylesheet_directory_uri() . ‘/js/〇〇.js’となります。以上が基本的な流れです。

えっとここで問題が2点あります。

1つ目は「$handle」の部分。登録を解除する時にwp_deregister_script(‘ハンドル名’);という書き方をします。つまりハンドル名が分からないと登録を解除する事ができません。

2つ目は「$deps」の部分。元々のスクリプトが単体で動くのか、それともjQuery本体が必要なのかを知っておく必要があります。

この2点については長くなったので別記事で紹介する事にします。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

レンダリングをブロックしている JavaScriptをフッターに移動させる”に30件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    乃風様

    問題のある部分を張り替えれば回復します。ただ、問題の部分を特定するのが難しいのでは?という事です。なので自分が理解できる範囲で再度functons.phpを作成すれば次に不具合があっても自分で対応できると思います。

  2. 乃風

    しげぞう博士様

    functons.phpは作り直した方が良いのですね。そうでしたかぁー・・・。不具合を起こしているその部分だけを張り替えれば、それで回復するのかと思っていました。気が遠くなってしまいました。困ったなぁー・・・。

    サーバーからの次の連絡を待ってみます。お忙しいところ、ありがとうございました。

  3. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。子テーマのfunctions.phpを削除、もしくはファイルはそのまま残して中身を削除すれば解決するのではないでしょうか?functons.phpは作り直した方が良いと思います。必要なもの、自分で理解できる範囲のものだけを1つ1つ確かめながら作成したら良いと思います。

    functions.phpは1つのミスで今回のように真っ白になります。その場合はFTPから子テーマのfunctons.phpの削除で解決します。

  4. 乃風

    ~しげぞう博士様~

    おはようございます。

    今、ロリポップから連絡がありました。今回エラーが発生している「functions.php」の修正方法は、私が用意したデーターだから、その方法はご案内できないと言われました。本当に申し訳なさそうにそう言っていました。

    この部分をどのように修正したらいいのでしょうか? その箇所については、このコメントのすぐ次に送信しますね。どうぞよろしくお願いいたします。

  5. 乃風

    ~しげぞう博士様~

    いつもお世話になっております。
    ホルダーchildの「functions.php」というファイルの131行目前後にエラーが出ているそうです。この部分をどのように修正したらいいか・・・など、もう一度問い合わせたところです。

    今回の回答で、エラー発生日時を聞かれたのですが、ここでしげぞう博士とやり取りした時間の記録が大きな助けになりました。

    まだ時間はかかりそうです。こんな感じで、しばらくやり取りしてみます。

  6. 乃風

    ~しげぞう博士様~

    おはようございます。

    わかりました。ではそのようにやってみます。
    ありがとうございました。

         

  7. しげぞう 投稿作成者

    乃風様

    私の意見はあくまで推測ですので、何度も書いている通りサーバーへの問い合わせで解決されて下さい。一旦phpのバージョンを戻すのは念のためです。どうなるかわからないので一旦戻してファイルを削除しなくても問題が解決するかがわかればphpのバージョンに対応してなかったのが原因だったというのがわかります。

    そのままファイル削除でも良いですが、どのような影響があるかは私にはわかりません、だからサーバーへの問い合わせで確認をして下さい。

  8. 乃風

    ~しげぞう博士様~

    今一よくわからず、でも・・・、「やっぱり知りたい!」と思い、また来ました。

    「DB Cache Reloaded Fix」というプラグインは、既に消除してしまったのですが、このプラグインに関係しているのが、「dp.php」というファイルとのことですが、現在このファイルは、サーバー内に残っています。

    現在、私のサイトはphp7.1に引き上げた状態のままです。

    でも、上記2つ(プラグインとそれに関連するファイル)は、php7.1に対応していないのであれば、php7.1の今のこの状態で、今残っているその「dp.php」というファイルを、普通に切り離す(消除するという意味)ことはできないのでしょうか?

    今のこの段階で、それをしたら、全体が崩れるってことなのでしょうか? 

    一旦、phpを最初の5.4に戻してから、その2つを無効化してみて、影響ないなら、5.4のその時に消除するのですか? それとも、7.1に引き上げてから、その2つを消除した方がいいのでしょうか?

    少しずつですが、何がわからないのかが、わかってきました。しげぞう博士、ありがとう!

  9. 乃風

    ~しげぞう博士様~

    え? 今のこの段階で、7.1が使えそうだと、もうわかるんですか? 「えーーーー!」って思ってしまいました。驚きもいいところです。

    昨日、サーバーから回答を得た後、しげぞう博士のアドバイスに従い、私が検証したその結果を、しげぞう博士やサーバーに、間違いないようにフィードバックするだけで、私は昨日は精一杯でした。

    しかも、サーバーに詳細を伝えようと、書いたそのメールが、送信ボタンをクリックしたら、ぜ~んぶ消えちゃったんですよ、昨日。メールを書く時間が長すぎたから・・・みたいです。

    もう疲れてしまい、昨日はそのメールを送れず、今朝、サーバーに、昨日の検証結果を、もう一度事細かく書き、メールを送ったところです。

    今回、問題のchildはホルダーだから、その中のどのファイルに問題があるのか、それも聞いてみました。調べてもらえるかどうかわかりませんが、でも、今回問題になったプラグインは、やむなく消除したことも、サーバーに伝えました。どんなことでもいいから、教えてほしいと、そうも伝えましたよ、サーバーに。

    7.1は動きがすごく早いし、なんか、かっこいいんでよ、しげぞう博士。だから、可能なら使いたいと、まずはじめにその事をサーバーに伝えたら、「了解しました!」みたいな感じで、私に寄こした文面以上に、私のために動いてくれている感じがしたんです。勘です。直感。

    これまで使ってきた5.4には、「ありがとう!」という気持ちでいます。

    でもね、しげぞう博士、今、この時に、最新の7.1に乗れなかったから、先々、もっと面倒なことになるって、気づいたんです。だって、もう5.4には、書面を通さなければ、戻れないからです。

    問題のプラグインが7.1に対応していないのですね。そういうことだったのですね。無効化して影響ないのであれば、こちらのファイルは削除しても良いとのことですが、そうやって検証していくのですね。少しずつわかってきました。サーバーからの回答を待って、そのプラグインをもう一度搭載して、そのように検証してみます。ありがとうございました。

  10. しげぞう 投稿作成者

    乃風様

    おそらく一旦phpのバージョンを戻す必要があるかもしれませんので、一度戻し、それからdp.phpと/wp-content/plugins/db-cache-reloaded-fix/の「db-cache-reloaded-fix」の2つを無効化する必要があると思います。このプラグインがphp7に対応してませんので、このプラグインのファイルと関連する「dp.php」を無効化する必要があると思います。

    無効化して影響ないのであればこちらのファイルは削除しても良いと思いますが、関連ファイルなどもあるのでそれは問い合わせで確認してみると良いかも。

    「db-cache-reloaded-fix」と「dp.php」の2つを無効化もしくは削除して他に原因がなければphp7も使えそうな気はします。あくまで推測なのでサーバーへの問い合わせで解決してみて下さい。

  11. 乃風

    ~しげぞう博士様~

    いつもお世話になっております。

    あれから例のキャッシュを消除したのですが、結果は変わりませんでした。

    その消除のあと、childだけを元に戻し、dp.phpを無効化のままにすると、ID とパスワード画面は表示されますが、それらを入力して、「ログイン」キーをクリックしても、表示されるのは、真っ白い画面だけでした。

    逆に、childだけを無効化し、dp.phpを元に戻すと、全く表示されず、「HTTP500内部サーバーエラー」と表示されるだけでした。

    「.htaccess」というファイルに同じものが2つ入っているという例の事も含めて、もう一度、サーバーに問い合わせてみますね。ありがとうございました。

  12. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。どのような感じになっているのかこちらからは確認ができませんので状況は把握できません。なのでとりあえずサーバーへの問い合わせを継続して下さい。ただ、向こうも対応外の部分だと思いますので最終的には「自分で解決してね!」ってスタンスになるかと思います。

  13. 乃風

    しげぞう博士様

    なるほど、そういうことですね。

    言葉足らずで申し訳ありません、しげぞう博士。サーバーに一番最初に問い合わせた後に、サーバー内で、さんざあれこれと私が一人でいじったんですね。functions.phpをバックアップして、一旦、消除してみて、それで表示されるかどうか・・・といった確認の作業もその1つです。

    その後のチャットでわかったのですが、それをやってしまうと、サーバー上で確認を取る時に、回答への影響が出るということを知ったんです。問い合わせた後は、サーバーなど、一切そのままにしてほしいんだそうです。そのことにふと気づき、その確認を取ったら、案の定でそのように言われました。やっぱりかぁー・・・って思いましたけどね。

    7.1から5.6に引き下げても、7.1に引き上げても、結果は大して変わらない。なら、7.1に引き上げて、その状態でもう一度、サーバー上を確認してもらおうと思ったんです。この事もサーバーのスタッフさんには伝えましたけどね。チャットのお姉さんではなく・・・という意味です。

    最後の最後のそのチャットで、私のサイトが7.1に耐えられるかどうかを聞いてみたのですが、サイトによるそうです。それと、他にもなんか言ってましたが、忘れちゃいました。なので、7.1に変更できる可能はあると、そんな感じに言われました。それとしげぞう博士が言っていた同じような事も、そのチャットで言われました。例えば、ブラグインとかファイルなんかが関係していることもある・・・とかなんとか、そんな感じです。

    自分のウェブサイトが表示されないって、なんか寂しいですね。昨晩、心細くもなりました。こりゃ、一大事だと思って、それで、よせばいいものを、サーバーに出たり入ったりしちゃったわけです、問い合わせた後に・・・です。

    状況としてはこんな感じです。どうでしょうか。

  14. しげぞう 投稿作成者

    乃風様

    phpのバージョン上げてエラーがでるなら一度phpのバージョン元に戻し、子テーマを無効にして別のテーマにしてエラーが解消されるか確認するのが先だとおもいます。でないと原因の特定ができません。問題を特定しないことには対処もできません。

    テーマ変更しても問題が解決しない場合にはphpのバージョン上げた時にエラーを出すプラグインがある可能性もありますので、その辺も順番に検証しながら問題を特定するべきと思います。基本的にサーバーの対応の「対応の範囲外」の部分が多いと思いますので、問題解決自体は管理者の乃風様がする部分が多いと思われます。

  15. 乃風

    ~しげぞう博士様~

    今、丁度、私もしげぞう博士にメールをしようと思っていたところです。コメント、今拝見させていただきました。本当にありがとうございます。もう感謝の気持ちでいっぱいです。しげぞう博士には、この気持ち、わかんないだろうなぁー・・・。ま、いいや。

    それでですね、しげぞう博士。
    あれから、ふと気づいたことがあり、急いでまたロリポップのチャットへ行って来たんです。

    私が今回希望しているのは、php7.1なんです。5.6や5.4じゃない。そのことにも気づいたんです。だから、7.1に引き上げました。

    その結果、ワードプレスのIDやパスワードを入力する画面が、全く表示されなくなりました。それどころか、私のウェブサイト自体も全く表示されなくなりました。この状態で、もう一度、ロリポップにお問い合わせのメールを送りました。

    返信が来るまで、長くて48時間、このままの状態で待ってみます。

    ロリポップは名前もキャンディーみたいで可愛いですが、チャットで対応が早いし、適格だし、安心しました。ここでチャットレディーになれる人って、すごいですね。色んな事も教えてもらいました。なぜロリポップが人気なのか、なんかわかる気がしました。あの会社は、従業員、何人いるんでしょうかね・・・。

    それと、phpは書式(メール)で申請すれば、元の5.4に戻してくれるそうです。事情が事情だからじゃないでしょうか。

    じぃ~~~~~と、このまま待ってみます。ご回答があれば、またここに来ます。いつもありがとうございます。

  16. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。childに問題があるって事ですね、最近編集したphpフィルとかに問題があるのかもしれませんが、管理者以外は見えない部分なのでなんとも言えません。

    【__child】に変更している間、子テーマは使えなくなりますので、まずは別のテーマを選択してみて問題が解決するのか確認。

    問題が解決するならやはり問題は子テーマのどこかにあるって事になります。なのでphpのバージョンとかが問題ではなくて子テーマのどこかのファイルが問題です。その部分を特定するのは管理者以外は難しいですね。

    原因が特定できない場合には再度1から子テーマを作り治すか、問題のありそうな子テーマファイルだけ削除して子テーマのファイル名を元に戻すかのどちらかでしょうね。

  17. 乃風

    ~しげぞう博士様~

    今さっき、ロリポップから回答が来ました。WordPressのテーマ【child】の影響で、
    今回の問題が発生しているそうです。

    このような場合、テーマ【child】が保存されているフォルダを無効化すると、
    ログイン画面を正常に表示することが可能かと思いますって、言われました。

    でも、

    ・テーマを無効にすると、ログイン画面は正常に表示されるようになりますが、
     サイトが正常に表示されなくなります。

    ・すぐにサイトを表示したい場合は、WordPressにログインいただき、
     テーマを【child】以外のものに設定いただけますと、
     サイトを表示することが可能でございます。

    って言われました。無効化は、【child】のフォルダー名を、【__child】に変更すると、
    いいそうです。でも、その後、どうすればいいんでしょうか? 

    ただ、ロリポップは、WordPressの仕様について把握していないから、ログイン画面を正常に表示していただけた後の問題は、ご自分で解決していただくことになると言われました。申し訳ありませんって、そうも言っていました。

    【child】を無効化した後、どこでどのような設定をして、つないでいけばいいのでしょうか?

    まず、試しにそのフォルダー名をそのように変えてみましょうか? その作業を行うにあたり、何か事前の注意があったら、教えてください。よろしくお願いいたします。

  18. 乃風

    ~しげぞう博士様~

    昨日、サーバーに問い合わせておきました。48時間以内に返事するとのことで、まだ返信がありません。

    困ったなぁー・・・と思っていたら、急に思い出して、それで今さっきロリポップのチャットへ行ってきました。事情を説明したところ、先方で調べてくれました。サーバー上のデーターを確認する必要があるそうです。チャット窓口では対応できないので、対応窓口のURLを教えてもらいました。これからそこに行ってきます。

    PHP7.1は、すんんんんんんごい、早いんです、しげぞう博士。問題をクリアーできるなら、5.6じゃなくて、7.1を使いたいと思いました。この事も先方に話してみます。

    IDとパスワードは表示されているのに中に入れない・・・という意味ですが・・・。IDとパスワードを入力して、「ログイン」キーをクリックしても、画面が一瞬消えて、その後、IDとパスワードが空欄になって表示されるだけなんです。「エラー: 予期しない出力により Cookies がブロックされました。」と表示されます。何度やっても同じです。

  19. しげぞう 投稿作成者

    乃風様

    IDとパスワードは表示されているのに中に入れないというのはどういう事でしょうか?サーバーへの問い合わせはしているのでしょうか?表示されたならfuctions.phpが原因だったと思われますが、中に入れない状態っていうのがわかりません、またプラグイン関連ですが、把握できない状況であればない方が良いです。今回のようにトラブルの元になります。

  20. 乃風

    ~しげぞう博士様~

    とりあえず、PHPを7.1から5.6に戻しました。そしてfunctions.phpも元に戻しました。そしたら、WPの管理画面に入るための、IDとパスワードが表示されました。でも、中にはまだ入れない状態です。私のウェブサイトは表示されるようになりました。

    次はどうしたらいいのでしょうか?

  21. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。画面真っ白の症状の原因で多いのはfunctons.php。なので、ロリポップFTPで子テーマのfunctons.phpへ行き、内容をすべてコピーしてバックアップしておきます。

    バックアップできたら子テーマのfunctons.phpを一旦削除で表示されるか確認して下さい。データベースのパスワード関連の部分はあまり触らない方が良いような気がします。ここはサーバーへの問い合わせが良いと思います。

    また.htaccessの重複する部分は削除してもOKだと思いますが、同じ記述が必要な部分ってのもありますので、ここもサーバーへ問い合わせが必要かと思います。

    この辺のカスタマイズはかなりデリケートな部分で小さなミスでも大変な事になったりしますので、前回も書いたようにバックアップはとっておいてしっかり理解できる範囲で施策をするべきと思います。私もサーバー側の人間ではないので正直対処も難しいです。

  22. 乃風

    ~しげぞう博士様~

    ロリポップで下記の操作を行ってみました。

    『以下の手順でデータベースのパスワード再設定を行い、パスワード形式を「old_password形式」から「native_password形式」にご変更ください。』という記述があったので。

     1.ユーザー専用ページの〔WEBツール〕→〔データベース〕メニューにアクセスします
     2.利用中のデータベースの〔パスワード確認〕をクリックし、現在のパスワードをメモしておきます
     3.〔パスワードを再設定する〕をクリックします
     4.2で確認したパスワードを入力し、〔パスワードを再設定する〕をクリックします
     5.確認画面が表示されたら〔OK〕をクリックします

    すると、少し変化がありました。自分のウェブサイトに入るための、WP画面で、下記のように表示されるようになりました。

    「エラー: 予期しない出力により Cookies がブロックされました。ヘルプが必要な場合はこちらのドキュメンテーションを読むか、サポートフォーラムをご利用ください。」

    その「こちらのドキュメンテーション」をクリックして、そっちに飛んでみたのですが、「ブラウザの Cookie を有効化する必要がある」ということです。

    その下の表示されていたインターネットエキスプローラーをクリックしたものの、「 Cookie を有効化する」記述が見当たりませんでした。

    現在、PHPは5.6のままです。依然として、自分のウェブサイトの管理画面に入れない状態でいます。

    どうぞよろしくお願いいたします。

  23. 乃風

    しげぞう博士様

    最後の「htaccessというファイルでブラウザのキャッシュに対応。ブラウザのキャッシュに対応する⇒https://affiliate150.com/browser-cache」の設定が終わりました。

    上記の「htaccessというファイル」を開いて、今回気づいたのですが、同じファイルが2つ入っていました。これは1つ消除した方がいいのでしょうか? そのファイルについては長いので、次のコメントで送りしますね。

  24. 乃風

    ~しげぞう博士様~

    早速、高速化をやってみました。ロリポップへ行って、5.4から7.1へと変更しました。一旦、自分のウェブサイトに戻り、操作を繰り返したところ、スピードが一気に上がったことがわかり、本当に驚きました。大喜びもいいところです。ありがとうございました。

    ところが・・・です、しげぞう博士・・・・。

    その後、次の手順として、プラグインのチェックをしました。

    ・Autoptimizeは、現在使っていないので、飛ばしました。

    ・Unveil Lazy Loadは搭載しておりますが、「特に設定は必要なし」ということでしたので、このままにしました。

    ・EWWW Image Optimizerですが・・・。問題はここから起こりました。「画像の圧縮。すでに有効化されているならOK。」とのことですが、圧縮されているかどうか、どのように確認すればいいのでしょうか? 

    この事がよくわからないまま、このプラグインの「編集」というキーをクリックしたら、その途端に全てが表示されなくなりました。

    なので、一旦、ロリポップに戻って、高速化したものを元に戻そうと思いました。「7.1から5.4」には戻せず、致し方なく「7.1から5.6」に変更しました。

    その後、自分のウェブサイトの管理画面に入ろうと思って、パスワードを入れて、「ログイン」キーをクリックしたところ、次に表示されたものは、ただ真っ白い画面だけでした。

    反映されるまで時間がかかるのかな・・・と思い、しばらくしてから、何度かその「ログイン」を試みましたが、やはり結果は同じでした。

    現在、自分のウェブサイトの管理画面には入れない状態です。でも、私のウェブサイトは普通に表示されています。

    その後、ロリポップであっちこっちとさまよったのですが、ここでいい加減な操作をしたことで、更に面倒なことになったらヤダと思い、こうしてまたここに戻ってきました。

    状況としては、今、こんな感じです。まず、自分のウェブサイトに入るには、どこでどのような操作をすればいいのでしょうか? どうぞよろしくお願いいたします。困ったなぁー・・・という気持ちでいっぱいです。

    最後の部分の「ブラウザのキャッシュに対応する⇒https://affiliate150.com/browser-cache」を、これから読むところです。

  25. 乃風

    ~しげぞう博士様~

    高速化に関しては、自分の理解できる範囲での施策が良いのですね。何かあった時に対処できないと、結構困るのですね。私はてっきり、表示は何でもかんでも早ければいいのかと思っておりました。うふふふ・・・。おかしくておかしくて笑いが止まりません。笑いすぎて、お腹が痛いんですぅぅぅぅぅ!

    すごい内容なので、ちょっと驚いてしまいました。とにかく1つ1つやってみます。本当にありがとうございました!

  26. しげぞう 投稿作成者

    乃風様

    高速化に関しては自分の理解できる範囲での施策が良いと思います。何かあったときに対処できないと結構困りますので。バックアップも必須です。

    まず、PHPのバージョンを確認してPHPのバージョンを上げます。ロリポップのユーザー専用ページから「サーバーの管理」・「設定」と進み「PHP」設定⇒7.1を選択して「変更」でOKです。バージョンの変更で動かなくなるプラグインなどもある場合がありますのでこれは確認が必要です。

    以下プラグイン。

    ・Autoptimize

    複数の読み込みファイルをまとめる(有効化して設定が必要)
    Autoptimizeの設定はHTMLオプション(HTMLコードを最適化)とCSSオプション(CSS コードを最適化)だけチェック。

    ・Unveil Lazy Load

    画像の遅延読み込みをして負担を減らす(特に設定は必要なし)

    ・EWWW Image Optimizer
    画像の圧縮。すでに有効化されているならOK。

    それから.htaccessというファイルでブラウザのキャッシュに対応。

    ブラウザのキャッシュに対応する
    ⇒https://affiliate150.com/browser-cache

    とりあえず以上で結構上がるかなと思います。

  27. 乃風

    ~しげぞう博士様~

    いつもお世話になっております。

    ちょっと気になり、本当に久しぶりに「PageSpeed Insights」で、今調べてみたところ、
    パソコンが「Needs Work」で「73/100」でした。モバイルの方が「Poor」で「61/100」でした。

    表示をもっとスピードアップさせるには、何をどうしたらいいのでしょうか?

    どうぞよろしくお願いいたします。

  28. 乃風

    いつもお世話になっております。

    別のもので代用するのですね。わかりました。じゃ、この記事は飛ばして、参考のその記事の方へ行くことにしますね。この記事の最初と最後のfunctions.phpでの操作も、何度やってもうまくいかず、URLが全部白紙になってしまって困っていました。

    アイコンの件では、本当に色々とありがとうございました。あれから間もなく、ファビコンが初期化されてしまい、まったく表示されなくなってしまったんです。しげぞうさんの記事内外で、色々と調べてみて分かったのですが、ファイアーフォックスというブラウザーが原因だと分かったんです。こんなことってあるんですねぇ~・・・。そのブラウザーを消去して、しばらく様子を見たのですが、ようやく元に戻りました。

    今後もよろしくお願いします。

  29. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。WordPressの場合は「jquery.js」と「jquery-migrate.min.js」が標準で装備されていて、これが「head」部分で出力されます。なので、これらをフッターで出力するようにすれば表示速度の改善ができます。やり方としては中身をコピーする必要はありませんし、後程この2つの「jquery.js」と「jquery-migrate.min.js」は別の物で代用します。functions.phpで全て解決できますので、この記事は飛ばしてこちらの記事を参考にしてください。
    http://dokidome.com/pege-speed/1174/

  30. 乃風

    いつもお世話になっております。

    {「head」内で出力されているjsファイルを探す}というしげぞうさんの記事の中で、{ページのソースを見て「script type=’text/javascript’」という記述部分を探してみます。}と書いてありましたが、これは、「jquery.js」と「jquery-migrate.min.js」の2つのことでしょうか?

    それと、、「jquery.js」と「jquery-migrate.min.js」という部分の「’http://~」という部分をクリックして、その中身を各1つずつ合計2個を、1つのファイル(ロリポップのscroll-top.js) にコピペして「保存」すればいい・・・ということなのでしょうか?