タグ: ブログ

  • 爆速!WordPressの表示速度を上げるならWP-Rocket!

    爆速!WordPressの表示速度を上げるならWP-Rocket!

    WordPressで表示速度を上げることは、ユーザーエクスペリエンスが向上し、ユーザーの滞在時間も伸び、そして他のリンクをクリックする可能性も高まるので回遊率も上がりますよね。

    私もいろいろな無料プラグインを試しましたが、結局行きついたのは有料プラグインのWP-Rocketです。

    個人的に、上位のアフィリエイターやブロガーは、こういったことにお金を惜しまないと思います。もちろん私も有料テーマに有料プラグインをいくつか入れています。(私の収益などはここで紹介しています)

    年間で合計1万円もかかってないと思いますが、これだけの小額投資で見返りは大きいですね。

     

    WP Rocket

     

    WP-Rocketとは

    WP Rocketはキャッシュ系プラグインで、細かな設定ができます。

    WP Rocketの設定

    主に設定するのはCACHE(キャッシュ)、File Optimization、Media、Preload(プリロード)です。

    見ての通り英語表記なので取っ付きにくいと思うかもしれませんが、詳細は後述しているのでやってみてください。

    私はいくつかのサイトを運営していますが、あまり速度が変わらないものもあれば不具合が出たものもあったので、現在はこのサイトのみに使用しています。

    全員が同じ状況になるか分かりませんが、参考までに私の状況を記載します。

    サイト テーマ 使用状況 改善度
    本サイト Generatepress 〇 〇
    海外移住サイト JIN × △
    育児サイト JIN × △
    音楽サイト The Thor × ×

    おそらくCoCoonなどのシンプルなサイトに合うと思いますが、JINやThorなどの「至れり尽くせり機能満載テーマ」には合わないんじゃないかなと思います。(使っているプラグインや設定によって変わります)

     

    WP Rocket 返金ポリシー

    WP Rocketは14日以内なら100%返金してくれるのですが、私もJINで試して改善があまりなかったので返金してもらいました。その後、海外テーマのGeneratepressに変更して試したら100点満点の改善度だったので使用しています。

     

    価格

    WP rocketの価格

    価格は1年契約で

    • サイト1つ・・・49USドル
    • サイト3つ・・・99ドル
    • 無制限サイト・・・249ドル

    になり、無制限の場合は、Webサイトを作成代行などをしている人に合います。と言うのも、クライアントのサイトにWP Rocketをダウンロードして使っても良いからです。(2021年12月31日現在)

     

    WP Rocketの効果

    それでは、私のサイトをPageSpeed Insightで計測した結果です。

    PageSpeed Insightで計測した結果 モバイル<モバイル>

    PageSpeed Insightで計測した結果 デスクトップ<デスクトップ>

    PageSpeed Insightで計測した結果 TOPページ<TOPページ・モバイル>

    最初の2つはサブディレクトリのランディングページで、モバイルが95点・CLS 0、デスクトップが96点・CLS 0、最後のスクショはTopページのモバイルで98点・CLS 0です。

    こちら「WordPressテーマJINでCLSを改善するためにやった対処法」でも話したように、CLSが0と言うのは必須と言ってもいいくらい重要な項目です。

    ちなみに日によってはスコア100点の日もあります。

     

    注意点

    他のどのキャッシュ系プラグインとも同じだと思いますが、WP Rocketを入れただけで改善されるものもあれば改善されないものもあります。なので、導入後は自分で必要な設定、不必要な設定をいろいろと組み合わせて対処する必要があります。

    また、WP Rocketのサイトは日本語もありますが、サポートはすべて英語です(だと思います)。フォーラムや送られてくるメールもすべて英語なので、英語が苦手な人はGoogle翻訳などを使うとやり取りしやすいと思います。

     

    WP Rocketの設定方法

    サイトごとに設定が変わりますが、参考までに私の設定も紹介します。

    必ず1つの項目を設定したら保存→ブラウザのキャッシュを削除、PageSpeed Insightで確認、ブラウザのプライベートモードで確認→問題なければ次の設定を始めます。

    この作業をしないと、どれが不具合を起こしているか分からなくなるので、後々大変です。

    また、キャッシュ系のプラグインなので、時間がある時+読者が少ない時間帯に設定をした方が良いです。

    思い通りの結果が出るまで2-3時間くらいかかるかもしれません。その後、数日は様子見をした方が良いです。

    また、Preloadなどを設定するとプラグインで読み込みを開始し、終わるまでに時間がかかるのですぐに結果が反映されるわけではありません。設定を変更後、細かく確認が必要です。

    キャッシュ

    WP Rocketの設定方法 キャッシュ

    項目 訳 私の使用状況
    Enable caching for mobile devices スマホやタブレットの読者もキャッシュするかどうか 〇
    Separate cache files for mobile devices モバイルのキャッシュを分けるかどうか ×
    Enable caching for logged in WP user WPにログインしているユーザー(主に自分の事)のキャッシュを保存するか ×
    Specify time after which the global cache is cleared キャッシュの保存期間 10時間

    キャッシュは基本的に再訪した読者への表示速度が速くなるので、初回の人には影響がないですが、キャッシュしていた方がいいと思います。

    お使いのサイトがレスポンシブになっている場合は、モバイルキャッシュは分ける必要はありません。昔の様に、モバイルサイトとデスクトップサイトの2種類のページがあるわけじゃないので。もし、未だに分けている人がいたら、ここは使った方がいいですが、その前にレスポンシブにした方がいいと思います。

    キャッシュの保存期間は長い方が良いですが、頻繁に更新する人は短い時間、あまり更新しない人は12時間や24時間でもいいと思います。更新したときにキャッシュをクリアしたら、変更が反映されます。

     

    File Optimization

    この項目を設定するときは1つずつ設定をして保存、そしてPageSpeed Insightで確認、ブラウザのプライベートモードで確認。問題が無ければ次の項目を設定していきます。

    また、例えばA~Eの項目があるとして、ABCDの設定は問題なし、でもEを設定すると不具合が発生。その時にどうしてもEを設定したい場合はいろいろな組み合わせを試してみるしかありません。使っているテーマやプラグイン、その他仕様によって状況が変わるので、人に聞いても分からないことがあります。

    WP Rocketの設定方法 File Optimization

     

    項目 効果 私の使用状況
    Minify CSS File CSSファイルを小さくする(スペースやコメントを削除) 〇
    Combine CSS Files CSSのファイルを1つにまとめHTTPリクエストを減らす 〇
    Exclude CSS Files 上記2つの設定から除外したいCSSファイルがあれば設定 ×
    Optimize CSS Delivery レンダーブロックを減らす 〇

    WP Rocketの設定方法 File Optimization

    項目 効果 私の使用状況
    Minify JavaScript files JavaScriptのファイルを小さくする 〇
    Combine JavaScript files JavaScriptファイルを連結する ×
    Exclude JavaScript Files 上記2項目の設定から除外したいJavaScriptがあれば記載 ×
    Load JavaScript defered JavaScriptを延期する。ロード時間が短くなる 〇
    Exclude JavaScript Files JavaScript延期から除外したいファイルを記載 〇
    Delay JavaScript Files JavaScriptを遅延する。読者がその場所に来るまでJavaScriptを読み込まない 〇
    Exclude JavaScript Files JavaScript遅延から除外したいファイルを記載 〇(初期設定のまま)

     

    Media

    WP Rocketの設定方法 Media

     

    項目 効果 私の使用状況
    Enable for image 画像遅延 〇
    Enable for iframe and videos 動画遅延(Youtubeやビデオを投稿する人は使用した方が良い) ×
    Excluded images or iframe 上記設定から除外したいビデオなどを記載 ×
    Add missing image dimensions CLSが悪くならない 〇

    画像遅延はWPの標準機能になっているので使う必要はないのですが、時々遅延になっていないので私は使用しています。

     

    Preload

    WP Rocketの設定方法 Preload

    項目 効果 私の使用状況
    Acivate Preloading 記載リンクのキャッシュを自動で取得するので、読者が回遊するときに次のページの表示が速くなる 〇
    Acivate sitemap-based cache Preloading サイトマップに記載されたリンクのキャッシュをプレロード 〇
    Sitemaps for preloading 自分のサイトのサイトマップを記載 〇
    Enable lonk preloading 記載リンクのプレロード 〇

    WP Rocketの設定方法 Preload

     

    項目 効果 私の使用状況
    Prefetch DNS Requests もしGoogleフォントやYoutubeなどのサードパーティ製サービスを使っている場合は、登録しておくとファイルが速く読み込まれます ×
    Preload Fonts 使っているフォントを登録しておくと本門者のブラウザがフォントを探しやすくなる(=読み込み速度アップ) ×

     

    まとめ

    私はWP Rocketの設定に2-3時間かかりましたが、人によっては簡単に設定が終わる人もいるかもしれません。

    他のプラグインとの兼ね合いもあるし、テーマとの相性もあるので個人差がありますが、返品もできるので試してみた方が良いと思います。

     

    WP Rocket

     

    他にもこういった記事があるので、併せてどうぞ。

    ・最速サーバー!ConoHaWingの設定方法

    ・エックスサーバーでWebPを設定する方法

    ・おすすめWordpressテーマ

  • はてなブログ・画像を圧縮して読み込み速度を上げる方法

    はてなブログ・画像を圧縮して読み込み速度を上げる方法

    はてなブログを始めて収益化を頑張っていると思いますが、調子はいかかですか?

    収益上がってない?

    離脱率が高い?

    ページの読み込み速度ってかなり重要だって知っていましたか?

    初心者の方に多いのですが、画像をそのままアップしている人が多いですね。

    まずはサイトの表示速度と離脱率の因果関係をご紹介します。

    重いサイト=離脱率が高い

    ブログの読み込みが遅いと離脱者が増える

    Googleは、モバイルサイトの読み込みが3秒以上かかると53%の訪問者がそのサイトを離脱する、との調査結果を発表しています。

    読み込み時間と離脱者の割合はこのようになっています。

    読み込み時間1秒で10人離脱したと仮定したら、

    • 3秒で13.2人が離脱(32%増)
    • 5秒で19人が離脱(90%増)
    • 6秒で20.6人が離脱(106%増)
    • 10秒で22.3人が離脱(123%増)

    そう言われてみたら、皆さんもパッっと表示されないページをクリックしたら戻るボタン押してしまいますよね。

    しかも5秒は待てても、10秒待つ人はいないですよね。

    まずは皆さんも、自分のページの速度をチェックしてみて下さい。

    上のサイトで検索すると落ち込む人もいるかもしれませんが、簡単にポイントを紹介します。

    Pagespeed Insightのスコアはそこまで気にせずに、変更しなくちゃいけない点を見て、サイトのスピードアップに役立てましょう。

    GtmetrixはAが一番いいですが、BくらいでもOKなのでそこまで気にせずに。

    一番重要なのがTestmysiteで、これで平均以上の読み込み時間だったら真剣にブログの高速化をやりましょうね。

    読み込み速度を上げる方法

    コンサルをしていて一番多いのが、画像をそのままアップロードしている人が多すぎるということです。

    「だって旅行ブログだから質が大事だし・・・」

    「面倒くさいし・・・」

    っていうのは、絶対にダメですよ。必ずリサイズをして、圧縮をしてアップロードします。

    リサイズとはサイズ(ピクセル)を小さくして、サイズ(KB)も小さくします。

    では今からその方法をご紹介しますね

    サイズを小さくする方法

    マックもWindowsも、標準機能でサイズの変更が簡単にできます。

    マック・「写真を開く→上にあるツールをクリック→サイズを調整」で出来ます。

    Windows・「ペイントを開く→貼り付け→ファイルの貼り付け→画像を選ぶ→サイズ変更→ピクセル→最後に好みの画像のサイズにします」

    Windows10で画像を小さくする方法

    PicasaというGoogleの画像編集ソフトがあり、大したことができないですがリサイズが簡単にできるので私は主にPicasaを使っています。サービスは終了したとの事ですが、まだダウンロードできるので使えます。(ダウンロードPicasa)

    Picasaは画像をドラッグして、下にあるエクスポートをクリックして画像のサイズを変更します。

    Picasaの使い方

    Canvaも使っている人が多いですが、私は基本的にアイキャッチ画像に編集する時のみ使っています。

    ちょっと前置きが長くなりましたが、どんなソフトを使ってもいいので、リサイズしてみて下さい。

    <画像はリサイズ前リサイズ後です>

    画像のリサイズ

    ブログ初心者の方は126KBは小さいって思うかもしれませんが、これってめちゃくちゃ大きいんですよね。

    なので次に、画像を圧縮します。

    画像を圧縮する方法

    画像の圧縮はいたって簡単で、無料ですので必ずやってください。

    私が昔から使っているのは、compressjpeg.comで、最近使いだしたのはiloveimgです。

    iloveimgは圧縮率が高いのですが、自分で調節できないのがちょっと不満ですが悪くない程度に圧縮してくれます。

    CompressjpegはアップロードするだけでOKですが、自分でも圧縮率を調整できるので、下の画像の様にやってみて下さい。

    ブログ高速化 画質を下げる方法

    <圧縮後のサイズ>

    画像圧縮前圧縮後の変化

    私は記事内に入れる写真や画像は、50KB以下になるように圧縮しています。(最高で70KBまででやっています)

    WordPressではLazy loadという画像遅延読み込みをするものを使っているのですが、はてなでもLazy loadができるカスタマイズがあります。

    はてなブログでも使えるLazy Loadの詳細は、「はてなブログでLazy Loadを使う方法!コピペで簡単に使える!」をどうぞ。

    最後に

    ブログのトップページやヘッダーに画像を入れるとどうしても大きいサイズの画像が必要になって来るのでお勧めしませんが、ユーザビリティが損なわれないならデザイン優先でもいいかと思います。

    ちなみに一つ情報ですが、私はアイキャッチ画像は1200X800の大きなサイズを使っています。それでもサイズは70KB以下にしています。

    グーグル砲を狙うなら、このサイズですよ。

    他にもこちら「今スグできるはてなブログの高速化・9つの対処法」で高速化について紹介しているので、参考にどうぞ。