Light HouseでPage load is fast enough on mobile networksと表示させるための方法を教えてください

  • 解決済 echizenya

    (@echizenya)


    5年、 8ヶ月前

    いつもお世話になっています。
    下記の質問についてご存知の方がいらっしゃいましたら、ご教示を願います。

    —

    【質問の主旨】

    ヘルプが必要なページについて、Light Houseによる検査をしたときに、Page load is not fast enough on mobile networksという文言を表示させずに、
    Page load is fast enough on mobile networks.と表示させるためにはどうすれば良いでしょうか？

    【質問の補足】

    1.

    Page load is not fast enough on mobile networksという文言をクリックすると、
    A fast page load over a cellular network ensures a good mobile user experience. Learn more.という文言が表示されます。

    2.

    そのLearn moreをクリックすると、”Page Load Is Fast Enough On Mobile”というページが表示されます。自分は今回の質問を解決するためのヒントは下記の文章であると考えます。

    To speed up time-to-interactive,
    only execute the JavaScript that you need in order to display the page, and defer the rest.
    See Get Started With Analyzing Runtime Performance to learn how to analyze JavaScript execution with Chrome DevTools.
    Record load performance shows you how to record a page load.
    Once you’re familiar with the basics, do a page load recording and analyze the results to find JS work that can be deferred.
    See Rendering Performance for strategies.

    3.
    上記の文章の中で

    See Get Started With Analyzing Runtime Performance to learn how to analyze JavaScript execution with Chrome DevTools.

    という箇所があるので、Tools for Web Developersの「実行時のパフォーマンスの分析」というページを見つけました。

    4.
    Chrome DevToolsでTimeLineのパネルで「実行時のパフォーマンスの分析」を確認しようとしましたが、そもそも添付画像のようにTimelineパネルが見当たりません。

    5.
    また”Page Load Is Fast Enough On Mobile”によると、Page load is not fast enough on mobile networks という文言が表示される理由は、JavaScriptの読み込み動作に問題があるような気がします。ただ問題のあるJavaScriptをどうすれば良いのかよく分かりません。

    6.
    ヘルプを必要とするページのコードはGitHubにUPしています。

    —

    以上、ご確認よろしくお願い申し上げます。

    ヘルプの必要なページ: [リンクを見るにはログイン]

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • munyagu

    (@munyagu)

    5年、 8ヶ月前

    こんにちは

    Performance で TimeLine と同じものを見ることができると思います。

    でも、とりあえず PageSpeed Insights でもいいんじゃないでしょうか。

    トピック投稿者 echizenya

    (@echizenya)

    5年、 8ヶ月前

    @munyagu さん。
    いつもコメントありがとうございます。

    1.

    Performance で TimeLine と同じものを見ることができると思います。

    PerformanceでTimeLineを確認することができました（添付画像）
    その結果を確認すると、ページを表示させるためにScriptingにもっとも時間がかかっているように見えます。

    2.

    とりあえず PageSpeed Insights でもいいんじゃないでしょうか。

    PageSpeed Insightsでもヘルプが必要なページについて確認しました。すると「JavaScriptの実行にかかる時間 – エラー」と表示されます。さらにその詳細部分をクリックすると、Googleの開発者ページで“JavaScript Bootup Time Is Too High”が表示されます。

    この記事を読んでいると、Recommendationsとして列挙されている、”Only send the code that your users need.” がLightHouseで指摘されていることに近いと感じます。ただし、冒頭の質問で申し上げたように、JavaScriptの読み込みを改善する方法がよく分かりません。

    もし具体的な方法をご存知でしたら、ご教示を願います。

    • この返信は5年、 8ヶ月前にechizenyaが編集しました。理由: タグを間違えたため編集
    munyagu

    (@munyagu)

    5年、 8ヶ月前

    Performance の見方が分かったら、どの JavaScript の何の処理に時間がかかっているか分かるんじゃないでしょうか。
    私はほとんど使ったことが無いのでよく。分かりません。

    ただ、ほとんど広告の JavaScript なんじゃないですかね。
    広告出さなくしたら速くなりそうな気がします。

    ところで、もはや WordPress は関係が無い気がするのですが・・・

    トピック投稿者 echizenya

    (@echizenya)

    5年、 8ヶ月前

    @munyagu さん。
    たびたびのコメントありがとうございます。

    Performance の見方が分かったら、どの JavaScript の何の処理に時間がかかっているか分かるんじゃないでしょうか。

    言われてみればそんな感じがします。
    ご指摘をいただいたように、私が聞いていることはChrome devtoolのことになってきました。Scriptのどこに問題があるか、詳細はスタック・オーバーフローなどで質問いたします。

    今回の質問は解決済みとします。今後ともどうぞよろしくお願いします。

    • この返信は5年、 8ヶ月前にechizenyaが編集しました。理由: タグを間違えたため編集
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「Light HouseでPage load is fast enough on mobile networksと表示させるための方法を教えてください」には新たに返信することはできません。