こんにちは、だいちゃんです。

自己紹介と、自分のスキルアップも兼ねてポートフォリオサイトを作成・公開しているのですが、先程ふとFirefoxで開いてみたら見事に・盛大に崩れていました...

安易に使ったCSSの preload 属性が原因

この記事 で偉そうに語ってますw

Preloadにすることで、 cssのダウンロードを待たずに（並行して）ページの描画をしてくれる ので体感的に表示速度が上がるよねって話らしいです。

ただ、そのままだとスタイルシートであることを認識できないので、onloadのタイミングでrelをスタイルシートに書き換えてます。

仕組み的には全くその通りで、非同期にするためレンダリングを邪魔しなくなるのですが、実は rel="preload" に対応しているのは Chromeだけ なのでした。

ということで、おとなしく rel="stylesheet" に戻してアップし直しています。

ちなみに、Polyfillもあるようですが、そもそも高速化したいのに別のjsファイルを読み込ませるのは本末転倒のような気がしたので、今回は導入していません。また、一旦 'media="print"' にしておいて、onloadで 'media="all"' にする方法もあるようです。

ついでに「高速化」を考える

本業の案件でも「もっと早くならないの？」みたいなお声を頂くことがあるんですが、ちょろっと書き足すくらいで出来る高速化なんてあったらこの世のサイトはみんな爆速で見れてますよね... サイト1つ表示させるだけでもスマホの中では、いろんなサーバーを経ながら大量のデータを取り寄せて、優先順位も考えながら組み立てて、、、みたいなことをしているわけで。サイトの表示が遅い原因は多岐に渡ります。

その中でフロント側の人間として、出来る限り画像サイズは適切な小ささにしたり、無駄な記述は減らしたり、可能なら非同期に読み込むように指示したり、と努力したり、それらの知識を身につける必要があると思っています。

勉強不足なまま実装すると、今回のような落とし穴にハマるわけですw

プライベートなプロジェクトなので、いろんな技術を試すのにちょうどいいおもちゃとして、今回のヘマもこうやって記事にすることで成仏させます！

1年前のコードみるとなかなかツラいものがありますね。成長できてる証だと思ってかわいがろう。