パソコンの有効活用で、ホームページの作成を始めました。
自作パソコンや周辺機器、スマホに関する話題です。
root化 や 部品交換等の改造もメモしています。
使用している気に入ったアプリの紹介・・等々。
   

ウェブページの 読み込み速度改善

ウェブページの読み込み時間を計測する

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

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

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

少しでも軽量にするため、各ページを大幅に書き換え

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

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

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

効果があった
YouTube の動画 iframe を Link に変更

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

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


例えば

<iframe src="https://www.youtube.com/embed/sKcFuDkM-Y0"></iframe>

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

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

 動画と飛行データ合成

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

PageSpeed Insights での計測結果が

 64 から 100 になりました。

ホームページの 読み込みサイズ と 読み込まれるタイミング も解析

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

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

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

ホームページの読み込み時間を計測する Javascript を検討

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

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

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

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

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

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

  1. まず<head>内に記入しておく部分です
    <script language="Javascript">
    <!--
    mydate = new Date();
    starttime = mydate.getTime();  /* 開始時刻を取得 */
    // -->
    </script>
  2. <body>に追加記入します
    <body onload="calc_time()"> 他の記述があれば最後尾にスペースをあけて追加します
  3. 計測したデータをページ内の表示させたい場所に記入
    <FORM NAME="myFORM1">読み込み時間 <INPUT TYPE="TEXT" NAME="mytime">
    </FORM>
  4. </body>の直前に記入します
    <script language="Javascript">
    <!--
    function calc_time()       /* 時間を測定する関数 */
    {
    mydate = new Date();
    endtime = mydate.getTime();  /* 終了時刻を取得 */
    difference = (endtime - starttime)/1000;
    document.myFORM1.mytime.value = difference + " 秒";
    }
    // -->
    </script>

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