GitHub、サイト表示を速く！CSS配信量アップで劇的改善

皆さんの普段使っているウェブサイト、サクサク表示されますか？

もし「なんだか遅いな…」と感じることがあれば、それはウェブサイトの裏側で色々な工夫がされている証拠かもしれません。

今回、あの有名な開発者向けプラットフォーム「GitHub」が、ウェブサイトの表示速度を劇的に改善したというニュースが入ってきました。

どうやって改善したのかというと、実は「CSS-in-JS（シーエスエス・イン・ジェイエス）」という、ちょっと専門的なやり方から、もっとシンプルな「CSS配信」という方法に切り替えたんです。

CSS-in-JSというのは、ウェブサイトのデザインを決める「CSS」というものを、プログラム言語である「JavaScript」の中で直接書く方法です。これだと、デザインと動きをまとめて管理しやすいというメリットがあるんですが、その分、プログラムのファイルが大きくなりがちで、ウェブサイト全体の読み込みに時間がかかる原因になることもあったんです。

例えるなら、お料理で色々な調味料を全部一つのボトルに入れてしまうようなイメージでしょうか。便利かもしれませんが、使う時にどれがどれだか分かりにくかったり、ボトル自体が重くなったりしますよね。

一方、今回GitHubが採用した「CSS配信」というのは、デザイン情報だけをまとめたファイルを、ウェブサイト本体とは別に用意して、必要な時に読み込む方法です。こちらの方が、デザイン情報がスッキリ整理されていて、ウェブサイト本体の読み込みを邪魔しにくいという特徴があります。

GitHubは、このCSS配信の方法で、配信するCSSの量を増やしたんです。これにより、ウェブサイトの表示に必要な情報がより効率的に届くようになり、結果として、サイトの読み込み速度が速くなったり、ボタンを押した時の反応が良くなったりと、皆さんがウェブサイトを使う上での快適さがぐっと向上したというわけです。

今回のGitHubの取り組みは、たくさんの情報が集まる大きなウェブサイトを運営する上で、デザイン情報をどう管理し、どう効率よく届けるかが、いかに大切かを示しています。ウェブサイトは単に情報を見るだけでなく、快適に使えることがとても重要なんですね。