SCSS昔いた会社で、画像の圧縮、CSSなどの外部ファイルを徹底して不要ファイルを削除して圧縮してさらにワンソース化した結果、50位から20位以内に順位が改善したことがあります。今日はWebサイトの軽量化とスピードについて真剣に考えようと思います。FacebookTwitterはてB!Pocket目次どんなにデザインがイケていても見られないWebサイトは価値がないGoogleの評価とは?Webサイトの表示スピードについてWebサイトで使用する画像にまずは着目して欲しい画像を圧縮する細かいアイコンはCSSスプライトにまとめる遅延読み込み(LazyLoad)を使うCSS、HTML、JSなどのファイルの圧縮ファイルを一個にまとめるCMSなどの最初から用意されてる余分なファイルの読み込みをやめるLighthouseでチェックまとめどんなにデザインがイケていても見られないWebサイトは価値がないいつも思っていますが、見られないサイトは価値がないです。見られない原因としては、Webサイトが上位に上がってこない、つまりGoogleに評価されていないWebサイトということです。Googleの評価とは?ざっくり簡単に説明するとユーザーにとって価値あるコンテンツか、ユーザー閲覧時にストレスを与えていない、この2つが主です。この2つが評価されれば自ずと価値あるサイトと認められ、順位も上がってきます。本日は評価対象のユーザー閲覧時のストレスについてフォーカスします。Webサイトの表示スピードについてユーザー閲覧時のストレスの原因の1つに表示スピードがあります。皆さんも、検索したページを開こうとして、なかなか表示されずイライラ、結果閲覧を諦めた経験があるのではないかと思います。Googleはユーザーフレンドリーを目指してるので、表示スピードが遅いのはユーザーに優しくないサイト!ということで低評価の一因にもなり得ます。どのような対処ができるのでしょう?Webサイトで使用する画像にまずは着目して欲しい表示スピードの低下の大きな原因の1つに画像が挙げられます。画像の枚数が多い、画像が大きいなどが読み込みスピードに悪影響を与えています。データ形式は適切か?まず、画像の種類にあったデータ形式かも確認します。データが無駄に肥大します。色数の多い風景写真のようなものが形式がPNGになってないか->JPEGへ変える。アンカーポイントが複雑かつ無駄に多い画像がSVG->PNGへ変えるなど考慮は必要です。画像サイズは適切か?これ一番あるあるです。まんま使わずトリミングしてください。横幅5000pxとかのままであげるのマジ止めてください。最近では画像をオンラインでトリミングできるサービス山のようにあります。画像を圧縮する画像サイズを可能な限りオンラインツールもあります。画像加工ソフトとかない方は、オンラインサービスを使いましょう。jpgOptimizilla細かいアイコンはCSSスプライトにまとめる細かいアイコンはCSSスプライトで一枚の画像にまとめてしまいます。本来5個アイコンがあればサーバに5リクエストするところ、1リクエストですみます。まとめとけ!遅延読み込み(LazyLoad)を使う1ページあたりにたくさん画像があるのであれば、JSを使って画像の遅延読み込みを実装しましょう。画像の遅延読み込みとは画面をスクロールし、画像がディスプレイ上に現れた際に読み込むテクニックです。LazyLoadなどjQueryライブラリを利用すれば比較的実装は容易です。画像が初期ロード時に存在しないことになります。解析されないのでSEO的に困るという場合は画像データは構造化データに入れてあげましょう。改行もファイルサイズアップに貢献しています。CSSは可読性を追求すると改行だらけになりますよね?なので、サイトリリースの際は圧縮してしまいます。可能であればGulpなどのツールを使えばいいのですがなかなか難しいです。オンラインサービスで手間をかけずにやりましょう。Compressorファイルを一個にまとめるCSS、JSなどは思い切ってワンソース化しましょう。一個のファイルにまとめたら、サーバへのリクエスト数も減ります。これもGulpを使えば簡単です。やり方は後日まとめますね。CMSなどの最初から用意されてる余分なファイルの読み込みをやめるWordPressなどでは、予め絵文字とか用意してありますが正直いらんです。WordPressの場合余分なファイルの読み込みは以下で止めることができます。'my_delete_local_jquery');ただし、フォーム系のプラグインを入れていると動かなくなることもあるので気をつけましょう。LighthouseでチェックChromeのサイトチェックツールにLighthouse(Google拡張機能)というものがあります。シークレットブラウザで、使えるようにしておくことがミソです。Lighthouse(Google拡張機能)Chromeでシークレットブラウザで使えるようにする方法は別記事にまとめます。まとめいかがでしたでしょうか?全ての項目を実施すると相当ページの読み込みスピードは早くなります。コンテンツをとことん読んで欲しい時はページそのものをamp化しちゃうのが一番いい気がします。最後までお読みいただきありがとうございました。Hack思ったことを気ままに書いてます。管理人について私、かみーゆ。フロントエンドエンジニア。普段はセブ島でエンジニア講師しています。好きなものは肉とビール。