ノウハウ情報

特定ページだけ表示速度が遅い!原因調査と2つの解決方法とは?

更新日:

特定ページだけ表示速度が遅い!考えられる原因と2つの解決方法とは?

こんにちは。SHINです♪

 

先日こんなトラブルが発生しました・・・。

多数記事がある中、1つの記事だけ表示速度が異常に遅い!という問題。初体験だったのでパニック。。。

 

「表示速度が遅い」というのは、記事でいう死活問題です。良質な記事も、表示速度が遅いだけで誰にも読まれないお蔵入り記事になりかねません。早く原因を究明せねば!と試行錯誤したお話です。

 

もう一度。多数記事がある中で、特定の記事だけ表示速度が遅いというトラブルを解決した内容ですので、同じトラブルに遭遇した人は参考になさってみてください。

こんな方におすすめ

  • 特定の記事だけ表示速度が遅いというトラブルの原因を知りたい!
  • 表示速度を改善する2つの方法を知りたい!

 

表示速度が遅いページを解析

SHIN
他の記事は読み込み速いのに、なんでこの記事だけ異常に遅いの!??

というわけで、冷静になってこのページの分析をするべく表示速度測定サイトを利用します。

ウェブ検索していきながら、無料で測定できるサイトはたくさん見つけましたけど、一番参考になれるサイトはやっぱりGoogle運営のPageSpeed Insightsでした。あらゆる視点で「表示速度最適化」について提案してくれました。

pagespeedinsights

PageSpeed Insights

 

そこで、この特定ページだけ「なぜ表示速度が遅いのか」の原因と対策を表示してくれました。ドーン!

PageSpeed Insights1

一番遅くしている原因、それは「オフスクリーン画像の遅延読み込み」という問題。

SHIN
オフスクリーン画像って?・・・何!?

参考

オフスクリーン画像とは、画面上にまだ表示されていない画像のこと。そこでページを表示する際、この画面上に表示されていない画像までリソース(読み込み)しないようにしましょう。ということでした・・・。

 

もっと簡単に言うと、パソコン上ならスクロール、スマホならスワイプしてページを下層まで進めていきますよね。そこで画像表示箇所に到達するまで読み込まないようにすれば、表示速度が改善されますよと・・おっしゃってくれました。

 

SHIN
えっ・・でもどうしたらいいんかいな・・・
考えるな!感じろ!
あきら
SHIN
何を言うとんの?

 

ってなわけで、このページ表示設定をするにはどうしたらいいのか・・必死で調べたところ、対策できる2つの方法を見つけました!

 

ページをオフスクリーン画像にする2つの方法

テーマAFFINGER5での設定

AFFINGER5には、このオフスクリーン画像にする設定が実装されていました。さすがです♪

 

AFFINGER5,オフスクリーン画像設定1

SHIN
WordPressダッシュボードから「AFFINGER5 管理」>「その他」に進み、【記事タイトル】のカテゴリにある「記事エリアの画像表示をスクロールでフェードインする」にチェックをするだけ。これでオフスクリーン画像になります♪

 

WPプラグイン「Lazy Load」をインストール

WordPressテーマがAFFINGER5じゃなくても大丈夫。プラグインを使ってページをオフスクリーン画像に出来ます。

 

WPプラグイン,Laxy Load

SHIN
WordPressダッシュボードから「プラグイン」>「新規追加」で、キーワード枠に「Lazy Load」と入力してインストールして「有効化」します。このプラグインは細かい設定がないので、2クリックで設定完了です♪

 

まとめ

今回は、僕が「ある特定のページ表示速度が異常に遅い!」というトラブルから問題解決した話でした。

 

表示速度が遅いな・・・と思ったら

step
1
表示速度計測サイト「PageSpeed Insights」で原因を究明する。

step
2
オフスクリーン画像遅延読み込みが原因なら「フェードイン設定」もしくはプラグイン「Lazy Load」を活用する。

 

まだまだ表示速度を改善するべき内容がありましたが、この設定のおかげでかなり表示速度は改善されました。

またトラブルに遭遇したら共有していきますね♪

ではまた(。´∀`)ノ゙

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-ノウハウ情報
-

Copyright© WordPress theme NAVI , 2019 All Rights Reserved.