字幕表 動画を再生する
(lively music)
(軽快な音楽)
- [Morten] Most aspects of web performance
- Morten] ウェブパフォーマンスのほとんどの側面
can be measured in a consistent way
は一貫した方法で測定することができます
for comparison and analysis and iteration.
比較・分析・反復のために
There are a myriad of tools out there for this purpose,
そのためのツールは無数に存在します。
including tools built into your browser
ブラウザに組み込まれたツールも含む
and online tools you can use either for free
とオンラインツールを無料で利用することができます。
or for a fee.
または有償となります。
Different tools give you different types of feedback,
ツールによって、得られるフィードバックの種類は異なります。
and because they exist in different locations
と、それぞれ異なる場所に存在するため
on different stacks and provide different types of services,
は、異なるスタックで、異なるタイプのサービスを提供します。
they also give you slightly different results compared
また、比較すると微妙に異なる結果が得られます。
to one another.
を互いに交換する。
For this reason, the best practice
このため、ベストプラクティス
is to use several different performance monitoring tools,
は、複数の異なるパフォーマンスモニタリングツールを使用することです。
collect the data from all of them
全員からデータを集める
and then compare, contrast and analyze when possible.
を行い、可能であれば比較・対照・分析を行う。
These tools fall under two main categories:
これらのツールは、大きく2つに分類されます。
browser tools and hosted third-party tools.
ブラウザツールやホスティングされたサードパーティツールを使用します。
Let's look at the browser tools first.
まず、ブラウザツールを見てみましょう。
There are two main types of tools here.
ここでは、大きく分けて2種類のツールを用意しています。
The first one exists inside the Chrome browser.
1つ目は、Chromeブラウザの中に存在するものです。
If you open the Developer Tools for Chrome,
Chromeのデベロッパーツールを開いた場合。
and go to the far right-hand side
をクリックし、右端へ
of the Developer Tools,
デベロッパーツールの
there's a button called Lighthouse.
Lighthouseというボタンがあります。
This tool generates a performance report
本ツールはパフォーマンスレポートを作成します
for your site and it also gives you a long list
を表示することができます。
of suggestions on how to improve the performance
パフォーマンス向上のための提案の
of your site.
をご覧ください。
It also tests for other things,
また、それ以外のテストも行います。
Progressive Web Apps, best practices,
Progressive Web Apps、ベストプラクティス。
accessibility and SEO.
アクセシビリティとSEO
And you can choose whether you want
とか選べるんですよ。
to test on a mobile device or a desktop device.
をクリックすると、モバイルデバイスまたはデスクトップデバイスでテストできます。
If you choose mobile,
モバイルを選択した場合。
then the browser will mimic a mobile device,
とすると、ブラウザがモバイル端末を模倣することになります。
so small screen, slower load times and all that.
ということで、小さい画面、遅いロード時間、その他もろもろ。
So I'm going to generate a report
そこで、レポートを生成してみることにします
just to see what's going on on this site
どうしたものかと思いきや
that I'm running right now.
今走っている
This is a site that lives somewhere on the web
これは、ウェブのどこかに住んでいるサイトです
but you can also run Lighthouse on a locally hosted site
が、ローカルにホストされているサイトでもLighthouseを実行することができます。
on your computer if you want to.
をお使いのコンピューターにインストールすることもできます。
What I get in response here
ここでの回答で得たもの
is a performance score of 84.
はパフォーマンススコア84です。
This is good but not great.
これは良いことですが、素晴らしいことではありません。
Ideally, I want to get as close as possible to 100.
理想は100に限りなく近づけることです。
I want it to at least be in the green, so over 90.
せめてグリーンにしてほしいので、90点以上。
To fix that, I can now scroll down
それを解決するために、下にスクロールすることができるようになりました
and see what's slowing my site down.
で、何が私のサイトを遅くしているのかを見てください。
Well, first off, I can see there's some issues.
まあ、まず、問題があるのはわかります。
First Contentful Paint is too slow.
まずContentful Paintが遅すぎる。
Largest Contentful Paint is too slow
最大のContentful Paintは遅すぎる
and there's too much cumulative layout shift,
とか、累積レイアウトシフトが多すぎる。
meaning things are moving too much around
いってこい
as the page is loaded.
を、ページが読み込まれたときに表示します。
Scrolling further down,
さらに下にスクロールする。
we get a list here of opportunities, and diagnostics.
このリストには、チャンスと診断が表示されます。
So the opportunities here
だから、ここでのチャンスは
include eliminate render-blocking resources.
は、レンダーブロックを引き起こすリソースを排除することを含んでいます。
If I open that,
それを開けたら。
I can see the render-blocking resource in question
問題のレンダーブロッキングリソースが見える
is Google Fonts.
はGoogle Fontsです。
You can also see it says server images in next-gen formats.
また、次世代フォーマットでのサーバーイメージと書かれているのも確認できます。
And if we open up, it'll say image formats
そして、開くと、画像フォーマットと表示されます。
like JPEG 2000, JPEG XR,
JPEG 2000、JPEG XRのように。
and WebP often provide better compression
やWebPの方が圧縮率が高い場合が多い
than PNGs and JPEGs.
PNGやJPEGよりも
And finally at the bottom here,
そして、最後にこの一番下。
we have remove unused JavaScript.
未使用のJavaScriptを削除しています。
And that just means somewhere in the site,
そしてそれは、サイトのどこかを意味するだけです。
there's JavaScript being loaded that isn't being used,
使用されていないJavaScriptが読み込まれている。
which is a waste of resources.
というのは、資源の無駄遣いです。
So the Lighthouse report is really good
だから、ライトハウスのレポートは、本当に良い
at seeing at a glance where the performance enhancements
性能向上のポイントが一目瞭然です。
of your site can be.
のサイトができます。
It gives you good recommendations on what to do.
何をすべきか、良い提案をしてくれる。
If you want to dig further into exactly
さらに具体的に掘り下げたい場合は
what is going on in your site,
あなたのサイトでは何が起こっているのでしょうか。
you can also run the network monitor.
は、ネットワークモニターを実行することもできます。
You open the network monitor,
ネットワークモニターを開くと
make sure you click disable cache
キャッシュを無効にするをクリックしてください。
so that you are downloading the site from scratch
一からサイトをダウンロードすることになるため
and then you just reload the page.
で、ページを再読み込みするだけです。
What you get here is a waterfall
ここで得られるのは、滝
of every single resource
あらゆるリソースの
that's being downloaded from the site
サイトからダウンロードされている
and you can see right away
を見ると、すぐにわかります。
how it's been downloaded.
どのようにダウンロードされたのか
On this case, the site is running HTTP/2,
この場合、サイトはHTTP/2を実行しています。
meaning it's multiplexing and loading resources
リソースを多重化してロードしていることを意味します。
as fast as they become available.
を、いち早くお届けします。
And we can see here
そして、私たちはここを見ることができます。
that it takes quite a bit of time
結構な時間がかかること
for everything to load.
をクリックすると、すべてが読み込まれます。
For example, we have this file here called vendor.js.
例えば、ここにvendor.jsというファイルがあります。
Now, this is the file that Lighthouse said has a lot
さて、このファイルは、ライトハウスが、多くの
of unused code.
未使用のコードの
And we can see it takes quite a while to load,
そして、読み込みにかなり時間がかかることがわかります。
and there's a lot of execution going on here too.
と、こちらも実行に移すことが多いですね。
Further down, we have main.js.
さらにその下に、main.jsがあります。
If you hover over any of these,
どれかにカーソルを合わせると
you get a breakdown of how long it takes
所要時間の内訳を知ることができる
for queuing, how long it was stalled,
の場合、どれくらいの時間ストールしていたのか。
how long it took for the request to be sent
リクエスト送信に要した時間
and how much wait time happened before it came back,
と、どれくらいの待ち時間で戻ってきたのか。
how long it take to download.
ダウンロードにかかる時間
So here you see, for example,
そこで、例えばこんなものがあります。
it took 237.99 milliseconds
237.99ミリ秒を要した
between the request was sent to the server
リクエストがサーバーに送信されるまでの間
and the response came back.
と返事が返ってきた。
And then the actual download
そして、実際のダウンロード
was only 1.49 milliseconds.
はわずか1.49ミリ秒だった。
If we look at the top one here,
ここで一番上のものを見てみると
this is the HTML document,
これがHTML文書です。
you can also see there's a very slow start
出だしが非常に遅いこともわかります。
on the server.
をサーバーにインストールします。
So the server waited for 1.48 milliseconds
つまり、サーバーは1.48ミリ秒待ったわけです
before anything happened,
何も起こらないうちに
and then we waited 151 milliseconds
そして、151ミリ秒待ちました。
before the file actually got downloaded.
実際にファイルがダウンロードされる前に
So the total execution of this was 153.9 milliseconds,
つまり、これの総実行時間は153.9ミリ秒だったのです。
which is a very long time.
というのは、とても長い時間です。
That means that the server that it's running on
つまり、それが動作しているサーバーは
is not all that fast.
は、そんなに速いものではありません。
If you want to go even deeper
さらに深く知りたい方は
into what's going on,
を、どうなっているのか。
you can also go to the performance monitor.
をクリックすると、パフォーマンスモニターに移動することもできます。
Now, the performance monitor tells you
さて、パフォーマンス・モニターが教えてくれるのは
about how the scripts and everything else on the site
スクリプトをはじめ、サイト上のあらゆるものが、どのように
are actually performing
実際に行っている
but it's worth knowing about
が、知っておいて損はない
because it gives you a lot of details
詳細がわかるから
about what's going on in your site.
あなたのサイトで何が起こっているのかについて。
Again, to run it, you need to go over here,
もう一度言いますが、実行するには、こちらに移動する必要があります。
clear everything and then click on start profiling
すべてをクリアにしてから、プロファイリングの開始をクリックします。
and reload page.
をクリックし、ページを再読み込みしてください。
Now the page will be reloaded into the browser
これで、ページがブラウザに再読み込みされます
and the profiler starts.
をクリックすると、プロファイラが起動します。
Now, the profiler's a fairly advanced tool,
さて、プロファイラーというのはかなり高度なツールです。
and you can use it to do things
といったことができるようになります。
like profile existing behaviors,
既存の行動をプロファイルするようなものです。
so you can go in and mess around with the site
ということで、入ってサイトをいじることができます。
and then see what is happening.
をクリックして、何が起こっているのかを見てください。
But what you get here is now very detailed information
しかし、ここで得られるのは、今や非常に詳細な情報です。
about how the page is loaded
ページのロード方法について
and what kind of activity happens as it's loaded.
とか、読み込み時にどのような動作が起こるかとか。
So you can see, there's 20 milliseconds for loading,
つまり、ローディングに20ミリ秒かかっていることがわかります。
then 83 for scripting
その後、スクリプティング用83
and 38 for rendering and 12 for painting.
とレンダリングが38、ペイントが12です。
And you can see here in the breakdown exactly
そして、この内訳を見れば、まさに一目瞭然です。
when different things happen
ことあるごとに
and what is happening, and so on.
とか、何が起きているのか、などなど。
So there's a lot of information here.
だから、ここにはたくさんの情報が詰まっているんです。
Lighthouse exists in Chrome,
LighthouseはChromeに存在します。
network monitor and performance monitor exist
ネットワークモニタやパフォーマンスモニタが存在する
in all modern browsers, including Firefox,
をFirefoxを含むすべてのモダンブラウザで表示します。
Edge and so on.
エッジなど。
The second category of performance monitoring tools
パフォーマンスモニタリングツールの2番目のカテゴリー
is hosted third-party tools.
はサードパーティツールをホストしています。
The most used example here is PageSpeed Insights.
ここで最も利用されている例が、PageSpeed Insightsです。
Now, if we go to PageSpeed Insights,
さて、「PageSpeed Insights」にアクセスしてみると。
you'll notice, it looks exactly the same
同じように見えるはずです。
as Lighthouse, just that it's on the web.
ライトハウスと同じで、ウェブ上にあるというだけです。
That's because it is.
それは、そうだからです。
The difference is Lighthouse runs on your computer.
違いは、Lighthouseがパソコン上で動作することです。
PageSpeed Insights runs on some server
PageSpeed Insightsは、いくつかのサーバーで動作しています。
that Google has.
Googleが持っているもの。
So you get slightly different data
だから、微妙に違うデータが得られる
and you get slightly more reliable data
で、若干信頼性の高いデータを得ることができます。
because it's also compared to other data that they have.
というのも、他のデータとも比較されるからです。