コラム
  • コラム
  • GitHub で小説を毎月 10 万字書いた
  • 私のホームページが阿部寛のホームページに 0.015 秒差まで迫った
Powered by GitBook
On this page
  • 訪問者の推定離脱率 10%
  • 画像容量の縮小
  • CDN の活用
  • 評価結果
  • モバイルサイトの速度をテストしましょう
  • PageSpeed Insights
  • WebPageTest
  • 速度指標比較 ( dev.to と阿部寛のホームページについてちゃんと計測させてくれ を参考に作成)
  • 100m を 5 秒で走っていたランナーが 9 秒台まで落ちてきた

私のホームページが阿部寛のホームページに 0.015 秒差まで迫った

PreviousGitHub で小説を毎月 10 万字書いた

Last updated 6 years ago

訪問者の推定離脱率 10%

これまでずっと の美しさと速さに憧れ, でもシンプルさを心がけてきた。 でもモバイル版で 99/100,パソコン版で 100/100 を獲得し,私は満足していた (なお阿部寛のホームページは速すぎるのか PageSpeed Insights だとエラーが出る)。

甘かった。なぜモバイル版が満点じゃないのか。それが生み出す損失に気づいたのは,今年のエイプリルフールに入ってからだった。

おかしい。PageSpeed Insights では 2 秒を切るくらいだったはずなのだが。この違いが生じた原因について,Google はテスト中に次のように示している。

どれほど魅力的なコンテンツがあっても,利用者の端末で見られなければ意味がない。回線が遅くても快適な Web サイトが求められている。 Google は『阿部寛のホームページを目指せ』と言っている。 そう私は解釈し,私にできる範囲内で高速化を目指すことにした。

画像容量の縮小

さらに,これまで 800 x 800 くらいのサイズのアイコン画像であっても「縮小表示されるからいいや」と平気で置いていたのだが,葬られた EeePC のアイコンが私に手抜きを許さないよう怨念を放っているように感じられたので,表示されるサイズに合わせて他のアイコンも小さくした。

CDN の活用

評価結果

モバイルサイトの速度をテストしましょう

画像をちょこっといじっただけだが,無事『訪問者の推定離脱率: 低』を達成した。

PageSpeed Insights

従来のパソコン版に加え,モバイル版も 100 点満点になった。

WebPageTest

  • 以前は AAAFF みたいなパワプロの張本勲っぽい成績だったような気がする。今回大幅に改善した。

  • 3 月に阿部寛の画像が圧縮されたものに変わったので,画像圧縮の評価が B にパワーアップした。

指標

私のホームページ

阿部寛のホームページ

カクヨム

セルバンテス

読み込み速度

0.666 秒

0.651 秒

11.928 秒

2.219 秒

ファーストバイト

0.289 秒

0.143 秒

0.517 秒

0.302 秒

レンダー開始

0.700 秒

0.200 秒

4.500 秒

1.200 秒

スピードインデックス

0.764 秒

0.617 秒

4.835 秒

1.200 秒

通信量

53KB

39KB

6,648KB

298KB

100m を 5 秒で走っていたランナーが 9 秒台まで落ちてきた

阿部寛のホームページが遅くなっているのだ。阿部寛のホームページを愛する人なら,食い気味に表示される阿部寛の顔に安らぎをおぼえたと思う。しかし現在は 0.4 〜 0.7 秒あたりでうろうろして,以前のような速度で表示されるのは何回かに 1 回くらい。つまり今回のテスト結果は,私のホームページが速くなったというよりも,100m を 5 秒で走っていた人外のランナーが 9 秒台の人類レベルまで落ちてきたことによるものだといえる。

(c) 2019 jamcha (jamcha.aa@gmail.com).

その日,Debian GNU/Linux から派生した のサイトで 私は,システムをウイルススキャンしている間にひとつの Web サービスを知った。

これをテストしたところ, の結果は 訪問者の推定離脱率 10% だった。

