公開日:
さて、サイトの高速化の施策について説明をしますが、
その前に「基礎」について少しだけ。
基礎を学ぼう!とかいうと面倒に感じますが、基礎が最も大事です。
加藤も基礎を勉強するのは面倒で退屈なのでできれば避けたいのですが、基礎を知っているかどうかで効率と成果に大きな違いが出ます。
面倒ですけど頑張りましょう!
基礎はこのサイトを見よう!
えー、他力本願な感じですが、加藤が色々書くより以下のサイトを見ていただく方が多分良いと思います。
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
ウェブページを1秒台で表示させる原理と方法、その後 | Philosophy Guides
お時間のある方は、このサイトに書かれていることをじっくり読んでみてください。
多少意味が分からなくてもOKです。(加藤も最初はほぼ理解できませんでした)
面倒くさいよ!というあなたの為に!
そんなあなたの為に、加藤がざっくりと要約します!
・ブラウザがウェブページを表示するのには当然仕組みがあるよ!
・読み込む順番とかが結構大事だから、そこを理解して必要に応じて順番を変えるといいよ!
・広告とかは早く表示させたいじゃん?そういう風に順番を組み立てたらいいよ!
・なるべくシンプルな作りのページにすることは大事!
・CSS(スタイルシート)も軽量化するよ!
・画像はなるべく小さいデータサイズにしよう!
加藤が重視したこと
まあ色々あるんですが、エンジニアではない加藤はあまり難しいことは出来ないので、基本的な精神は「簡単にできることは全部やる」です。技術的によく分からないのは仕方がないので置いておいて、何とかできるよね、という施策はとにかく全部やってみました。
その中で効果的だったのは
・画像のデータサイズの縮小
・JS、CSSの読み込み数を減らす&遅延の設定
・ブラウザキャッシュの導入
・CDNの導入
でした。
ブラウザキャッシュとCDNは上の2つが終わってからやるのが良いと思いますが、そんなに難しくないので非エンジニアのサイト運営者もチャレンジする価値ありです!結構効きます。(サーバーの負荷を低減させるのにも繋がります)