こんにちは。SHINです♪
先日こんなトラブルが発生しました・・・。
多数記事がある中、1つの記事だけ表示速度が異常に遅い！という問題。初体験だったのでパニック。。。
「表示速度が遅い」というのは、記事でいう死活問題です。良質な記事も、表示速度が遅いだけで誰にも読まれないお蔵入り記事になりかねません。早く原因を究明せねば！と試行錯誤したお話です。
もう一度。多数記事がある中で、特定の記事だけ表示速度が遅いというトラブルを解決した内容ですので、同じトラブルに遭遇した人は参考になさってみてください。
こんな方におすすめ
- 特定の記事だけ表示速度が遅いというトラブルの原因を知りたい！
- 表示速度を改善する2つの方法を知りたい！
表示速度が遅いページを解析
というわけで、冷静になってこのページの分析をするべく表示速度測定サイトを利用します。
ウェブ検索していきながら、無料で測定できるサイトはたくさん見つけましたけど、一番参考になれるサイトはやっぱりGoogle運営のPageSpeed Insightsでした。あらゆる視点で「表示速度最適化」について提案してくれました。
そこで、この特定ページだけ「なぜ表示速度が遅いのか」の原因と対策を表示してくれました。ドーン！
一番遅くしている原因、それは「オフスクリーン画像の遅延読み込み」という問題。
参考
オフスクリーン画像とは、画面上にまだ表示されていない画像のこと。そこでページを表示する際、この画面上に表示されていない画像までリソース（読み込み）しないようにしましょう。ということでした・・・。
もっと簡単に言うと、パソコン上ならスクロール、スマホならスワイプしてページを下層まで進めていきますよね。そこで画像表示箇所に到達するまで読み込まないようにすれば、表示速度が改善されますよと・・おっしゃってくれました。
ってなわけで、このページ表示設定をするにはどうしたらいいのか・・必死で調べたところ、対策できる2つの方法を見つけました！
ページをオフスクリーン画像にする2つの方法
テーマAFFINGER5での設定
AFFINGER5には、このオフスクリーン画像にする設定が実装されていました。さすがです♪
WPプラグイン「Lazy Load」をインストール
WordPressテーマがAFFINGER5じゃなくても大丈夫。プラグインを使ってページをオフスクリーン画像に出来ます。
まとめ
今回は、僕が「ある特定のページ表示速度が異常に遅い！」というトラブルから問題解決した話でした。
表示速度が遅いな・・・と思ったら
step
1表示速度計測サイト「PageSpeed Insights」で原因を究明する。
step
2オフスクリーン画像遅延読み込みが原因なら「フェードイン設定」もしくはプラグイン「Lazy Load」を活用する。
まだまだ表示速度を改善するべき内容がありましたが、この設定のおかげでかなり表示速度は改善されました。
またトラブルに遭遇したら共有していきますね♪
ではまた(｡´∀`)ﾉﾞ
表示速度対策記事
-
ソースコードHTML、CSS、JavaScriptを最適化し表示速度を上げるプラグイン『Autoptimize』
こんにちは。SHINです♪ 「サイトの表示速度が遅いわ・・・イラっとする！」ってことありませんか？ それが自分のサイトだとしたら・・恐ろしい限りですよね。ページをクルクル読み込んでいる間 ...
続きを見る
-
GIFを手軽で最大に圧縮軽量化させる無料オンラインツール3選
こんにちは。WordPressテーマ研究家のSHINです。 今回"無料でGIF（アニメーション）を圧縮するソフト"を使いまくって調べた結果、一番使いやすいツールを3つに厳選しました。 ポ ...
続きを見る
-
JPEG、PNG画像を圧縮最適化するツールは「Website Planet」が最強！
こんにちは。WordPressテーマ研究家SHINです。 ブログなどWebサイトを運営していると、必ず使うのが「画像」です。この画像、圧縮せずに記事などにそのまま使ってしまうと・・とんでもなく表示速度 ...
続きを見る