つまり は高速回線でなければ遅いということだ。遅い回線では遅い。あたりまえのような話だが阿部寛のホームページは違う。速度制限にひっかかっていても素早く読者に情報を届けてくれる。 は阿部寛のホームページを目標にかかげておきながら,その努力を怠っていた。情けない。

モバイル版に足りない 1 点を埋める努力しないかぎり, はこれからも読者を追い返すことになってしまう。なんと失礼なことだ。そしてなんと恐ろしいことだ。今後クラウドゲーミングなどの影響で回線はさらに混雑する。状況はどんどん悪化していくだろう。

の基盤になっている は, Facebook が開発しているだけあって速い。つまり遅くしているのは私だ。

何が を遅くしているのか,私は知っている。PageSpeed Insights は以前から, の画像が重いこと,具体的には のアイコンが『阿部寛のホームページ』の写真くらい重いことを指摘していたからだ。だが私は が気に入っていて,しかも縮小するとぐちゃぐちゃになるので,そのアドバイスを無視しつづけてきた。とはいえこのことが原因で遅くなるのは嫌だ。仕方なく,私はアイコンをより軽いものへ変更した。

GitHub にアップロードした画像は raw.githubusercontent.com から読み込まれる。この読み込みを速くするため を利用し,そこで作られたリンクを Web サイトに張るようにした。

がどれくらい速くなったのか,Web 界のベンチマークである阿部寛のホームページと で比較することにした。また私のホームページは小説サイトなので,世の中の小説サイトがどれくらい速いのか と の表示速度も調べた。なお小説サイトを牽引している は WebPageTest を拒否するようなので除外した。

速度指標比較 ( を参考に作成)

が速くなって一番驚いたのは私だ。以前は読み込み速度が 1.8 秒くらいかかっていた記憶があるのだが,今はコンスタントに 0.7 秒を切り,約 1 秒で全て表示される。ただ,何十回も走らせているわけではないので,表の数値がベストの値でも信頼できる値でもないことについてはご注意いただきたい。

パフォーマンスの向上に最も貢献したのはおそらく だろう。0.5 秒を境に一斉に画像がダウンロードされ,大幅な時間短縮につながっている。

は確かに速くなった。改善の結果,憧れていた阿部寛のホームページに匹敵する読み込み速度になったからだ。この事実に初めは喜んだが,すぐにある異変に気づいた。

によると,現在,阿部寛のホームページは htm ファイルのダウンロード速度が安定しないようだ。最近になってトップページの写真が変わり ので,私を含め多くの人が昼夜を問わずアクセスして遅くなっているのかもしれない。もしそうなら素晴らしい。サーバー側の問題であれば解決されることを祈る。そしてこれらのハンデをものともせず,阿部寛のホームページは 1 秒未満で,ダイヤルアップ接続であってもわずか 7 秒で,今日も私たちに最新情報を届けている。

cc by-sa
Devuan
まんまと騙された
モバイルサイトの読み込み速度とパフォーマンスをテストする - Google
私のホームページ
世界のモバイル回線接続のうち 70%が,2020 年まで 3G 以下の速度にとどまると予想されています。
私のホームページ
私のホームページ
私のホームページ
私のホームページ
Docusaurus
昨年 8700 億円近くを『研究開発費』に投じた
私のホームページ
私のホームページ
『 EeePC と Emacs と○○と』
このアイコン
githack
私のホームページ
WebPageTest
『カクヨム』
『セルバンテス』
『小説家になろう』
私のホームページ
阿部寛のホームページ
カクヨム
セルバンテス
dev.to と阿部寛のホームページについてちゃんと計測させてくれ
私のホームページ
githack
私のホームページ
WebPageTest の結果
話題になった
阿部寛のホームページ
私のホームページ
PageSpeed Insights
mobile
3g-4s
3g-3s
pagespeed-insights
waterfall
me-webpagetest
abehiroshi-webpagetest