WordPress

「カスタムHTML」ウィジェットでモバイル表示スピードを30%高速化

投稿日:2017年8月5日 更新日:

WordPressに新しく「カスタムHTML」ウィジェットが加わりました。サイドバーの「テキスト」ウィジェットを「カスタムHTML」ウィジェットに変更したところモバイルでの表示スピードが30%(2秒)向上したのでシェアします。

 

sidebarspeed

 icon-arrow-circle-down 「モバイルサイトの速度テスト」はgoogleのこちらのツールで
https://testmysite.withgoogle.com/

 

「カスタムHTML」とは

WordPressのダッシュボードから「外観」>「ウィジェット」を選択すると、記事以外のサイドバー(以下、記事上下を含む)に挿入するコンテンツが選べます。

従来、任意の文言やhtmlを挿入するには「テキスト」ウィジェットが推奨されていました。「カスタムHTML」はそのhtml機能に特化し最適化されたウィジェットです。

「カスタムHTML」ウィジェットは「ウィジェット」画面の左下にあり、サイドバーの任意の位置にドラッグ、配置できます。

sidebarspeed04

 

現在、配置済みの従来の「テキスト」ウィジェットを変更しようとするとつぎのようなアラートが表示されます。

sidebarspeed00

sidebarspeed01

注目したいのはアラート中の「よりうまく動作するコードが含まれている可能性」という文言です。明らかに機能の向上が示唆されています。

そこで実際に試してみたところ、PC上での確認にとどまりますが、動作に驚くべき変化がありました。

 

画像表示を最適化

下の画像はAmazonアソシエイトの「商品検索ウィジェット」です。従来WordPressの「テキスト」ウィジェットにコードを貼りつけていたときは全画像(情報)が一挙に表示されました。

sidebarspeed02

 

それがカスタムHTML」ウィジェットにコードを貼り直したところ、まずヘッドの「検索ボックス」が表示され、ついで具体的な商品情報が表示されるようになったのです。

sidebarspeed02-3

 

表示が分割されたことによりカウントされるタイムがこれだけで1秒短縮されました。

 

右カラムを「カスタムHTML」に

結局右カラムの「テキスト」ウィジェットをすべて「カスタムHTML」に変更しました。

 

sidebarspeed06

 

効果があったのは上の画像の赤で塗られた部分でした。

「Amazon.co.jpアソシエイト」は前項で説明したとおりです。

「更新情報を受け取る」はサイドバーのこの表示の部分。「RSSリーダー」です。

sidebarspeed09

 

コード内容はテーブルを組み2点の画像を配置、それぞれにリンクを張っています。このコードを「カスタムHTML」ウィジェットに貼り直したところ、こちらも1秒短縮することができました。

 

カラム上部の画像表示がポイント?

結局、コードを貼り直して効果があったのは二つのウィジェットのみでした。

その原因は主に2点挙げられます。

 

1.「カスタムHTML」による高速化の上限に達した

sidebarspeed07

 

「カスタムHTML」ウィジェットへの貼り直しで5秒となり、その読み込み時間は「良好」とジャッジされました。このツール上でリクエストできる詳細レポートを受け取ると、さらに「モバイルサイトの処理速度は十分です」の評価でした。

さらにあと3秒改善できる余地があり、それは画像圧縮、リソース圧縮、ブラウザキャッシュの利用、JavaScript や CSS の排除などの施策が提案されました。

これらの内容からすでに「カスタムHTML」ウィジェットによる高速化は限界に達していると判断しました。

 

2.上位に表示されるウィジェットで効果

また表示されるウィジェットの上位から効果が現れるものと思われます。

つまりそらよりの場合はたまたま「Amazonアソシエイト」と「RSSリーダー」でしたが、固有のリンク先やコードによって決まるものではなく、あくまで画像表示の改善できる上位のウィジェットから適用されるのではないかと考えられます。

もし「Amazonアソシエイト」がサイドバーの下方に配置されていれば別のウィジェットが表示高速化を担っている可能性があります。

 

まとめ

表示スピードの短縮時間はたった2秒ですが、7秒という段階まできての30%の圧縮は大きな前進です。

あっと一歩を詰められないでお困りの方に。「カスタムHTML」ウィジェットへの変更はぜったいおススメです。

 

 icon-chevron-circle-down モバイルサイトの表示スピードアップはこちらの記事もぜひご参考に

超簡単!WordPressモバイルの表示スピードチェックと.htaccessによる速度アップの方法

  「Test My Site」とは 従来「think with Google」としてgoogleより提供されていた表示スピードチェックサイトが、新たにモバイルサイト ...

 

-WordPress

Copyright© IT-SORAYORI , 2018 All Rights Reserved.