The post 画像の遅延読み込み系プラグインで一番有能なのはコレ！ first appeared on Fukuro Press.
]]>
WordPressを使っている方、
画像の遅延読み込みしっかり導入できてますか？
設定しておかないとページ表示速度がとんでもなく遅くなります。
なので、画像遅延読み込みは全WPサイトで必須と言っても過言ではないです。
とはいえ・・・
導入自体は専用プラグインを入れればいいだけなので、それほど難しくありません。
ただ問題なのがどのプラグインを使えばいいのか、ということ
「下手なプラグインを使ったら、逆に読みにくいブログになってしまった」・・・なんてことも起こります。（過去の自分がまさにそれ）
そこで自分が使ったプラグインの中で「これが遅延読み込みで１番使える！」と感じたプラグインを紹介したいと思います。
もし遅延読み込みプラグインで迷っているなら、これさえ入れとけば間違いありません。
なんで画像遅延読み込みって必要なの？
まず初めに「画像遅延ってそもそも何？メリットは？」という方のために簡単に説明します。
「もう知ってるよ」って方はここを読んでも仕方ないので、飛ばしてください。
ブログで記事を書く場合、文章だけの記事ってあまり見ないですよね？
例えば記事内に挿入するものとして多いのは・・・
- 記事内容を補足するための画像
- アイキャッチ用の大きな画像
- 埋め込みされたYoutube動画
・・・などなど
やっぱり記事を読みやすくするには画像とか動画があった方が何倍も分かりやすいです。
ただし、画像読み込みは表示速度に影響を与えてしまうのが厄介なところ
どんなに小さな画像ファイルでも10KB、大きいものだと100KB超えとかになります。
そんなものを記事内にそのまま挿入してしまったら、当然ページ表示速度が遅くなってしまいますよね。
そして、遅くなると何が困るかというと次の デメリット があるため
- 読者が快適にページを見れなくなる
- もしかしたら途中で離脱されるかも
- Googleの検索順位にも少しだけ影響する
より詳しいデメリットを知りたい方は次の記事をどうぞ
重いブログとかサイトは読者と検索エンジン側に嫌われるので、画像読み込みで何かしら対策が必要という訳です。
そこで 画像遅延読み込み の出番
読んで字のごとく画像をすぐではなく、遅延させて読み込む技術のことで、ページ表示の時に画像を全読みしなくて済みます。
ページがスクロールするたびに読み込みできるようになるので、
- ページ表示速度が激的に速くなる
- サーバーに無駄な負担が少なくなる
- 読者にも快適なブログになる
- 検索エンジンも評価を見直すかも
などなど メリット が山ほどあります。
これだけ利点があるなら導入しない手はないですね。
実際、WordPressならプラグインさえ入れておけば即導入できます。
ただし・・・下手なものを選ぶと後で後悔するかもしれません。良さそうなプラグインでも実際に使わないと分からない短所とかもあるので
なので私自身、いくつかインストールして比較してみました。
その結果一番使いやすかったのが Lazy Loader というプラグイン
これがクセがなくて高性能だったので、遅延読み込みの導入を考えている方にピッタリです。導入も次みたいにインストールするだけなので難しくもありません。
Lazy Loaderによる遅延読み込みの導入手順
Lazy Loader で画像遅延読み込みさせる手順は超簡単です。
まずはメニューから「プラグイン」ー＞「新規追加」をクリック
そうしたらプラグインの検索画面で「Lazy Loader」と検索してください。
検索結果に次のようなプラグインが出てくるので。「今すぐインストール」ボタンを押すとインストールが始まります。
ちなみに手動インストールする場合は次URLからzipでもダウンロード可能
https://ja.wordpress.org/plugins/lazy-loading-responsive-images/
そして、インストールが終わったら「有効化」ボタンを押すのもお忘れなく
たったこれだけでWordPress内で画像遅延読み込みが有効になります。
自分で何か設定する必要も全くありません。プラグインに全部お任せでOKです。
Lazy Loader の設定を変更するには・・
Lazy Loader は有効化すれば自動で遅延読み込みしてくれます。
とはいえ、自分で設定をアレコレ変えたい方もいるはず
その場合はメニューから「設定」ー＞「メディア」から設定が開けます
↓プラグイン専用メニューはないので注意！
プラグインメニューはメディア画面に統合されてるみたいですね。専用のプラグインメニューとかはないので探しても見つかりません。
このメニューをクリックしたら一番下にスクロールしてみてください。
そうすると次画像みたいに「Lazy Loader options」という項目が見つかるはず
ここでは遅延読み込みに対して、次のような設定ができます。
- 音声・動画でも遅延読み込みを有効にするか
- 読み込み中にスピナーを表示するかどうか
- 個別ページごとにプラグインを無効化するかどうか
こういうオプションが設定できるので、色々試してみてください。
特にYoutube動画を埋め込むことが多いなら、次みたいに「Enable lazy loading for videos」にチェックを付けておくといいですね。
埋め込み動画も表示速度に影響を与えるので、このオプションは有効にしておきましょう。
a3 Lazy Load は使わない方が無難！
ここまで Lazy Loader の導入について解説してきました。ただ、 Lazy Loader ではなく他プラグインを使っている方も多いと思います。
例えば有名どころだと a3 Lazy Load を使っている方も多いはず
↓a3 Lazy Load プラグイン
これでも画像遅延読み込みはできるものの・・・
正直言ってこれは使わない方がいいです。
その理由はTOC+などで目次を表示している場合、動作がおかしくなるから
正確にいうと目次から各見出しに移動しようとしたとき、微妙に位置がずれて変な場所にスクロールしてしまいます。
これは遅延読み込みの影響で画像が表示されなくなっているためです。
本当は画像のある所に画像がないから、見当違いな場所に移動してしまう訳です。
その点、Lazy Loader は位置ずれ対策もばっちりですね。
ちゃんと遅延読み込みする前に画像のサイズを計算し、中身がない元画像の大きさのダミー画像を作ってくれます。
だから目次からジャンプしたときに位置がずれることがありません。
こういう細かな配慮も私が Lazy Loader をオススメする理由です。
WP高速化には遅延読込以外の対策も効果あり！
ここで紹介した画像遅延読み込みはWordPress高速化に効果抜群です。
ただし、これだけだと十分高速化できたとは言えません。
「もっともっと表示速度を速くしたい」
「多くの読者に見られるブログを作りたい」
そう思っている方はWP高速化対策を試してみましょう。
具体的に何をすればいいかというと、次のような対策
これだけの対策をしておけば、大抵は満足いく表示速度になるはずです。
もしも「表示速度が遅くて遅くて仕方ない」、「この遅さをどうにかしたい」と悩んでいるなら上の記事をご覧ください。
技術的なことが全く分からない方でも、簡単にできる方法を解説します。
まとめ
以上、画像遅延読み込みプラグイン Lazy Loader の紹介でした。
プラグインは色々あるものの、性能的にも使いやすさ的にも一番だと思います。迷っている方はこれを使っておけば間違いないです
The post 画像の遅延読み込み系プラグインで一番有能なのはコレ！ first appeared on Fukuro Press.
]]>The post WordPress表示速度のPC・スマホ別 測定方法＆改善策【2024年最新】 first appeared on Fukuro Press.
]]>
自分のWordPressサイトがどれくらい速い（あるいは遅い）のか・・・
気になりますよね？
でも「表示されるまでに●秒かかった」とか自分で測定するのは手間がかかって非効率だし、客観的じゃありません。
そこでWordPress表示速度をPC・スマホ別々で客観的に測定する方法を紹介します。
また測定の結果、遅いサイト・ブログだと判明した場合の対策もまとめました。時間も手間もかからず、すぐできることばかりなので是非お試しください！
WordPress表示速度のPC・スマホ別測定方法
表示速度の測定はPCとスマホ（タブレット）で違うツールを使います。
それぞれのやり方は次の通りです。
PC（パソコン）の表示速度測定
まずパソコン（PC）での表示速度の測り方について
これには PageSpeed Insights というグーグルが開発した便利なツールを使います。
ページ表示速度を０～１００でスコア化してもらえ、その上「ここは改善した方がいいよ」という提案までしてくれる優れものです。
その使い方を簡単に説明すると次の手順
まず PageSpeed Insight にアクセス（別タブで開きます）
アクセスしたら調べたいサイトのURLを入力し、「分析」ボタンをクリック
↓ドメイン名ではなく、URLで入力するのがベスト！
この時ドメイン名（例えば fukuro-press.com ）ではなく、http(s)付きのURL（例えば https://fukuro-press.com ）で入力する方が正確な結果が出ます。
そうすると計測が始まるのでしばらく待ちましょう。
↓計測には10秒～１分程度かかる
計測が終わると次画像みたいにスコアが表示されます。
最初は「モバイル」のタブが開かれてるので、「パソコン」のタブに切り替えてください。
そうすると 0～100 のスコアでPCの表示速度が分かります。上画像にもあるように 90～100 だと超優秀、 50~89 で平均、 0~49 だと要改善といった感じですね。
もしスコアが 0~89 の範囲なら「改善できる項目」を探してみてください。
↓表示速度改善の項目が一覧表示される
上のように「どの項目を改善すれば何秒短縮できるか」が一目で分かります。
この改善できる項目の意味とか具体的な改善策については次記事で解説しました。
分かりにくい項目もあるので PageSpeed Insight を使うのは初めて、という方は上の記事も覧ください。
以上がPCでの表示速度の計測方法
ただし注意点が１つあるとすると、モバイルの表示速度を測るのにこのツールはあまり役に立たないということ
モバイル（スマホ）の場合は次で紹介するツールを使う方が確実です。
モバイル（スマホ）の表示速度測定
では次にモバイル（スマホ・タブレット）の表示速度計測方法について
これには Test My Site という、これまたグーグルが開発したツールを使います。スマホの３G回線を再現し、その中で自分のブログがどれだけ速いかを可視化できるツールです。
それを使って速度計測をする手順は次の通り
まず Test My Site にアクセス（別タブで開きます）
アクセスしたら画面内のURL入力欄に調べたいWordPressサイトのURLを入力し、エンターを押すか矢印ボタンをクリック
↓こちらもhttp(s)から始まるURLを入力するのがベスト！
すると次画面が出てきて計測がスタートします。
これは Page Speed Insights と違って結構長いです・・・最低でも１分程度かかるので気長に待ちましょう。
そして１分ほど経つと計測結果が表示されます。
上画像みたいに３Ｇ回線の読み込み時間と訪問者の離脱率が表示されます。
また「同じ業種内の比較」からは他の同じジャンルのサイト・ブログとの比較も見ることが可能です。
ランクには４段階あって「特に良好」、「良好」、「普通」、「要改善」の４つ
「特に良好」、「良好」ならサイトを訪れた人にとって快適なサイト、
「普通」、「要改善」なら読者をイライラさせるサイトかもしれない、ってことです。
なるべくなら「特に良好」、「良好」を目指したいですね。
追記（2020/01/20）
現在は「同じ業種内の比較」はできなくなりました。
比較サイトURLを "１つずつ入力" する方式になってます。
少し不便になってしまったのが少し残念。
以上がスマホでの表示速度を計測する方法
こういうツールで計測すれば自分のサイト・ブログの立ち位置が大体わかってきます。
WordPress表示速度を改善する対策まとめ
紹介したツールで計測した結果、表示速度が速いなら特に問題ありません。
でも逆に遅いと測定されてしまった場合・・・ある程度の対策が必要です。
なので次に表示速度を改善するための対策について紹介します。特に表示速度を劇的に改善するのに効果があってオススメなのは次の３つ
１．高スペックなサーバーへの乗り換え
低スペックなサーバーはWordPress運営するのに向いていません。
特に最悪なのが無料サーバーを使っている場合
「無料で使えるし、なんかお得」と思ってしまいがちですが、無料で使えるものは必ずどこかにシワ寄せが生じます。
自分の経験から言うと無料サーバーでWordPressを動かすとかなり重いです。その時点でサイト・ブログ運営にかなりハンディキャップを背負うことになります。
あとサポート面とか運営面でもかなり不安があって、自分自身もヒヤッとするような経験をしたこともありました。（詳しくは次記事参照）
上の体験をしてから私は絶対に無料サーバーは使わないことに決めてます。「ただより高いものはない」という格言があるように無料は後で高くつくことを学んだので・・・
なので今からブログを始める or 乗り換えたい方は昔の私みたいにならないよう、
有料サーバーを使うと安心＆安全にブログ運営ができるはずです。
ちなみに手ごろな価格で始めるなら さくらのレンタルサーバ
または ロリポップ！
、
さらに速度を求めるなら エックスサーバー
、または wpXレンタルサーバー
が最適ですね。
そこは自分が運営したいブログの規模とか用途に応じて選ぶようにしてください。
ちなみに私自身は さくら と ロリポップ が使いやすいので愛用してます。
２．サーバーでgzip圧縮を有効にする
お次は サーバー側でgzip圧縮を有効にする という対策
例えばブログページを表示する場合、何もしないとサーバー側からブラウザ側に必要なファイルをそのまま全部転送しないといけません。
これだと無駄が多いので、サーバー側であらかじめデータ圧縮しておこうという対策です。
そうすれば転送量も減るしページ表示速度も速くなるし、本当にいいこと尽くめです。
その詳しい設定方法は次記事で解説したので是非お試しを
特別な知識が無くてもコピペすれば３分くらいで簡単にできます。これをしておくだけでも表示速度に大分差が出るので設定してない方は是非しておきましょう。
３．ブラウザのキャッシュ有効期限を延ばす
３つめは ブラウザのキャッシュ有効期限を延ばす という対策
例えばブラウザ側でサーバーから毎回毎回ファイルをダウンロードすると時間もかかるし無駄が多いですよね？
そこでブラウザではキャッシュ（cache）を利用し、必要なファイルをブラウザ側で保管してます。そうすれば無駄な読み込みがなくなって表示速度が速くなるという訳です。
でもこのキャッシュ・・・デフォルトだと保存期限がとっても短いです。大体１日～３日程度ですぐに消去されてしまいます。
なので表示速度を速めるにはこのキャッシュ保存期限をなるべく長くした方がいいです。
その詳しい設定方法は次記事で紹介したので是非ご覧ください
gzip圧縮同様、やるとやらないとでは表示速度に雲泥の差が出ます。コピペでできるので設定してない方は是非お試しを
その他の対策
他にも表示速度を上げる対策は色々あります。
でも全部紹介するとキリがないので、必要な対策一覧を次記事でまとめました。
全て試せば大分表示速度が改善するはずなので、「表示速度が遅すぎる・・・」とお悩みの方に役立つはずです。
まとめ
以上、WordPressの表示速度を客観的に計測する方法についてでした。
主観で判断するより正確に計測できるので便利です。
そして計測して問題が見つかったら、それを改善していくこともお忘れなく。地道に改善していけば読者にとって快適なサイト・ブログになります。
The post WordPress表示速度のPC・スマホ別 測定方法＆改善策【2024年最新】 first appeared on Fukuro Press.
]]>The post 画像読み込みを高速化するためにWordPressでできる３つの対策 first appeared on Fukuro Press.
]]>
画像はサイズ（容量）がでかいので表示速度低下の原因になりがち
テキストと違って平気で数十KB～数百KBくらいの容量になるので、読み込み速度を落とさないためには画像を最適化しておく必要があるのです。
そこでWordPressで簡単にできる画像読み込み最適化の対策をまとめました。
画像最適化のためにできる３つの対策
画像のサイズと読み込み時間を減らすためにできる対策は次の３つ
- アップロード時にデータ圧縮
- アップロード時に最大幅にリサイズ
- ページ表示時に遅延読み込み
もしこれを全部自力でやろうとすると大変ですが、WordPressならプラグインを使えば全て自動＆簡単に行うことができます。
ではこの３つのやり方について順番に見ていきましょう。
アップロード時の画像データ圧縮
画像の最適化として、一番最初にしておきたいのがデータ圧縮
この対策をしておけば 無駄な部分を減らしてデータサイズを小さくすること ができます。
WordPressの場合は画像圧縮系のプラグインで検索すれば多数出てきます。
例えば代表的なプラグインは次の３つ
- Compress JPEG & PNG images
- EWWW Image Optimizer
- WP Smush
どのプラグインもアップロード時に自動的に圧縮する機能が付いています。
でもこれだけ選択肢があると逆にどれを使えばいいか分からないなってしまいますよね。
そこで次の記事で各プラグインについて圧縮性能を比較しました。
もしどれを使えば悩んでいるならこの記事を見てもらえば選ぶときの参考になると思います。
ちなみに圧縮率が最も高いのはあの画像圧縮サービス TinyPNG の開発元が作った Compress JPEG & PNG images です。
詳しい使い方については次の記事でまとめたのでそちらも是非ご覧ください。
ただし無料会員だと制限があるので不自由なく使いたいなら有料会員になる必要があります。
アップロード時にリサイズ
普段大きな画像をアップロードする時、そのままのサイズでアップしていませんか？
大抵の画像はそれでもいいですが、
記事最大幅を超える画像はアップロード前にリサイズするのをオススメします。
なぜ最大幅にリサイズした方がいいかというと次のメリットがあるから
- データサイズが減る
⇒ 記事幅に収めることでデータを無駄なく小さくできる
- 画像のぼやけがなくなる
⇒ 最大幅を超える画像だと縮小されてぼやけるが、その対策にも効果あり
データサイズが減るのはもちろんのこと、記事幅に収まらない画像がぼやけてしまうのを防ぐ効果まであります。
なのでアップロード前に「この画像は記事幅よりも幅が大きすぎるな...」と感じたらその幅に合わせてリサイズした方が良いでしょう。
でも全部手動でやるのは大変なのでリサイズについても便利なプラグインがあります。
それが次の記事で紹介した Resize Image After Upload というプラグイン
この記事でも書いたように画像アップロード時に指定しておいた最大幅まで自動的にリサイズしてくれる優れものです。
普段から大きめの画像を扱うことが多いなら、このプラグインが重宝すると重いので是非活用してみてください。
画像の遅延読み込み（Lazy Loader）の導入
最後の対策は画像の遅延読み込みを導入すること
これはページの表示時に画像を読み込まず、
画像表示が必要になった時にその場で読み込むという手法になります。
この遅延読み込みを使うことのメリットは次の２つ
- 表示が高速になる
⇒ サイズの大きい画像を全て読み込む必要がないため
- データの転送量を減らせる
⇒ 記事途中で離脱されても無駄なデータ通信が発生しない
すぐに表示しない画像は後読みなので表示速度を高速化できる効果があります。
そしてWordPressの場合、
画像遅延読み込みで有能なのが Lazy Loader っていうプラグイン
ちょうど次記事で使い方とか解説したプラグインですね。
詳しい導入とか使い方・特徴は上記事をご覧ください。
この Lazy Loder の利点は何かというと、
有効化しておくだけで、記事内の画像を全部遅延読み込みしてくれる所
↓面倒な設定不要、有効化するだけでOK！
あとTOC+とかの目次プラグインとも相性がいいです。
質の悪い遅延読み込みプラグインの場合、
目次から見出しにジャンプしたときに位置がずれることがあるんですよね。
その点 Lazy Loader は位置ずれ対策もバッチリです。
ちなみにこのプラグイン、遅延読み込みするのは記事内画像だけじゃありません。
次の画像もしっかり遅延読み込みしてくれます。
- ウィジェット内の画像
- 投稿サムネイル画像
- 投稿者のGravatar画像
- iframe内にある画像
ほぼ全ての場所にある画像を遅延読み込みしてくれるので、ページ表示速度の改善に役立つこと間違いなしです。
もっともっとWordPressを高速化するには
以上がWordPressでできる画像の最適化対策です。
全ての対策をしておけば大分ページ表示速度の改善につながります。
しかしWordPressを高速化するには画像の最適化だけでは不十分です。これに加えて最低限しておきたいのが次のWordPress高速化設定
この５つはやり方も難しくなく、誰でもできることばかりなので簡単です。
詳しいやり方については次記事でまとめたのでそちらをどうぞ
画像最適化に加えて上の記事でまとめたことも実践すれば表示速度が見違えるほど改善します。是非お試しを！
まとめ
ここまでで紹介した画像読み込み最適化対策をもう一度まとめると次の通り
- アップロード時にデータ圧縮
- アップロード時に最大幅にリサイズ
- ページ表示時に遅延読み込み
この３つをやっておくだけでも表示速度の改善につながります。
以上、画像の読み込みを最適化するための３つの対策でした。
これに加えてWordPressの高速化設定も行っていけば表示速度はさらに改善し、結果として読者が快適に見ることができるブログを作るのにつながるはずです。
もちろん記事の質も大事ですが、表示速度で離脱されることがないように読者がストレスなく見れる快適なブログを目指していきましょう。
The post 画像読み込みを高速化するためにWordPressでできる３つの対策 first appeared on Fukuro Press.
]]>The post ページ表示速度が遅いことの２つのデメリット＆解決策 first appeared on Fukuro Press.
]]>
ーーページ表示速度が遅いとどんなデメリットがあるんだろう？
ーーなんで表示速度は速くした方がいいと言われてるんだろう？
こういう風に思ったことありませんか？
それはページの表示が遅いことで２つのデメリットが出てきてしまうからです。
ここではその２つのデメリットと具体的な改善策を紹介します。
ページ表示速度が遅いことの２つのデメリット
ページ表示速度が遅いことのデメリットは次の２つ
- Googleからの評価が落ちる
- 直帰率を上げてしまう
ではこの２つのデメリットについて詳しく説明したいと思います。
デメリット１. Googleからの評価が落ちる
まずデメリット１つめはGoogleからマイナス評価を受けてしまうことです。
その理由は Speed Update というアップデートが導入されたため
次のように２０１８年１月頃にはウェブマスター公式もTwitterで告知していました。
The Speed Update, which enables page speed in mobile search ranking
, is now rolling out for all users!
More details on Webmaster Central
https://t.co/fF40GJZik0
— Google Webmasters (@googlewmc) 2018年7月9日
このアップデート内容については公式ブログで次のように書かれています。
この ”Speed Update” （と私たちは呼んでいます）は、ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。
そして２０１８年７月９日から開始したことも追記されています。
2018/7/9 追記
すべてのユーザーを対象に Speed Update のロールアウトを開始しました。
もう既に表示速度の遅いサイトやブログではいくらか影響が出てるかもしてません。
とはいってこのアップデートはモバイル端末が対象でPCは含まれていないです。
しかもウェブマスター公式も言っているように「本当に遅い体験」を提供するサイトが対象なので、あまり順位には影響ないかなと思います。
でも今はスマホとかのモバイル端末からのアクセスが多くなってきてますよね？
なのでもし Speed Update に引っかかると多くのアクセスを逃してしまうかもしれません。
なので自分は大丈夫と過信せずにページ表示速度の改善をしてくことが大事です。
デメリット２. 直帰率を上げてしまう
デメリット２つめは直帰率を上げてしまうことです。
直帰率とはサイトにアクセスした人の内、最初のページで離脱した人の割合
ページ表示速度が遅くなるとこの直帰率が高くなってしまいます。
例えばあなたが検索エンジンで何か調べ物をしていて自分の探している情報がありそうなページを見つけた場合を考えてみてください。
もしそのページを開くのに数十秒かかったとしたらどうするでしょうか？
恐らくそのページでしか得られない情報でない限りはほとんどの人がそのページにアクセスするのをあきらめて去って行ってしまうと思います。
つまり表示速度が遅いと離脱率を高くして、アクセス数を逃すのにつながるということ
しかも実際の離脱率は数十秒どころか、ほんの数秒送れるだけでも大きく変動します。
その証拠が次の図で、Googleがディープラーニングを用いて表示速度と離脱率の関係を求め１秒から表示速度が何秒に変わると離脱率はどのように変化するかを示した予想です。(参照元 : Think With Google)
上の図を日本語に訳すとこういうことです。
- 表示速度が１秒から３秒になる(２秒遅れる)
⇒ 直帰率は３２％上昇
- 表示速度が１秒から５秒になる(４秒遅れる)
⇒ 直帰率は９０％上昇
- 表示速度が１秒から６秒になる(５秒遅れる)
⇒ 直帰率は１０６％上昇
- 表示速度が１秒から１０秒になる(９秒遅れる)
⇒ 直帰率は１２３％上昇
２秒遅れるだけで直帰率は３２％上昇、もし９秒遅れたとしたら直帰率は１２３％上昇で２倍以上になります。
ではこのデータを元に直帰率が具体的にどのように変化するか考えてみましょう。
例えば一日１０００人が訪れ１秒で表示されたときの離脱率が３０%のブログなら表示速度が遅れると次のように離脱率が変化するということになります。
- 表示速度が１秒
⇒ 直帰率は３０.０％ つまり １０００人中３００人離脱
- 表示速度が１秒から３秒に(２秒遅れる)
⇒ 直帰率は３９.６％ つまり １０００人中３９６人離脱
- 表示速度が１秒から５秒に(４秒遅れる)
⇒ 直帰率は５７.０％ つまり １０００人中５７０人離脱
- 表示速度が１秒から６秒に(５秒遅れる)
⇒ 直帰率は６１.８％ つまり １０００人中６１８人離脱
- 表示速度が１秒から１０秒に(９秒遅れる)
⇒ 直帰率は６６.９％ つまり １０００人中６６９人離脱
１秒から３秒になるだけでも離脱率は９．６％も上がり、離脱する人も１００人増えます。
そしてさらに１秒から１０秒になれば離脱率は２倍、半数以上が離脱するという結果に・・・
もちろんこれは予想なので必ずこうなるわけではありません。
しかし、ほんの数秒遅れるだけで記事を読んでもらうチャンスを失うと考えるとブログやサイトにとって計り知れない損害ですよね。
多くの人に読んでもらうには記事の質も大事ですが、それ以前にアクセスしてもらえるかどうかが重要ということです。
ページ表示速度を改善する具体的な対策
ではページ表示速度を改善するにはどうすればいいのか・・・
そのためにできる具体的な対策は次の通りです。
これはサーバー側でできることなので、最低限試しておきたい対策
またWordPressを使っているなら次の対策も効果的です。
ほとんどプラグインを使えばできることなので全く難しくはありません。
以上の対策については次の記事でまとめたので是非ご覧ください。
紹介した対策をしておけばページ表示速度が見違えるほど改善するはずです。
まとめ
表示速度が遅いデメリットをもう一度まとめると次の通り
- Googleからの評価が落ちる
Speed Update に当てはまるとモバイルでの順位に影響する恐れあり
- 直帰率を上げてしまう
本来読んでもらえたかもしれない記事が読まれるチャンスを失う
もちろん記事の質が一番大事ですが、それ以前にページ表示速度が遅すぎると記事を読んでもらえるチャンスを逃してしまいます。
なのでページ表示速度が遅いと思ったら改善していくことが重要です。
The post ページ表示速度が遅いことの２つのデメリット＆解決策 first appeared on Fukuro Press.
]]>The post プラグインによるページ表示速度低下を防ぐための３つの対策 first appeared on Fukuro Press.
]]>
WordPressの便利な機能の１つがプラグインです。
ただインストールするだけで簡単にブログの機能を拡張したり、ウィジェットを設置できたりして便利ですよね。
しかしその便利なプラグインも使い方次第でページ速度表示低下の原因になってしまいます。
そこでここではプラグインによるブログの表示速度低下を防ぐためにできる対策について紹介します。もしブログが重いなと感じたらここで紹介することを実践してみてください。
表示速度低下を防ぐための対策
プラグインによる表示速度低下を防ぐための対策は次の通り
- ウィジェット系プラグインの数を最低限にする
- 一部でしか使わないならそのページだけで読み込む
- 本当に必要かどうか考えてからインストールする
この３つが特に効果的です。
この対策について次で詳しく説明していきます。
ウィジェット系プラグインの数を最低限にする
プラグインは動作する条件で分けると次の２つに分類されます。
- ウィジェット系プラグイン
実際の記事内で動くプラグインのこと
- 管理画面系プラグイン
WordPressの管理画面だけで動くプラグインのこと
この中で速度表示低下の原因になりやすいのがウィジェット系プラグインなのでその数は必要最低限にしておいた方がよいでしょう。
例えばウィジェット系プラグインの機能の例をいくつか挙げるとすると・・・
- SNSボタンを表示する
- 人気記事や関連記事を表示する
- サイト内検索機能を強化する
・・・などなど
実際のブログ内で動くので、動作するためのスクリプトとかデザインを整えるためのCSSなどが読み込まれるため表示速度に影響を与えてしまいます。
なので無駄な読み込みを増やさないためにもウィジェット系は本当に必要なものだけ入れるべきです。
そしてウィジェット系と対照的なのが管理画面系プラグインです。
その機能の例をいくつか挙げるとすると・・・
- 記事の公開時に自動的にツイートする
- ビジュアルエディタの機能を拡張する
- WordPressのバックアップを取る
・・・などなど
これらのプラグインは管理画面だけで動くのでページの表示速度には影響を与えないので、あまりにも過剰に入れすぎない限りは大丈夫です。
同じプラグインでも実際のページで動くか、あるいは管理画面で動くかではブログに与える影響は大違いです。
なのでウィジェット系プラグインは欲張らずに本当に必要な場合だけインストールするようにしましょう。
一部でしか使わないならそのページでだけ読み込む
一部のページだけでしか使っていないようなプラグインはありませんか？
例えば次のような場合です。
- トップページだけでしか使わない
- 固定ページでしか使っていない
- 特定の投稿ページでしか機能を利用していない
こういう場合、プラグインを使用していない他のページでは無駄な読み込みが発生してしまうので速度低下につながってしまいます。
これを解決するためには特定のページでだけそのプラグインを読み込むようにしましょう。
そのために必要なのが「Plugin Load Filter」というプラグインです。
このプラグインは便利で、次のような設定をするだけで一部ページでのみプラグインを動作させないようにできます。
- プラグインロードフィルタの登録
- 特定プラグインでフィルタを有効にする
- 特定ページでプラグインを有効化・無効化
一部のページでだけ読み込みたいプラグインをフィルタすることで個別の投稿ページでオン・オフを切り替えられるという優れものです。
詳しい使い方については次の記事で紹介したのでそちらをどうぞ
設定も簡単なので特定ページでしか使わないプラグインがあるなら試してみてください。
本当に必要かどうか考えてからインストールする
プラグインは手軽にインストールするだけで使えて本当に便利です。
ですがその手軽さが無駄なプラグインを増やしてしまう原因にもなるんですよね。
なのでインストールする前にワンクッション置いて次のようなことを考えるべきです。
- 今使っているテーマに同じ機能はないか
- それで自分のやりたいことが実現できるのか
- そもそもその機能は本当に必要なのか
プラグインが必要だと思っても実は現在使用しているテーマでそういう機能が付いていることもあります。
さらにそのプラグインは期待通りの機能が付いていないかもしれないし、そもそも自分のブログに必要のない機能かもしれません。
インストールする前にこういうことを考えるクセをつけておきましょう。
これだけでも不必要で無駄なプラグインが減らせるはずです。
さらにページ表示速度を上げるには・・・
ここまでで説明したことを実践＆意識して行っていけばプラグインのせいで表示速度低下することが少なくなります。
ですがWordPressを本当に高速化したいならこれだけでは不十分です。
これに加えてさらに次のような設定をしておけばさらに高速化できます。
もしこれらの設定をしていないなら絶対にしておきましょう。
詳しくは次の記事でやり方をまとめたので是非ご覧ください。
この記事に書いたことを実践するだけでも表示速度が見違えるほど改善します。
あるいは自分で設定せずにWordPress高速化に適したレンタルサーバーに乗り換えることでも表示速度の改善が可能です。
もし高速化設定が面倒な方はそういうWordPress専用のサーバーを借りましょう。特に さくらのレンタルサーバー 、エックスサーバー 、wpxサーバー 当たりが最適です。
まとめ
プラグインによる表示速度低下を防ぐための対策をもう一度まとめると次の通り
- ウィジェット系プラグインの数を最低限にする
- 一部でしか使わないならそのページだけで読み込む
- 本当に必要かどうか考えてからインストールする
ウィジェット系プラグインを最低限にして本当に必要か考えてからインストールする・・・これがブログを遅くしないために大事なことですね。
また先ほど紹介したWordPress高速化のテクニックも活用すればさらに効果大です。
もしブログの表示速度が遅いなら一歩ずつ改善していきましょう。それが結果的に表示速度の速い快適なブログを作ることにつながります。
The post プラグインによるページ表示速度低下を防ぐための３つの対策 first appeared on Fukuro Press.
]]>The post WordPressでサーバーの応答時間を短縮するのに”一番”効果的な方法 first appeared on Fukuro Press.
]]>
PageSpeed Insights を使っていて「サーバーの応答時間を短縮する」という提案を見たことはありませんか？
WordPressを使っているならテーマやプラグインの影響で表示速度が遅くなってしまうため、この提案を見かけることも多いと思います。
しかも改善しようにも具体的に何をすればいいか分からなくてあきらめている、という方もいるかもしれませんね。
ですがWordPressの場合はほんの少しサーバーの設定を変えるだけで劇的にパフォーマンスが改善することがあります。
そこでここではサーバー応答時間を改善するためのサーバー設定の変更方法について解説していきます。
応答時間を改善する方法とは・・・
冒頭でも書いたようにサーバーの応答時間が遅いと PageSpeed Insights では次のような提案メッセージが表示されます。
このメッセージはサーバーの応答時間が200ミリ秒（0.2秒）以上の時に表示される提案
ではこの応答時間は具体的に何を指しているかというと PageSpeed Insights によると次のように説明されています。
サーバーの応答時間は、ページのレンダリングを開始するために必要な HTML をサーバーから読み込むのにかかる時間を測定したもので、Google とサーバーの間のネットワーク遅延が差し引かれます。
サーバーからHTMLが読み込まれるまでの時間なので画像やCSS・スクリプトなどの読み込み時間は含まれません。
しかもHTML自体はただのテキストなので本来サーバーの応答時間はそれほど遅くはならないはずです。
しかしWordPressではPHPというプログラミング言語を使ってサーバー側にアクセスがある度にHTMLを生成しています。
なのでサーバー側で毎回毎回PHPを実行しなくてはならない分だけ、サーバー側の処理が多くなってしまうという訳です。
これがWordPressの応答時間が長くなってしまう一番の原因ですね。
ではそのサーバー側の処理を少しでも減らすために何をすればいいか・・・
と考えた時にもっとも効果があるのがPHPのバージョンを新しくすることです。
PHPというのは新しいバージョンほどパフォーマンスがよくなり、逆に古いものほど実行速度が遅くなってしまいます。
なのでWordPressで使うPHPを最新バージョンにするのが一番効果的という訳です。
では、具体的にPHPをバージョンアップする方法について次で見ていきましょう。
サーバー側でPHPのバージョンアップをする手順
ここでは代表的な次の２つのサーバーについてPHPバージョン変更の設定手順を紹介します。
もちろんこの２つ以外のサーバーを使っていてもPHPのバージョンアップはできます。
ですが全てのサーバーでの設定手順は紹介できないので、上記の２つ以外を使っている場合はサポートなどに問い合わせをしてバージョンの変更手順を調べてください。
ではこの２つのサーバーでのPHPバージョンの設定手順を説明していきます。
さくらサーバー
まず最初はさくらのレンタルサーバーでの変更手順です。ちなみにバージョン変更だけならライトでもスタンダートでもどのプランを使っていたとしても変更ができます。
その手順は次の通り
まずさくらサーバーのコントロールパネルにアクセスしてログインしましょう。
上の画像のようにログインしたら「アプリケーション設定」から「PHPのバージョン選択」をクリック
すると次のようなPHPのバージョン選択画面が出てきます。
このとき「現在のバージョン」がその下に表示されている最新のバージョンになっているかどうか確認してください。
もし最新になっていなくて古いバージョンのままだったら最新のもの(ここではPHP7.2)を選んで変更ボタンをクリック
「モジュール版」にはチェックを入れたままでOKです。
これでPHPバージョンが最新になりました。
さくらサーバーでのPHPバージョン変更の手順は以上です。
エックスサーバーでの変更手順
次はエックスサーバーでの変更手順を説明します。
そのやり方は次の通り
まずエックスサーバーのコントロールパネルにアクセスしてログインします。
コントロールパネルが開いたらその中の「PHP」ー＞「PHP Ver.切替」をクリック
ドメイン選択画面が表示されるのでバージョン切り替えしたいドメインを選びます。
あとは次の画面で「変更後のバージョン」の下にあるセレクトボックスから最新のものを選んで「PHPバージョン切り替え」ボタンを押すだけです。
これでバージョンアップは完了です。
ちなみにエックスサーバーの場合は初期状態で最新のものが選択されています。
ですがもし古いバージョンになっていた場合はこの手順で変更しておきましょう。
PHPバージョンアップの効果は・・・
あるブログで実際にどれほどPageSpeed Insightsのスコアが上がるか試してみました。
その結果は次の通りです。
まず次がPHPバージョンアップ前のスマホとPCでのそれぞれのスコア
スマホのスコアが59、パソコンでのスコアが75でした。
そして次がPHPバージョンアップ後のそれぞれのスコア
モバイルでは76、パソコンでは80になりました。
どれだけポイントが上がったかというとモバイルでは 59 ⇒ 76 なのでなんと18ポイント、パソコンでは 75 ⇒ 80 なので5ポイントも改善しています。
そしてPHPバージョンを変更する前と後でも応答時間にかなりの差がありました。
次がバージョンアップ前の応答時間
そして次がバージョンアップ後の応答時間
1.3秒から0.46秒なのでなんと0.94秒、四捨五入すれば１秒も表示速度が改善されています。
この結果を見るとたかがバージョンアップとは侮れませんね。
なのでもしPageSpeed Insights で応答時間が１秒以上なら是非PHPのバージョンアップを試してみてください。必ず効果があるはずです。
WordPressをさらに高速化するには
「WordPressをもっと高速表示したい」
「表示速度を速くして快適なブログを作りたい」
もしそう考えているなら高速化のために "やるべきこと" が他にもあります。
まず第一に・・・
表示速度はサーバーのスペックにも大きく依存します。
なので サーバーを選ぶ または 乗り換える ときはWordPress高速化に適したレンタルサーバーを選ぶようにしましょう。
ちなみにお手頃な価格帯で選ぶなら さくらサーバー または ロリポップ 、
さらに高速さを求めるなら wpxサーバー または エックスサーバー がオススメです。
そこは自分の運営するブログ規模に合わせて選んでください。
ちなみに・・・
「今すぐWordPressブログを始めたい！」という方には ロリポップ がオススメ
ここは本当に驚くほど速くWordPressブログが作れます。どのくらい速いかっていうと、サーバー（と独自ドメイン）を借りて半日～数時間後に記事が書けるくらいです。
その手順を知りたい方は「たった１日でできるWPブログ作り方講座」をチェック
その気になれば１日どころか半日もかからないので、
ブログで１日でも早く成果を出したい という方はここを使うのがベストです。
そして第二に・・・
WordPress自体の高速化設定もしておきましょう。
具体的に何をすればいいかというと最低限すべきは次のようなこと
WPは表示速度が遅くなりがちなので、これらの対策は絶対しておいた方がいいですね。
一覧は WP高速化で最低限すべき６つのこと でもまとめたので、そちらもどうぞ
まとめ
以上、WordPressでサーバー応答時間を短縮する方法についてでした。
WordPressは表示速度が遅くなりがちなので、ここで紹介したPHPのバージョンアップや高速化設定を行って少しずつ表示速度を改善していきましょう。
それが読者にとってイライラさせない快適なブログを作ることにつながります。
The post WordPressでサーバーの応答時間を短縮するのに”一番”効果的な方法 first appeared on Fukuro Press.
]]>The post WordPress高速化のために最低限すべき６つのこと【2024年最新】 first appeared on Fukuro Press.
]]>
「WordPressの表示速度が遅くて困る・・・」
こう思いながらWordPressの高速化に頭を悩ませているサイトやブログの運営者は多いのではないでしょうか。
確かにページの表示速度が数秒遅いだけで離脱率も高くなるので表示速度は少しでも早くしたいですよね。
ただ高速化と言っても何を試せばいいのか分からないという人も多いと思います。
そこでここではWordPress高速化のために最低限しておいた方がいい６つのことについて紹介していきます。表示速度が遅くて遅くて困っている、という場合は是非お試しを！
ページ表示速度を改善することの重要性
ページ表示速度の改善が重要なのは表示が遅いことのデメリットを回避するためです。ではそのデメリットは何かというと次の２つ
- Googleからの評価が落ちる
- 直帰率を上げてしまう
つまり本来読まれる記事が読まれるチャンスを失ってしまうということです。
詳しい解説については次の記事で詳しくまとめたのでご覧ください。
表示速度が遅いと記事の質が良くても読んでもらえる可能性が低くなります。
せっかくいい記事を書いても読まれないと意味がないですよね？
なので表示速度を改善して読まれるチャンスを逃さないことが重要な訳です。ではその改善策について詳しく紹介していきます。
WordPress高速化のための６つの手順
高速化にも色々方法がありますが、最低限しておいた方がいいのは次の６つ
この６つについて順番に紹介していきます。
１．PHPを最新にバージョンアップ
WordPressではPHPというプログラミング言語を使ってページを表示しています。
そのためサーバー側で毎回毎回PHPを実行しなくてはならない分だけ、サーバー側の処理が多くなるので表示に時間がかかってしまうのです。
なのでページを高速表示する近道はそのPHP自体を高速化してしまうこと
ではどうやってPHPを高速化すればいいのか・・・
その答えは単純でPHPのバージョンアップをすればいいだけです。
そのやり方については次の記事で方法を書いたので是非ご覧ください。
実際にあるブログでPHPのバージョンアップを行ったところ、サーバーの応答時間を約１秒ほど短縮できました。
本当に簡単なことですが効果が高いので初めにしておくことを強くおすすめします。
２．サーバーでのgzip圧縮の有効化
私たちがブラウザでページを見るとき、ブラウザはページに必要なファイルをサーバーからダウンロードしています。
ただファイルの読み込みは時間がかかり、読み込むデータ量が多くなればなるほどページの表示速度はどんどん遅くなってしまいます。
そこでその通信量を減らすのに有効なのがgizp圧縮を有効にすることです。
圧縮というとzipが有名ですが、gzipもその圧縮形式の１つで次のような特徴を持っています。
- 完全に元に戻せる(可逆圧縮)
- 圧縮率が高くデータをかなり小さくできる
- データを元に戻す処理が高速
普通圧縮率が高いとデータを戻すまでにかかる時間も長くなりますが、gzipはデータを小さくできる上に元に戻すのにも時間があまりかからないという優れものです。
そのためサーバー側でgzip圧縮を有効にすると次のようなメリットがあります。
- ページ表示が高速になる
gzipで圧縮してファイル配信することで送信するデータ量が減ってページ表示速度が高速化します。
- 転送量の削減
転送量はレンタルサーバーでは転送できるデータ量の上限のことで、gzip圧縮を有効にすることで転送量の節約にもなります。
ページ表示が高速になる上に転送量まで減る・・・いいこと尽くしですね。
サーバーでgzip圧縮を有効にする方法については次の記事で解説してあります。
設定方法も手順通りにやればそれほど難しくないので、WordPressを高速化したいならまず最初に設定しておきましょう。かなり効果があると思います。
３．ブラウザキャッシュの有効期限を伸ばす
ブラウザではページを表示するために一度ダウンロードしたファイルをブラウザ側に保存しておいて次回アクセス時にそれを使って表示速度を速める機能があります。
このブラウザ側に保存されるファイルのことを「キャッシュ(cache)」と呼んでいます。
保存されるファイルは例えば・・・
- png、jpeg、gifなどの画像ファイル
- css・jsファイル
- その他のファイル
・・・などなど様々です。
キャッシュを利用すればこれらのファイルを毎回読みに行かずに済みます。
ただしキャッシュファイルには１日や３日などの有効期限があって、それを過ぎると自動的にブラウザ側で破棄されます。そしてまたサーバーからファイルを取りに行かなくてはならなくなるので有効期限はなるべく長くした方がいいでしょう。
そのキャッシュの有効期限を長く設定する方法については次の記事で紹介してあります。
これもgzip圧縮同様サーバー側で設定が必要ですが、正しい手順を踏めばそれほど難しいことではないので試してみてください。
４．画像をプラグインで圧縮する
画像というのはサイズがでかい分、読み込みに時間のかかるファイルです。
なので画像を大量に使っているブログやサイトの場合は画像を圧縮してデータ量を減らした方が表示速度の改善につながるかもしれません。
WordPressには画像を圧縮してくれる便利なプラグインがいくつかありますが、その中でも特におススメなのは次の３つです。
- EWWW Image Optimizer
- Compress JPEG & PNG images(TinyPng)
- WP Smush
この３つの使い方や使いやすさ・圧縮率については次の記事で比較してあります。
おススメなのはEWWWかTinyPNGのどちらかで、特に優秀なのがTinyPNGです。その理由については記事内で詳しく解説してあるので是非見てください。
５．使っていないプラグインの停止
WordPressを使っているとついつい余計なプラグインを入れたくなりますよね。
しかし一切使っていないプラグインを有効にしたままにするとサイトのパフォーマンス低下につながるので使用していないものは必ず無効化しましょう。
一応無効化させる方法を説明すると手順は次の通り。
まずメニューから「プラグイン」ー＞「インストール済みプラグイン」を開きます。
インストール済みプラグインの一覧画面を開いたら停止したいプラグインにチェックを入れ、次の図のように「一括操作」の中から「停止」を選び、適用ボタンを押しましょう。
これで使用していないプラグインを停止できます。
もし使っていない無駄なプラグインを見つけたらどんどん無効化していきましょう。
また次の記事で紹介したように特定のページでしかプラグインを使わないならそのページでだけ読み込みさせるという手もあります。
もし局所的にしか使わないけど必要なプラグインがあるならこの方法も試してみてください。
そしてあまりにも余計なプラグインが多すぎるならインストールする前に次のことを考える習慣づけをしておくといいかもしれません。
- 本当にそのプラグインで自分のやりたいことができるのか
- WordPressやテーマにそのプラグインの代わりになる機能はないか
- そのプラグインを有効化してサイトが重くならないか
プラグインは便利なのでついついあれもこれもとインストールしてしまいがちです。
でも必要なプラグインは限られてくるので、インストールする前に「本当にそれって必要？」と考えるクセをつけると余計なプラグインが増えにくくなると思います。
６．レンダリングをブロックするスクリプトの除去
WordPressではページを読み込むときに表示の負荷になるような次のスクリプトファイルやコードが一斉に読み込まれます。
- WordPress本体で使用しているスクリプトファイル(jQueryなど)
- テーマやブラグインなどで使われるスクリプトファイル
- 独自にページ内に埋め込んだスクリプトコード
これらのファイルやコードがヘッダー部分(headタグの間)で読み込まれるとその間ブラウザではページの表示を一時定期にストップしなくてはなりません。
その結果ページを表示するのに時間がかかってしまいます。
それを解決する１つの方法がWordPressで読み込まれるスクリプトファイルをヘッダ部分ではなく、フッター部分で読み込むまたはそもそも読み込ませないことです。
その方法については次の記事で解説してあります。
テーマのPHPファイルを編集しなくてはならないので少し難易度は高くなりますが、基本的にコピペでOKなのでもっと高速化させたいという場合はこの方法も試してみてください。
高速化におススメのレンタルサーバー
ここまでで様々な高速化のテクニックについて紹介しました。
もしページ表示速度が遅いならここまでのテクニックを使えば間違いなく高速化できます。
ただページの表示速度というのは使っているレンタルサーバーのスペックで大きく異なるので、スペックの高いサーバーに乗り換えるのが一番手っ取り早い高速化の手段です。
そしてもし本格的にサイトやブログを運営しようと思っているなら極力無料レンタルサーバーは使わないようにしましょう。
無料というと良さそうに聞こえますがスペックなどが犠牲になるなら初めから有料レンタルサーバーを選ぶのが賢い選択です。
特にスペックが高くWP高速化に力を入れているのが次の３つのレンタルサーバー
この３つが使いやすい上にWordPress高速化に最適です。
高速化に適している理由や特長については次の記事で詳しくまとめたのでそちらをどうぞ
WordPressを高速化するなら土台となるサーバー選びがまず重要なので慎重に選びましょう。
まとめ
ここで紹介したWordPress高速化のテクニックをもう一度まとめると次の通り
- PHPのバージョンアップ
- gzip圧縮の有効化
- ブラウザのキャッシュの活用
- 記事内に使われる画像の圧縮
- 余計なプラグインを停止させる
- レンダリングをブロックするスクリプトの移動
もし何をすればいいか分からないならこの６つだけは試してみるとページ表示速度が見違えるほど変わると思います。
以上ここではWordPress高速化のための対策をまとめました。やるとやらないでは大違いなので表示速度を少しでも上げたいなら是非お試しください。
The post WordPress高速化のために最低限すべき６つのこと【2024年最新】 first appeared on Fukuro Press.
]]>The post WordPressの「遅い」を解決！特定ページでだけプラグインを読み込む方法 first appeared on Fukuro Press.
]]>
WordPress表示速度が重くなる原因の１つが プラグインの読み込みすぎ
特に重いプラグインは表示速度に悪影響なので、不必要なものは停止した方がいいです。
とはいえ一部ページでは使っているから、停止できないプラグインも当然あります。
そこで便利なのが Plugin Load Filter というプラグイン
ここでは 特定のページのみ特定プラグインを有効化する方法 を解説します。
Plugin Load Filter のインストール
最初にするのは「Plugin Load Filter」をインストール＆有効化
その手順は次の通りです。
まずメニューから「プラグイン」ー＞「新規追加」をクリック
新規追加画面が開いたらプラグインの検索欄に「plugin load filter」と入力
しばらくすると検索結果の一番上に次のプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしましょう。
ちなみに手動インストールする場合は、次からダウンロードも可。
https://ja.wordpress.org/plugins/plugin-load-filter/
インストールが終わったら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、それを押すのもお忘れなく・・・
これでプラグインの導入は完了です。
特定ページでだけプラグインを読み込ませる方法
では次にこのプラグインを使って特定ページでプラグインをロードさせる方法を紹介します。
その手順を簡単に説明すると ↓次の通り
- プラグインロードフィルタの登録
- プラグインでフィルタを有効にする
- 投稿ページでプラグインを有効化・無効化
この３つの手順について詳しく説明していきます。
１．プラグインロードフィルターの登録
まず「プラグインロードフィルター」というものを使い、
それぞれのプラグインの有効化・無効化の設定を行います。
その設定のやり方は次の手順。
まずメニューから「プラグイン」ー＞「Plugin Load Filter」をオープン
開くと次画像のような「プラグインロードフィルター設定」という画面が現れます。
この中でどのプラグインをフィルターの対象にするかが選べます。
上の画像では「エキスパート用URLフィルター」項目がありますが、
特別な場合を除いてはほとんど使わないから無視して構いません。
フィルター設定を行うのに必要なのは、次の「Page Type フィルター」です。
この画像みたいに３つの列が並んでいて、
フィルターの種類によってどれか１つを選択できるようになっています。
そして３つの各フィルターはそれぞれ次のような設定。
- Normal Mode
全くフィルターをかけずにプラグインを通常通りにロードする設定
- Admin Page
管理画面だけでプラグインをロードする設定
- Page Type
個別の投稿ページでロードするかしないかを決められる設定
フィルターをかけるには「Admin Page」または「Page Type」のどちらかを選びます。
自分のケースだと 投稿ごとにプラグイン有効化したかったので、
次のように「Page Type」を選択してみました。
あとはこの手順をプラグインごとに設定していけばOK
↓ 実際に Page Type フィルタ を設定している様子
設定が終わったらプラグイン画面下の「フィルター登録」をクリック。
これでフィルターの設定は完了です。
２．各プラグインでフィルター有効にする
次に「Page Type フィルター」を指定したプラグインに対して・・・
どの種類のページでロードするか設定していきます。
まず今開いているプラグイン画面から、
「Page Type フィルタ有効プラグイン選択」と書かれたタブをオープン。
このタブを開くと次のような画面が現れます。
そしてプラグインをどのページでだけロードするのか、
上列にある「Desktop」「Mobile」「Page」「Post」からチェックして選択
選択ページでのみプラグインが読み込まれ、それ以外ではロードされなくなります。
この設定画面でプラグイン有効・無効を設定できるページタイプは次の通り。
- Desktop
パソコンで開かれたページ
- Mobile
モバイル(スマホやタブレットなど)で開かれたページ
- Home
サイトのトップページ
- Archives
カテゴリーページやタグページなどのまとめページ
- Search
検索ウィジェットで開かれる検索結果のページ
- Page
固定ページ
- Post
投稿ページ
このページタイプを選ぶことでスマホでだけプラグインをロードさせたり、ブログのホームページでしか使わないプラグインを他のページではロードさせない、などの使い方ができます。
ただし！
ここでは投稿ページごとに切り替えをしたいので、
次画像のように「Post」は選択しないようにしてください。
以上の設定が済んだら「有効化プラグイン登録」ボタンを押して登録。
これでプラグインに対してフィルターが有効になりました。
３．投稿ページごとに有効化設定
今までの設定だと全ページでプラグイン読み込みされません。
次は 特定ページのみプラグイン有効化する設定 が必要です。
その手順ですが、まずロードを有効にしたい投稿ページの編集画面を開きます。
開いたら投稿画面から「Page Filter プラグイン」を表示された項目を探してください。
↓ Page Filter プラグイン の設定項目
この設定項目からPC or モバイルでプラグイン有効化するかを設定できます。
もし今編集しているページでプラグインをロードするなら、
次のように「Desktop」「Mobile」の下のチェックボックスをONすればOK
これで投稿を保存すればそのページでだけプラグインがロードされるようになります。
１つ１つプラグインのロードを決められるから、ブログの高速化に役立つかもです。
ただし、このプラグインは１つ残念な所があって・・・
プラグイン有効にするページをまとめ指定できないこと
記事数がある程度多いと設定が少し大変かもしれません。
ですが、少しでもブログ高速化したいなら、使ってみる価値はありますね。
もっとページ表示速度 高速化するには・・・
ページ表示速度を下げるのはプラグインが原因になることが多いです。
なのでプラグインを使わないページで読み込ませないことでページ表示速度の改善につながることでしょう。
しかしさらに表示速度を改善するなら次のWordPress高速化設定が有効です。
もしこれらの設定をしていないなら高速化のために絶対にしておきましょう。
↓ 詳しくは次記事でやり方をまとめたのでチェック
この記事に書いたことを実践するだけでも表示速度が見違えるほど改善するはずです。
最後に…プラグイン入れ過ぎに気を付けよう
最後に・・・
プラグインは表示速度低下の原因になりやすいから 本当に注意です。
次記事でも書いたように、
インストール前に本当に必要なのか考えることをオススメします。
以上、WPで個別ページごとにプラグイン有効化する方法でした
The post WordPressの「遅い」を解決！特定ページでだけプラグインを読み込む方法 first appeared on Fukuro Press.
]]>The post WordPressをAMP化させるプラグインの導入手順を解説 first appeared on Fukuro Press.
]]>
Googleはモバイルでの表示速度をページの評価基準に含めると公表しています。
昔は評価基準はコンテンツの質などが主に評価されていましたが、これからはユーザー数の多いスマホにとって快適なページであることも評価の対象になっていくでしょう。
ただモバイルでの表示速度が大事と言われても全て自分で設定を行っていくのは気の遠くなるような話ですよね・・・
そこで簡単にモバイル高速化のために考えられたWebページの規格が「AMP」です。
これはGoogleなどが開発したWebページの規格のことでWordPressなら「AMP for WP」プラグインを使うことでとても簡単にAMP化させることが可能です。
やり方はとても簡単なので、ここではそのプラグインを使ってサイトやブログを完全にAMP対応させる方法について紹介します。
AMPとは？
まずAMPとは「Accelerated Mobile Pages」の略でモバイルでの高速表示に対応した規格のことです。
「AMP？何それ聞いたことない・・・」という人でも実はスマホで情報を検索したことがあるならほぼ間違いなくAMP対応のページを見たことがあるはずです。
例えばスマホで「天気」などと検索したとき、次の画像のように右上に雷マークが表示されたページを見たことはありませんか？
これがAMP化されたページです。
そしてこのページを開いてみると次の画像のように装飾が極限まで省かれたとてもシンプルなページが表示されます。
このようにAMPというのは既にモバイルでよく見かけるページになっています。
そしてこのようなページを見かけたら表示速度に注目してみてください。
恐らく初回読み込み時でも驚くくらい早く表示されるはずです。遅くても１～２秒、早ければ一瞬で表示されると思います。
ではなぜこれだけ速く表示できるかというと次のような仕組みで極限までページの読み込み速度を最適化しているからです。
- 独自HTMLの使用
一部のタグが使えないなどの制約を加えた「AMP HTML」という独自のHTML規格が使用されています。
- 使用可能なCSSの制限
パフォーマンスを向上させるために負荷がかかるようなアニメーションなどのCSSも制限されています。
- JavaScriptは原則使用禁止
スクリプトはAMPで定められたもの以外は基本的に実行禁止です。
- 外部スクリプトの読み込みも禁止
JavaScriptコードは基本的にページ内に書かれていなくてはならず、外部ファイルから読み込むといったこともできません。
- Googleにページがキャッシュされる
AMP化されたページは「Google AMP Cache」という仕組みでGoogleの所有しているサーバーに自動的にキャッシュされます。
表示の妨げになるCSS・JavaScriptを厳しく制限して極限まで表示速度を速くする・・・これがAMPが高速に表示される仕組みです。
そしてAMP化されたページは先ほど画像で表示したようにGoogleの検索結果ページに画像つきで表示されます。
SEO的に評価されているわけではないですが、AMP化したページを画像つきでトップに一覧表示するほどGoogleはAMPに力を入れてるということです。
AMP化のデメリットも知っておこう
ここではAMP化するために「AMP for WP」というプラグインを使います。
それを使えば誰でも簡単にWordPressをAMPにすることができるのですが、導入する前に一度自分のブログで本当にAMP化する必要があるのかどうか考えてください。
なぜならAMP化には次のようなデメリットもあるからです。
- テーマが使用不可になる
- プラグインも使用不可に
- 掲載できる広告が大幅に制限される
テーマやプラグインもほとんどが使用できない状態になる上にブログを収益化にはAdsenseやAMP対応している広告しか利用できなくなります。
より詳しいメリットとデメリットについては次の記事でまとめてあります。
この記事で紹介したデメリットより導入するメリットの方が大きいと判断した場合だけAMP化することをおすすめします。
AMP for WPの導入
では「AMP for WP」をインストール・有効化してページをAMP化させる方法をここからは紹介していきます。
その手順は次の通り
まずメニューから「プラグイン」ー＞「新規追加」を開いてください。
新規追加画面を開いたらプラグインの検索欄に「amp for wp」というキーワードを入力すると検索結果の一番上に次のようなプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしましょう。
またこのプラグインは次のページから直接ダウンロードも可能です。
https://ja.wordpress.org/plugins/accelerated-mobile-pages/
インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので必ずそれを押して有効化しておきましょう。
これだけでモバイルで表示したときのページがAMP化されます。
ただし、AMP化されたページをPCから確認するには少し特殊な方法が必要です。
例えばChromeを使っているなら次の記事で紹介したように開発者ツールを使えばモバイルでの表示方法も確認できます。
ですが実際にAMP化したページを開いてみると普通のページが表示されてしまいます。
ではそうすればPCでAMPを確認できるかというと確認したいページのURLに次のように「amp」をつけてアクセスしてください。
https://xxx.com/?post=1234/amp
そうすると次の画像のようにPCでもAMP化されたページを確認可能です。
こういう風に、PCでAMP化されたページを見るときは必ず「amp」をつけてからアクセスするようにしましょう。
AMP for WPで最初にしておくべき設定
「AMP for WP」は一発でAMP化できて便利ですが、テーマやプラグインはほぼすべて使えなくなるのでデザインや機能が大幅に削除されます。
そこでAMP化前の状態に少しでも近づけるために最低限次のことはやっておいた方がいいかもしれません。
- モバイルメニューの表示設定
- ヘッダー・メニューの設定
- 記事最初のアイキャッチの設定
- プロフィールを追加
- アナリティクスのトラッキングコードの設定
これらの設定手順について順に紹介していきます。
モバイルメニューの表示設定
まずはハンバーガーボタンをタッチしたときに表示されるモバイルメニューの設定をします。
ハンバーガーメニューとはモバイルページのヘッダー部分に表示される「三」マークのようなボタンのことで、ハンバーガーにも似ているためそう呼ばれています。
そしてこのボタンをタッチすると次のように左にサイドバーのようなものが表示されます。
しかし初期状態ではこの画像のようにカテゴリなどのメニューは表示されません。
ではここにメニューを表示してみましょう。
やり方は簡単でまずWordPressメニューから「外観」ー＞「メニュー」を選んで開きます。
開いたら次の画像のように「メニュー設定」の中にある「AMP Menu」にチェックを入れて設定を保存しましょう。
この設定を有効にすると次のようにハンバーガーボタンを開いたときにカテゴリなどが含まれたメニューが表示されるようになります。
記事内のアイキャッチの設定
「AMP for WP」は便利なプラグインですが、少しおせっかいな機能も付いています。
それは次みたいに、記事の最初にアイキャッチ画像がでかでかと表示されること
人によってはこの機能も便利かもしですが「記事内ではアイキャッチは別に設定したい」、という場合はこの機能は無効にすることをおすすめします。
その方法ですがまずメニューから「AMP」ー＞「Settings」をクリックして開きます。
開くと次のようなAMPの設定画面が表示されます。
この画面で左のメニューから「DESIGN」ー＞「Single」と書かれた項目を開きましょう。
その設定ページが開いたらその中に「Single Elements」ー＞「Featured Image」がオンになっていると思います。
これを次のようにオフに変更しましょう。
あとは設定を保存すれば、勝手に挿入されるアイキャッチは表示されなくなります。
もし記事内で独自にアイキャッチ画像を設定しているならアイキャッチ画像の自動設定は無効にしておいたほうがいいと思います。
プロフィールの表示
サイトやブログ内ではプロフィールを表示することが多いと思います。
例えば次の記事で紹介したようにウィジェットを使ってサイドバーなどに自己紹介を載せている場合もあるかもしれません。
ところがAMP化するとウィジェットが使えなくなるのでプロフィールも表示されなくなってしまいます。
ですがこのプロフィールはウィジェットを使わなくても次の手順で表示できるので安心してください。
まずメニューから「ユーザー」ー＞「あなたのプロフィール」を開きましょう。
開いたら設定画面の中に「プロフィール情報」の横に入力エリアがあるのでそこに簡単な自己紹介を記入しましょう。
上の画像のようにプロフィールにはタグも使用できるのでTwitterへのリンクなども表示可能です。
設定を保存したら適当なページを開いてみてください。
次のように記事の最後にプロフィールが表示されるようになったはずです。
ちなみにこのプロフィールの横に表示されている画像はWordPressからは変更できません。
変更するには次の記事で紹介したようにGavatarというサービスを使ってアバター画像を設定する必要があります。
設定はそんなに難しくはないので、もしアバター画像を設定していないならこの機会に設定しておくといいかもしれませんね。
アナリティクスの設定
もしアナリティクスでアクセス分析をしているならトラッキングコードの再設定も必要になります。
では再設定を行うためにまずメニューから「AMP」ー＞「Settings」をクリックして開きましょう。
そして設定画面左のメニューから「SETTINGS」ー＞「Analytics」を開いてください。
このメニューを開くと「Google Tag Manager」という項目がオンになっているので、まずはそれをオフにします。
オフにすると次のように「Google Analytics」という項目が現れるので下の画像のオレンジ色の枠で囲ったテキスト欄にアナリティクスで使っているトラッキングIDを入力しましょう。
もし「このトラッキングIDが分からない！」、というなら次の方法で調べるられます。
その調べ方ですが、まず Googleアナリティクス にログイン
そして、次画像で示した「管理」という項目を左のメニューから開きましょう。
管理画面を開いたら「プロパティ」から「トラッキング情報」をクリックして展開してください。
すると次のようにメニューが展開されるので、その中から「トラッキングコード」をクリックして開きます。
開くと次の画像のように「トラッキング ID」の下に「UA-XXXXX-X」という形式でIDが表示されています。
このIDをコピーし、先ほどの設定画面で入力すればアナリティクスの設定は完了です。
まとめ
ここまでWordPressをAMP化させる方法について紹介しましたが、プラグインを使えば専門的な知識が無くても誰でも対応させることが可能です。
ただしAMP化することでテーマやプラグインは全て使えなくなる点には注意が必要です。本当にがAMP化が必要かどうかを考えてからプラグインを導入するようにしましょう。
以上、 AMP for WP を使ってWordPressをAMP対応させる方法についてでした。
The post WordPressをAMP化させるプラグインの導入手順を解説 first appeared on Fukuro Press.
]]>The post WordPressでレンダリングを妨げるjavascriptを削除・移動させるには first appeared on Fukuro Press.
]]>
PageSpeed Insightsでページ表示速度を測った時、「レンダリングをブロックしている JavaScript/CSSを除去する」が表示されたことないですか？
恐らくWordPressを使っているなら、この提案を一度は目にしているはずです。そしてこの項目が改善されず困っている人もいるかもしれません。
「レンダリングをブロックするJavaScript/CSSを除去」は改善が難しいです。
でもWordPressを使っているなら、プラグイン・テーマのJavaScript読み込み位置を変えることでこの問題が解消することがあります。
そこで、「レンダリングをブロック」を解決する方法 をまとめました。
「レンダリングをブロック」の意味
PageSpeed Insightsはページ表示速度を0~100でスコア化してくれる便利ツールです。
そしてこのツールはスコア化だけでなく改善案も提案してくれるのですが、次のように「レンダリングをブロックしているJavaScript/CSSを除去する」という提案を見かけることは多いと思います。
これはページ表示速度について javascript・CSSファイルの読み込み位置を工夫すればもっと速くなるよ という意味の提案です。
つまりファーストビューで必要のないファイル。
それらは ページ表示が終わった後に読み込めばいい だけです。
ではページを開いたときに最初に読み込まれてしまうjavascriptやCSSとは何かというと、WordPressでは次のファイルのことを指します。
- jQuery（jquery.min.js）
- WordPress共通のjavascript
- テーマで使われるJS・CSSファイル
- プラグインで使われるJS・CSSファイル
- 独自に定義したJS・CSSファイル
- どの他インライン化されたJS・CSSコード
これらJavaScriptファイルはページ表示後に後読みも可能なんです。
その具体的な対策を２パートに分けて紹介していきます。
対策１．jQueryなどのスクリプトをフッターに移動
まずは１つめの対策から。
jQueryなどのスクリプトをヘッダー部分ではなく、
フッター部分(最後当たり)で読み込ませる方法を紹介します。
その手順については次の通り
まずメニューから「外観」ー＞「テーマの編集」を開きます。
テーマの編集画面が開くので、今使っているテーマの「functions.php」というファイルを探して開いてください。
そしてfunctions.phpを開いたらファイルの最後に次のコードを追加します。
// ヘッダーで読み込まれるスクリプトをフッターに移動
function my_init_action() {
remove_action('wp_head','wp_print_head_scripts',9);
add_action('wp_footer','wp_print_head_scripts',5);
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles' );
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
}
add_action('init','my_init_action');追加したら「ファイルを更新」を押して内容を保存してください。
コードについては詳しくは解説しませんが、このコードでスクリプトの読み込みを次のように制御しています。
- jQueryの読み込み位置をヘッダーからフッターへ変更(３～４行目)
- 絵文字を画像にするスクリプト・スタイルを無効化(６～８行目)
- WordPressの余計なスクリプトを停止(１０～１３行目)
他にも読み込み位置を変えたり、停止させることができるスクリプトはありますが、影響を少なくするために変更は最低限だけにしています。
これでjQueryの読み込みがフッターで行われ、不必要なスクリプトも実行されません。大幅ではないものの少しだけ表示速度も改善されるはずです。
対策２．JavaScript読込のscriptタグにdeferを付ける
２つ目はもっと効果的な対策です。
普通はページ表示前に色々なJavaScriptが読み込まれるのですが、scriptタグに defer="defer"を付けること で高速読込 できます。
↓ defer属性について超分かりやすい記事。
参考記事 : <script> タグに async / defer を付けた場合のタイミング
ここでは説明を省き、WPで defer="defer" を付ける方法だけ紹介します。
そのやり方は次の２ステップ。
１．各JavaScriptの登録ハンドル名を調べる
まず大前提として・・・
- プラグインから読込されるJSファイル
- テーマから読み込みされるJSファイル
- WordPressで読込される必須JSファイル
これらには 固有のハンドル名 が付いてます。
※ 例 : jQuery なら "jquery" がハンドル名
このハンドル名がdefer属性付与に必須なので、
次のようなPHPスクリプトでハンドル名を調べてください。
/// 全登録スクリプトのハンドル名を調べる
function my_inspect_scripts() {
if (!is_user_logged_in()) { return; }
global $wp_scripts;
$handles = array();
foreach ( $wp_scripts->queue as $handle ) {
array_push($handles, $handle);
}
echo implode(' , ', $handles);
}
add_action( 'wp_print_scripts', 'my_inspect_scripts' );テーマの functions.php に追加すればOK
自分の環境では、こういう出力になりました。
jquery , comment-reply , simplicity-js , simplicity-child-js , pt-cv-content-views-script , cookie-law-info-script , drawit-iframe-js , ts_fab_js , toc-front , wpp-js , wpdreams-ajaxsearchlite , q2w3_fixed_widget , jquery-fancybox , jquery-easing , lazysizes , lazysizes-unveilhooks , lazysizes-aspectratio , prism-script , wp-embed , wp_rp_edit_related_posts_js , quicktags_drawit
各ハンドル名がコンマで区切られてますよね？
これらがプラグイン・テーマのJSハンドル名です。
あと調べ終わったら、追加コードは消してください。
２．各プラグインのJS読込にdefer="defer"を付与
ここからが肝心な所。
調べたハンドル名を使い、各プラグイン・テーマのJavaScriptファイル読込scriptタグに対して defer="defer" を付与していきます。
そのためのコード例が次です。
/// 特定プラグインのscriptタグにdefer="defer"を追加
add_filter('script_loader_tag', 'my_add_defer_to_script', 10, 2);
function my_add_defer_to_script($tag, $handle) {
$scripts_to_defer = array(
'wpdreams-ajaxsearchlite',
'cookie-law-info-script',
'pt-cv-content-views-script',
'drawit-iframe-js',
'toc-front'
/// ハンドル名が続く...
);
foreach($scripts_to_defer as $defer_script) {
if ($defer_script === $handle) {
return str_replace(
' src', ' defer="defer" src', $tag);
}
}
return $tag;
}ハイライトした部分に注目！
ココは先ほど調べたハンドル名に置き換えてください。
これでかなりの速度改善が期待できるはず。
当ブログもこの対策で表示速度が大幅アップしました。
※ ただしPHPコードの追加は慎重に・・・
もし不安なら次サービスで相談も受け付けてます。
ちなみに作業代行のご依頼もＯＫ。
いつでもお気軽に何でもご相談ください。
WordPressをさらに高速化するには
今紹介した方法はWP高速化にかなり効果があります。
しかし、もっとWordPressを高速化したいなら次の方法もかなり有効です。
（特に PHPのバージョンアップ と gzip圧縮の有効化 ）
これらの詳しいやり方については次の記事でもまとめて紹介しました。
設定方法も手順通りにやれば全く難しくないので是非お試しあれ
また、ページ表示速度というのは使用するレンタルサーバーにも左右されます。
私自身の経験から言えば、無料サーバーは極力使わない方がいいですね。次記事でも書いたみたいに無料サーバーでヒヤッとする体験をしたこともあります。
実際の体験談 : ブログ運営を無料サーバーでするリスクを痛感した２つの恐怖体験
なので長くブログを続けるならWordPressに特化したサーバーを選ぶ方が後々のブログ運営が楽になります。
ちなみに手ごろな価格で始めるなら さくらサーバー または ロリポップ 、
速度重視なら wpxサーバー または エックスサーバー が最適です。
何が最適なのかはブログの運営規模で変わるので、そこは良く吟味してください。
まとめ
WordPressではjQueryなどのスクリプトがヘッダーで読み込まれるのでそれをフッターで後読みすれば少しは速度改善が見込めると思います。
以上、レンダリングを妨げるスクリプトを削除・移動させる方法についてでした。
The post WordPressでレンダリングを妨げるjavascriptを削除・移動させるには first appeared on Fukuro Press.
]]>