Hidekichi

Crittersを使用してサイトのファーストビューを改善 - 11ty+Vite+Tailwindcss

11tyでHTMLを生成し、ViteでTailwind CSSなどを処理していますが、ファーストビューで素のHTMLが見えてしまう問題を避けるため、重要なCSSの一部をインライン化し、残りのCSSを遅延読み込みしています

意図は簡単でもとても難しいかあるいは面倒くさい問題

実際の所、Critters本体は、2024年10月でアーカイブされていてメンテナンスは終了しています。なので現在はその後継プロジェクトで上位互換となるBeastiesに移管されています。多くの人がCritters → Beastiesへと移行中であるというのは前もって書いておきます。

ではなぜ、Crittersを使うのかというと、それは枯れた技術というのは様々な人が色々な環境で試して色々な解決方法などを生み出しているからです。正しく動作するのであれば、最新を追う必要はありません。CrittersはGoogleがメンテナンスしていました。しかしそのメンテナンスに係る労力を積極的にメンテナンスしてくれる人に譲るという形でアーカイブされたので、それ自体に致命的な問題があるとかバグがあるからとかではなかったのです。

それでもパフォーマンスの改善やpreloadによる仕組みを追加するなどの事を行われているようですが、劇的に速くなったとかそういうことはありません。より良くはなったが今すぐ移行する必要があるかどうかはお好みでと言う感じです。

それよりもサイトの現状をどう改善するかが目の前にある問題で、そのために色んなサンプルがあるCrittersを使用すると至ったわけです。手動で書いても良いですがどこに何が使われていて何を書き出したら最適かなどとてもやってられねぇと言う状態で、まだ大本のcssの改善が必要なのに直してはインラインも書き直しとかもう嫌だということで導入したわけです。

完璧になることはない

Crittersでファーストビューを改善したからと言ってChrome系ブラウザに内蔵されているLighthouseでオール100点が取れるわけではありません。シークレットモードで拡張機能がない状態でもです。まだまだ改善点はあるわけですが、元々11tyはhtmlとcss、JavaScriptと言うとてもシンプルな構成のサイトを作るものです。本当にシンプル・オブ・シンプルなサイトであればオール100点は取れるでしょうが、複雑なサイト構成だとそれでも無理な場合が多々あります。

私はサイトを作る時は低速回線のテザリング環境で作っています。それらの速度しか出ない環境でもできるだけ見れるようにすれば速い回線なら見れて当然で、レスポンスも良いはずですから。しかしどうでしょう、世間のwebサイトってそれら環境では無理……ではないものの時間がかかるサイトってありますよね。単に店のオープン時間が見たいだけなのに携帯の低速回線では数分待たないと見れないとか、無駄に大きい画像が使用されていて目的を果たすまでに余計な画像をダウンロードしないといけないとか。

それらは、

などもあるかも知れません。それらが本当に見る価値があればより高速な回線を求めるわけですが、価値がね……と言うサイトも決して少なくはないと思うんです。開いてガッカリというサイトは多いと思います。

最低3Mbps~5Mbpsは必要な現代

ファストフード店のサイト((メニューのために画像を多用している))などでは、たとえ画像最適化されていようが1Mbpsの回線だと表示に時間がかかります。おおよそは表示されても画像が表示されるまでに時間がかかりますよね?

最低3M~5Mbpsは快適に見れる限界で、1MB/s(8Mbps)はないと普通のサイトは見てられないとなる場合もあります。なのに、たいていのモバイル低速回線は300kbps以下とかでしょう?これはテキスト中心のサイトがギリギリ見れるぐらいの速度です。

そもそもなんでこのご時世に300kbbps程度の速度でしか提供できないのでしょうか。通信機器も新しくなり、それらを揃える程度にはこれまで約20年以上の携帯使用料を

blogカテゴリ内のタグ一覧