その他

作成したウェブページを表示するまでの時間改善

自分のウェブページの読み込み時間が、まともなのか、遅いのかを具体的に調べるために下記のホームページを利用させてもらっています。

Google のウェブパフォーマンスツール
　　PageSpeed Insights

注意・・・Internet Explorerではうまく動作しないことがあります。

時々読込みが遅く、スムーズな閲覧ができない時がある。

●全体の容量を小さくしたり、読み込み効率を上げるため、下記のような書き換えを実施、ほぼ完了。

どの程度の効果が出るかわからないが、分割したページは多少読込みが早くなった気がする。

紹介した PageSpeed Insights で計測すると、時々極端に時間のかかるページがあることに気付いた。

特にドローンのページに多く、YouTube の動画の画面をページに張り付けていました。

例えば

のように動画の画面を張り付けている箇所を

<a href="https://www.youtube.com/watch?v=sKcFuDkM-Y0" target="_blank">動画と飛行データ合成</a>

のように、YouTube の動画ページにリンクを張るように変更すると、ページの表示がかなり早くなりました。

PageSpeed Insights での計測結果が

　64　から　100　になりました。

ホームページを表示させる時間の計測は別項目で実施したので、今回は表示するために読み込むサイズの計測をしてみた。

html本体ファイルや画像ファイル等を全てを読み込むと、どのぐらいのサイズになるのか適当に考えていました。

表示速度やサイズだけでなく、いろいろ解析してくれるWebサービスを利用させていただき調べてみました。

Analyze your site’s speed　というホームページがわかりやすく解析も豊富です

　調べたいページのURLを入力するだけで解析してくれます。
Fully Loaded Time、Total Page Size が簡単にわかります
個々の読込み時間や、読み込まれるタイミングも解析表示してくれます。

ホームページの読み込み速度が遅いとか、読み込みに時間がかかるという記事やブログを見かける。

調べると以前から結構話題にはなっているようです。

せっかく通信環境が整い通信速度が上がったが、画像や動画、表(Table)を多用し、さらにホームページのサイズが大きくなったため、読込みに時間がかかてしまう。

画像を圧縮したり、表(Table)の使用を減らしたり、Javascriptの読み込みをページの最後の</body>の直前に持ってきたりして試行錯誤しているが、実際にどの程度に時間がかかっているか計測してみたくなった。

全てのページを測定するのではなく、ページサイズが大きく結構画像や表(Table)を使用したりYoutubeの動画の画面を張り付けている場合の影響もページの読み込み時間を計測すれば、大体の感覚がつかめると判断してテストしてみました。

使用するのは簡単なJavascriptです。大まかな時間を測定します。

まず<head>内に記入しておく部分です
<script language="Javascript">

</script>
<body>に追加記入します
<body onload="calc_time()">　他の記述があれば最後尾にスペースをあけて追加します
計測したデータをページ内の表示させたい場所に記入
<FORM NAME="myFORM1">読み込み時間　<INPUT TYPE="TEXT" NAME="mytime">
</FORM>
</body>の直前に記入します
<script language="Javascript">

</script>

ここで表示される読込み時間には、サーバーが応答するまでの時間は含まれていませんので、込み合っている時間帯や処理が遅いサーバーの場合、表示にはさらに時間がかかります。