英国住み。日本との時差8時間。地球は回っている。

ワードプレスのプラグイン!表示速度アップで「サイトの状況」改善!!

あなたーも、わたしーも、歌ーはうまいーがPC音痴

CSSってなんだー!
Javascriptってなんだー!
プログラムの Ba Ka Ya Ro—!!

はあ、すっきりした。

怒りを荒れ狂う海原にぶつけてみました。

すっきりしたところで朗報です!

今回は
プログラムについての知識が皆無でも、
Google様から受け取ったありがたいお言葉;

  • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  • ブラウザのキャッシュを活用する
  • 圧縮を有効にする
  • 注)これらはつまり、「ページの表示速度をあげろ」と言っているんだということを、何度も何度も繰り返し読んで気が付きました。実のところ詳細説明を読んでも、何をすべきなのか全く分かりませんでした。ヽ( ̄ー ̄ )ノ

    に、プログラムを全くいじることなく
    ワードプレスのプラグインだけ
    で対処する方法をお届けします。

    私の場合、この方法でページの表示速度が上がり
    「サイトの状況」が★1つから★3つまで改善できましたよ!
    (もうコレでイイの…)

    スポンサードリンク

    ワードプレスのインストールと有効化の方法&注意点

    重要1:ここで紹介するプラグインは全て以下の方法でインストール/有効化できます。


    ワードプレスのダッシュボードから

    【プラグイン】➡【新規追加】➡
    【検索ボックスにプラグインの名前を入力して検索】➡
    【インストール】➡【有効化】

    重要2:
    お使いのWPテーマ、既に使用中のプラグインとの兼ね合いなどで、
    うまく動作しない場合があります。
    私の場合はグローバルメニューが壊れたりしました。

    その場合は有効化したプラグインを停止すれば元に戻ります。
    全ての変更は自己責任で行ってください。

    WPで使用中の画像、これから使う画像を圧縮するプラグイン『EWWW Image Optimizer』

    ワードプレスで現在使用中、そしてこれからアップロードする画像を圧縮してくれます。
    特に画像をたくさん使用しているサイトはこれだけでも読み込み速度が上がります。

    設定方法

    1.上記のインストール方法に従って有効化してください。

    2.ダッシュボードの【設定】に『EWWW Image Optimizer』があることを確認して下さい。

    3.『EWWW Image Optimizer』をクリック

    4.【設定(setting)】をクリックして【Basic Setting】のタブを開き、【Remove metadata】 のところにチェックを入れます。
    (投稿した写真の個人情報を消去してくれます)

    EEE plugin

    5.同じ画面の下の方にある【Save Change(変更を保存)】ボタンをクリックして終了です。

    プラグインの使い方

    1.ダッシュボードのサイドバーに

    【メディア】➡【Bulk Optimize】
    【外観】➡【Optimize】

    が追加されていることを確認して下さい。

    2.それぞれ【Start Optimize(最適化開始)】ボタンをクリックして終了です。

    (このプラグインの特徴)

  • 一度圧縮したら次回からはスキップしてくれるので圧縮しすぎない
  • 画像を投稿するたびに自動で圧縮してくれる
  • CSS、JavaScriptをプラグインで最適化!『Head Cleaner』

    依然としてCSSやJavaScriptの実態はつかめぬまま、
    果てしなくネット検索をしているうちに、
    この超便利なプラグインに遭遇できました。

    その名も『Head Cleaner』
    私の頭の中もクリーンにしてもらえるといいのですが、
    そちらはもうすこしテクノロジーの発達を待つ必要がありそうです。

    このプラグインはJSファイルやCSSファイルなどの外部ファイルを
    圧縮・生成・結合して整理整頓してくれる役割をします。


    といってもファイルを実際にいじるわけではなく、
    仮想ファイルを使って、
    さもそうなっているかのように」みせかけてくれるのだそうです。

    もちろんあなたが何かを書き換える必要はありません
    プラグインをインストールして設定項目にチェックをいれるだけです。
    これこそが我々の求めていたソリューションではないでしょうか!!

    設定方法

    1.上記の方法に従って『Head Cleaner』をインストールし有効化してください。

    2.ダッシュボードの【設定】に『Head Cleaner』が追加されていることを確認して下さい。

    3.『Head Cleaner』をクリックして設定画面に行きます。(写真をクリックするとはっきり見えます)

    head cleaner 1

    緑は推奨で、赤は不具合が出やすい項目です。
    コツは、一個ずつ入れていくということです。
    一気にやるとどれに不具合が出ているのかわからなくなります。
    不具合が出たらそのチェックをはずします。

    赤でチェックが入っていない項目は
    私の場合不具合が出た、という意味です。
    JavaScript系のプラグインを入れると
    私のサイトでは画面に不具合がでるようです。

    表示速度をキャッシュデータで向上させる『Quick Cache ➡ Zen Cache』

    プラグインの名前が、Quick Cache から Zen Cache に変更されたようです。
    このプラグインは、新しく記事を投稿したり、編集したりすると
    自動的にキャッシュをクリアし、新しいキャッシュをつくってくれます。

    プラグインの説明文には95%のワードプレスに使用されているとありますね。

    設定方法

    1.上記の方法に従って『Quick Cache または Zen Cache』をインストールし、有効化してください。

    2.ダッシュボードの【プラグイン】『Quick Cache または Zen Cache』【setting】をクリックします。
    するとこの画面になります。

    Quick cache

    一番上の行をクリックすると
    折り返し部分が開きます。

    3.開くと下図のようになっていますので、【Yes, enable Quick Cache】のラジオボタンをオンにします。

    Quick cache2

    4.一番下までスクロールして【Save all changes】をクリックして終了です。

    動作しているかどうかチェックする方法

    1.ワードプレスからいったんログアウトします。

    2.その後普通の訪問者の立場で、サイトのページ上の任意の場所を右クリックしてソースを見ます。

    3.ページの最下部に、以下の記述があれば、動作しているということです。

    Quick cache3

    お疲れ様でした!


    関連記事

    コメント

    1. この記事へのコメントはありません。

    1. この記事へのトラックバックはありません。

    スポンサードリンク

    カテゴリー

    広告