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

投稿日:

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より提供されていた表示スピードチェックサイトが、新たにモバイルサイト専用のスピード診断ツール ...

続きを見る

 

さらにこんな記事はいかがでしょう(広告があります)


ブログランキングに参加しています

人気ブログランキング   にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

歳の差婚250 1

  数年前から「年の差婚」がブームです。人気キャスターや人気女優、人気歌手が、歳の離れた素敵な男性をゲットされ、あんなカップルになりたいと思った人も多いのでは。 タレントのみなさんはどうかわ ...

掃除機ヘッド掃除アイコン 2

  今年も大掃除のシーズンがやってきました。お掃除道具が大活躍の季節ですね。でも、ちょっと待ってください。あなたのお家の掃除機、しっかり働ける準備はできていますか。 もしも吸い込み口のあるヘ ...

rakuchinpack01 3

  キッチン用保存容器の条件とは お料理上手の条件は段取り上手。手にヨリをかけて作ったせっかくのご馳走も冷めたり、伸びたりしては台無しです。美味しいものを美味しいうちにテーブルに並べるには、 ...

ikea_driver02 4

  2017年2月6日追記 「通りすがりの者」さんから次のご指摘をちょうだいしました。 イケアの家具に使われているプラスねじは「ポジドライブ」というイギリスの規格なので、日本のJIS規格のプ ...

パスワード作成 5

  パスワードがいくつもあって管理できない、と昔から言われ続けていますが、いっこうに改善される気配がありません。 でもパスワードを使う場面はますます増えています。 もしもご自分のパスワードの ...

補色01 6

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や茂みにたくさんの人の顔が写っている。心霊写真のお馴染みのパターンですが、さすがに最近はテレビで取り上げることもなくなりま ...

パーティ開け11 7

  ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べるとき、普通に開けたら、開封口の向きが気になって、ちょっと不便ですよね。横から手を入れるのも汚れて面倒。 つい ...

-WordPress, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2017 AllRights Reserved.