MR.HARIKIRI-INSIGHTS

タグ: lazy

  • [WP] あるページのある位置に他のページを遅延表示させるには[ただいま情報収集中]

    [WP] あるページのある位置に他のページを遅延表示させるには[ただいま情報収集中]

    blog

    のレスポンスをなるべく落とさずWordPressの機能を強化するにはどうしたらというお話です．

    例えば，ページが表示される際に他のページを挿入したい時，単純に挿入すると表示速度は追加されたページの大きさだけ遅くなってしまいます．

    画像の遅延表示についてはプラグインもあったり，最近のWordPress 5.5からはHTML5として実装されているとも聞きます．対応しているブラウザでは遅延表示が可能となっているようです．

    遅延表示

    のphpコードの書き方について以下調査しました．調査した範囲ではimageの遅延表示についてがほとんどでした．今回はここまで．

    編集履歴

    2024/01/23 Mr.Harikiri

    Is any way to call lazyblock from PHP code?

    ここに記載の機能は，単純にページの挿入するためのコードのように思う by Mr.H

    https://wordpress.org/support/topic/is-any-way-to-call-lazyblock-from-php-code/

    WordPress Lazy Loading using Pagination

    記載のコードは，ページネーションの表示ブロックを遅延表示させるようだ by Mr.H

    https://stackoverflow.com/questions/56637182/wordpress-lazy-loading-using-pagination

    Build Your Own Simple Lazy Loading Functionality in WordPress

    javascriptであるLozadというライブライを使ってimageを遅延表示

    https://macarthur.me/posts/build-your-own-simple-lazy-loading-functionality-in-wordpress

    How to Lazy Load in WordPress (Images & Videos) – JetPack –

    Jetpackプラグインの使用や，プラグインを使用しないでfunctions.phpにコードを書く方法など詳細な説明あり by Mr.H

    https://jetpack.com/blog/wordpress-lazy-loading/
  • [WordPress] 遅延読込プラグイン比較 – (1)Lazy Loader, (2)Lazy Load, (3)a3 Lazy Load (2020) [2020/01/27]

    [WordPress] 遅延読込プラグイン比較 – (1)Lazy Loader, (2)Lazy Load, (3)a3 Lazy Load (2020) [2020/01/27]

    画像遅延プラグインの効果

    以下の3つの画像遅延ローダーをGoogleのPageSpeed Insightsのスコアで比較しました。

    Lazy Loader
    LazyLoad Plugin – Lazy Load Images, Videos, and Iframes
    a3 Lazy Load

    画像遅延処理のPluginの有無でPageSpeed Insightスコアは、以下のように改善できた。

    結論

    結論から言うと今回の結果から、採用したPluginは、 「Lazy Load – Optimize Images Ver.2.3.2」です。

    評価方法

    例えば、以下のアドレスをGoogle Page Speed Insightsに入力して測定します。(https://harikiri.diskstation.me/myblog/wordpress/7804/)

    結果は、モバイル : 40程度　→ 50程度

    少し長文のページのスコアも測定しました。

    結果は、モバイル : 25程度 → 35程度

    比較検討したPluginのバージョン

    • Lazy Loader Ver.5.1.2
    • Lazy Load – Optimize Images Ver.2.3.2
    • a3 Lazy Load Ver 2.2.2

    結果の概要

    Lazy Load と Lazy Loader

    Lazy Load >= Lazy Loaderと、PageSpeed Insightsスコアで若干の差があったが、ほぼ同等。

    ただし、Lazy Loadでは、連続でスコアを測定すると、だんだん良くなる傾向がある。cache関係で相性が良いのかもしれない。

    a3 Lazy Load

    パソコンでのPageSpeed Insightsスコアが高く出る傾向がある。長文の投稿ページでは、スコアの改善が殆どなかった。これからのPage作りは、モバイル・オリエンテッドなどで、パソコンでのスコアは、以下の通り良かったが、採用を見送ることにした。

    ルート(myblog) モバイル

    • モバイル : 35⇨57
    • パソコンで91が最大値。その他のPluginでは、モバイル55が最大/パソコンでは、90を超えない(87程度)

    ルート(myblog) 長文ページ

    • モバイル : 25⇨25
    • パソコン : 65⇨91

    まとめ

    これまでに、Autoptimize プラグインによるCSS, JavaScriptなどの最適化、WP-Optimizeによるcacheのによる最適化、EWWW Image Optimizerによる画像の軽量化を検討してきました。今回は、画像の遅延表示によるPageSpeed Insightsスコアの改善を検討しました。

    1. Autoptimizeプラグイン (Java Script, CSSおよびhtml最適化)
    2. WP-Optimize プラグイン(キャッシュのみ有効化)
    3. EWWW Image Optimizer (画像の縮小化)

    総合改善度

    まとめに記載したように、ごく最近まで速度に関するスコアについて知識がなかったため、関連するプラグインは、何も入れていなかった。そのときのスコアから現在までのスコアの改善度は、以下の通りです。

    まだまだですが、当初のことを思えば、劇的な改善度です。

    PageSpeed Insightsスコア: Plugin導入前からの変遷

    ルート(myblog)

    長文のページ

    • モバイル : 2~3 → 50程度
    • モバイル : (未測定) → 35程度

    以上