パフォーマンス編

performance.jpeg

6. 画像を最適化する

画像サイズが小さければ小さいほどページの読み込み速度は速くなるので、SEO上もUX上も重要だと言われています。しかし、画像サイズを小さくすると劣化すると思っていませんか。実際、同じような品質で圧縮することもできます。Compressor.ioやOptimizillaのようなオンラインサービスを使えば、ドラッグ＆ドロップで簡単に複数画像を圧縮してくれるので便利です。

また、多くの画像をCSSやHTMLでリサイズすると、ブラウザへの負担がかかってしまいます。そのため、できる限り使用するままの大きさで画像を使うことが推奨されています。
　　

7. ページ容量やリクエストを軽減する

ページ容量は2MB以下、HTTPリクエスト数は50以下、というのを目安にすると、ページ速度の低下を防ぐことができます。CDN経由の外部のライブラリやスクリプトをたくさん読み込んでしまうと、それだけでHTTPリクエストが増加してしまいます。不要なものは取り除きたいですが、まれに二重にリクエストしていることがあるので、そうしたものは削ってしまいましょう。

また、ページが完全に読み込まれた後に画像やファイルをロードする非同期通信を使うことで、まずページを表示させるのにかかる時間を短縮することができます。画像の非同期通信として有名なのはLazy Load Plugin for jQueryです。
　　

8. Webフォントの範囲を絞る

多くのWebサイトがWebフォントを使わない文字までフルセットで読み込んでしまうので、ページの読み込み速度が遅くなってしまいます。とりわけ、自作で日本語用のWebフォントを作成した時にはとても重くなってしまいます。

システムフォントを使うか、2〜3フォントに絞るか、Webフォントの軽量化を図るか、一考してみる価値はあるでしょう。

日本語Webフォントについては下記のページも御覧ください。

参考：
印象的でSEOにも有利！日本語Webフォントの設定方法と素材サイト5選｜ferret

また、ferret Oneでも株式会社モリサワが提供する「TypeSquare」と連携しているので、使用を検討してみるのもいいでしょう。

参考：
Webマーケティングのトレーニングが付いているCMSはferretOneだけ｜ferret
　　

9. JavaScriptやCSSを圧縮する

JavaScriptやCSSは余計な改行な空白があるとそれだけで容量が大きくなります。そのため、できる限り余計な文字を取り除いてアップロードしましょう。

また、あまり知られていないかもしれませんが、GZIPという、テキストファイルを圧縮した状態でWebサーバーで読み込める圧縮形式があります。JavaScriptやCSSを圧縮してサーバーにアップロードすれば、読み込み速度高速化に一役買ってくれます。

参考：
gzip圧縮でCSSやJSなどの転送量を減らす方法｜Syncer
　　

10. Service Workerを使ってみる

Service Workerとは、Webページの裏側で働く独立したJavaScript環境のことです。Service Workerを使うと、Webページのオフライン対応をはじめ、プッシュ通信など、これまでのWebではできなかったことを実現することができます。

Service Workerは、Webページとは独立した形で動くものなので、キャッシュのコントロールをしたりできるので便利です。

参考：
パケット容量がいっぱいでも安心！「オフラインファースト」なホームページを作る3つのメリットと実装方法｜ferret