モバイルフレンドリーのチェック
もうすぐ検索時の評価にそのサイトがモバイルフレンドリーか否かが考慮されるようになるという話しもあり、こちらのブログでもアクセスする際に問題がないことをチェックしてみました。確かにアクセス解析をしてみると、こちらのサイトにアクセスする人の半数以上はタブレットかスマホです。スマホなどからアクセスしてもブログの記事が読みやすいモバイルフレンドリーか否かは非常に大きな要素になってきました。まずはモバイルフレンドリーであるか否かはこちらでチェックをすることができます。
☆モバイル フレンドリー テスト
こちらのブログはWORDPRESSというブログシステムにStingerというテーマを適用しているのですが、テーマ自体がモバイルを意識する構造になっており、結果は問題ありませんでした。
ページの読み込み時間
続いて、ページの読み込み時間に問題がないことを確認してみました。
☆PageSpeed Insights
こちらは残念ながら問題点がたくさん出てきました。モバイルの点数は特に悪く、100点満点のところ50点にしかなりませんでした。赤、黄色、緑の三色があるのですが、赤表示です。
何が問題かを教えてくれますので、一つ一つクリアーしていく必要があります。
SNSのコードを非同期にする
最初にSNSのコードを非同期のものに差し替えるように警告が出ています。TWITTER、facebook、はてななど、一つ一つのSNSサイトに行って非同期コードをとってきても良いのですが手間がかかりますので、一括してコードを紹介してくれているサイトの情報を使わせていただくことにしました。こちらのサイトが参考になりました。
☆複数のソーシャルボタンのjavascriptをまとめてコードをスッキリさせ更に高速化を図る – WEB帳
レンダリングをブロックしているJavaScript/CSSを排除
「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という警告に対しては、Autoptimizeというプラグインを利用しました。ほかに、「Head Cleaner」という定番プラグインがあるのですが、こちらのサイトではどうしても相性が悪いらしく表示が崩れてしまったので、Autoptimizeをはじめて使ってみました。こちらのサイトの説明が参考になりました。
☆Autoptimizeの設定と使い方｜HTML,CSS,JavaScriptを最適化するプラグイン | WordPressのアフィリエイトで稼ぐ人生を始める-サトシ
プラグインの削減
原因をたどっていくとプラグインで追加されたCSSやJavaScriptも多数が該当しています。そこで、利用頻度の低いプラグインや効果が今ひとつ判らないプラグインを全部削除してみることにしました。
特にずっと使ってきた、ALL IN ONE SEO PACKとJetPackについては削除したことに伴う副作用が発生しないか、今後の状況を観察していこうと思っています。
効果
ここまでの一連の作業で、PageSpeed Insightsのモバイルの結果が69点になりました。表示が赤色から黄色になりました。本当は緑色まで持って行きたいのですが、これ以上は私の技術では厳しそうな感じです。もう少しネットで情報がないか探しつつ、時間をかけて改善していこうと思います。
[amazonjs asin=”4844363298″ locale=”JP” title=”プロが選ぶ WordPress優良プラグイン事典”]
コメント