「ポイント活動/マインドフルネス/プログラミング」

訪問ありがとうございます。

「超効率的」なマニュアル風入門記事、まとめました。

準備中です!

PageSpeedInsights「カスタム速度の記録と計測」を解決!

PageSpeedInsights

どうも、まふとらです。

PageSpeedInsightsのページが2018年11月近日(10-12日?)に刷新されましたね。

このサイトも、モバイルページのスコアが90代から30代へと、大きな下落を食らってしまいました。(画像を多用しているというのもありますが。)

そこで、今回はPageSpeedInsightsにおける、「カスタム速度の記録と計測」審査項目を解決しようと思います。
(※とりあえず解決すれば良い方は、以下の通りで大丈夫です。)

「カスタム速度の記録と計測」解決方法は?

解決方法となります。

WordPress管理ページにおける、「外観」タブの選択

上記画像の通り、WordPress管理ページから、「外観」タブを選択し、テーマの編集を選択してください。

「テーマファイル」から「javascript.js」を選択

画面右「テーマファイル」から「javascript.js」を選択してください。
※警告が出た場合でも開いてもらって大丈夫です。

一文を追加

window.performance.mark('mark_fully_loaded');

を追加し、更新してください。

以上で対策は完了となります。

「カスタム速度の記録と計測」詳解

詳細解説です。

実際には、一般のサイトでこちらの項目については解決する必要はあまり無いようにも感じます。

というのも、グーグルの解説において、

この監査は「合格」や「不合格」を判定する形式にはなっていません。単に、アプリのパフォーマンス計測に役立つ API を紹介するための項目になります。

と書いてありますね。実際にその通りで、今回追加したUserTimingAPIと呼ばれる物の正体は、パフォーマンス計測用のAPIです。実行しても、マイクロ秒で結果が得られるだけですし、PageSpeedInsights上でも、警告が出なくなるだけで診断項目に表示され続けるようになっています。

UserTimingAPIのチュートリアルにおいて

You can’t optimize what you can’t measure
(計測できない物は最適化出来ない)

と書かれているように、パフォーマンスを計測する事は大切なのはわかりますが…Web周りは詳しくないので、この辺りで言及をやめておきます。

参考文献

user-timing:Google
usertiming:html5rocks

コメント