【実用的】「サイトちょっと重いかも」という時に見直すポイントまとめ

この記事はこんな人におすすめ

・サイトの動きが重いんだけど何をしていいか分からない

・簡単に早くなる方法が知りたい

「最近サイトの動きが重いんだけど、何をやっていいか分からない、、」

サイト運営をしていてそう思うことはありませんか?

今回は、そんな時に使える「実用的な」見直す点をまとめてみました。

出来るだけ手軽に対応できることを中心に、まず見ておいて欲しい部分をご紹介しようと思います。

特にサーバー周りはWEBエンジニアになりたてだと難しい部分はあるかもしれませんが、参考に進めてみてください!

WEBサイトのスピードの確認方法

体感でもいいのですが、まずは基準が欲しいので PageSpeed Insights を使用して速度を測ります。

まずはPageSpeed Insightsにアクセスし、自分のサイトのURLを入力。

結果が出たら点数とラボデータの部分を確認してみましょう。

ちなみにこのサイトの結果はこんな感じです。

スマホ

PC

かなり早いですね!少しは説得力が出たかもしれません。笑

大体ですが、この点数の部分が50以下(赤くなる)であればかなり改善の余地ありです。

場合によっては60,70点でも体感遅いと感じる時もあるかと思います。

ここを頑張って80点代に乗せていきましょう!

 

フロントエンド周りの改善点

CSSやJSのファイルサイズが大きい

長く運用されているサイトやコンテンツが多いサイトであれば、CSSやJSファイルのサイズが比較的大きくなっている場合があります。

その場合は以下のどれかの方法で対応しましょう。

対応方法

表示されているページに使われていない、読み込む必要のないCSSやJSの記述はただ重くなるだけなので分割しましょう。

方法としては同じテンプレート毎に分けて、ページ毎に必要なCSS、JSを読み込む。

例)

  • 共通のCSSは全ページで読み込む
  • トップページはtop.css、記事一覧はarticle_list.css、記事詳細はarticle_detail.cssなどに分割する
  • それぞれのページで共通CSSと個別のCSSを読み込む(JSも同じ)

CSSに関しては、さらにPCとスマホをユーザーエージェントに応じて分割する方法も取れます。

詳しくは以下の記事で書いているので、確認してみてください!

>【実用的】なんとなくバランスが良くない時に使えるCSSのコツまとめ【駆け出しWEBエンジニア向け】

画像のサイズが大きい&画像を圧縮していない

意外と見落としがちなのが、画像のサイズが大きすぎるということ。

これを改善するのはマストなので必ず行なってください!

対応方法

まず、重いと感じるページに表示されている画像を右クリックして「新しいタブで画像を開く」などで画像を見てみましょう。

表示されているのがそのまま画像のサイズです。もしこれが、サイトで使用している大きさより必要以上に大きければ、トリミングして小さくしましょう。

次に画像を圧縮します。圧縮すると画像は荒くなりますが、分からない程度に圧縮してくれるツールがあるのでそちらを使います。

Tiny PNG にアクセス。

Drop your .png or .jpg files here!」という部分に、画像をドラッグアンドドロップするか、クリックして画像を選択。

すると圧縮が始まるので、「Download All」を選択してダウンロードし、再度サイトに掲示。

これで圧縮された適切なサイズの画像を使うことができます。

画像を遅延読み込みしていない

レイジーロード(Lazy Load)ともいいますが、画像を遅れて読み込ませる方法です。

ページ読み込み時に全ての画像を読み込むとかなりの時間がかかります。画像が多くあるページであればこれをするだけで目に見えて早さが変わります。

たいていの方法は、スクロールをしていって画像があるエリアに入ってきたら画像を読み込むといったものです。

対応方法

一番簡単な方法は外部ライブラリを使用する方法です。

ここでは Lazyestload.js を使った方法をご紹介します。

こちら にアクセスし、右上にある緑の「code」をクリックし、Download ZIPでファイルをダウンロードします。

ZIPを解凍し、src/jsの中にある lazyestload.js をサイトで読み込みます。

以下のようなimgタグがあった時、

  <img class="lazyestload" src="images/placeholders/forest-compressed.jpg" data-src="images/forest-compressed.jpg">
  <script src="js/lazyestload.js"></script>

クラスにlazyestloadをつけて、data-srcに表示したい画像、srcには待機中に表示したい画像(幅40px程度の軽いもの、空でも大丈夫)を設定すれば簡単に実装できます。

デモの動きはこちらを参考にしてください!

ちなみにデモのようにぼかしを入れるにはCSSに以下のコードを追記します。

img {
    transition: filter 0.3s;
}
img.lazyestload {                
    width: 100%;
    filter: blur(8px);
}

WEBフォントの読み込みが多い&display=swapをつけていない

そもそもですが、WEBフォント自体読み込みが遅いので使用しないか、使用する際も必要最低限の読み込みに済ませましょう。

複数のWEBフォントを使用しているとそれだけでも読み込みには結構な時間がかかります。

対応方法

googleフォント等を使用している場合は以下のように&display=swapをつけた形で読み込みましょう。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">

これによって、読み込みの重いWEBフォントですが、読み込み中にもレンダリングが始まるので少し早くなります。

外部ライブラリの最小化(minify)バージョンを使ってない

外部のライブラリ(jQueryやその他CDN等で読み込んでいるもの)を読み込む際には出来るだけ最小化されたものを読み込みましょう。

対応方法

外部のライブラリとして読み込むファイルをxxxxx.min.jsというファイルを使う。

headにscriptタグを入れている

もし、headタグにscriptタグを入れていたら即フッターに動かしてください。

headにscriptタグが記載されていると、body内のレンダリングが遅れ、ページのファーストビューを表示するのが遅れます。

そうなるとユーザーは一定時間白い何も表示されていないページを見なくてはならないので、不必要なscriptは</body>の直前で読み込むのがおすすめです。

ただし、例外もあります!

読み込みの順番によっては動かなくなるもの、もしくはheadに書くことが推奨されているもの(Google Analitycsなど)は例外なので、素直に従うか、動かして大丈夫か分からなければそのままにしておくことをおすすめします。

jQueryを使用している

決してjQueryが悪いわけではないです。

むしろかなり高機能で昔から生き残ってる精鋭でございます。(僕もお世話になってます)

ただ、多機能がゆえに速度面で考えると注意が必要な部分もあります。

プロジェクト次第ですが、かなりスピードを重視するプロジェクトであればネイティブなJavaScriptで対応する方が無難だと思います。

それでも「jQueryで少しでも早くしたいんだ!」という場合は、以下の点に気をつけて見直してみてください。

セレクタは出来るだけIDで指定する

とにかくjQuery側でDOMを探す手間をかけさせない。jQueryファーストで書いてあげる。

出来るだけ1発で取れるIDが最高。クラス指定はかなり速度が落ちるのでどうしても使わないといけない場面以外はおすすめできません。

とにかく無駄な回り道はさせない。

複数回使うセレクタは変数で使い回す

これも同じで、とにかくjQuery側でDOMを探す手間をかけさせない。

同じセレクタを変数化しないまま繰り返し使ってしまうと、その度にjQueryはそのセレクタを探しに行ってしまうのでかなりの速度ロスになる。

複数回使うのであれば必ず変数化すること!

var target = $('.target').hide();
target.show();

同じセレクタに対する処理はメソッドチェーンで書く

以下のような同じセレクタに対して連続する動作の場合、(文字色を赤くしてフェードインさせる)

$('.target').css({'color':'blue'});
$('.target').fadeIn();

ではなく

$('.target').css({'color':'blue'}).fadeIn();

このように書きましょうということ。見た目もこっちの方がわかりやすいですね。

バックエンド・サーバー周りの改善点

大量にデータを取得している&ループしている

DBから大量にデータを取得してページを表示している場合は、速度が遅くなる場合があります。

データが膨大でない場合も、処理の中でかなりの数のループが動いていたりすると速度に影響が出る場合があります。

対応方法

まず、取得しているデータは本当に全て必要なものかどうかを検討し、絞れる部分は条件を追加して取得レコード数を減らします。カラムも必要のないものは減らせるのであれば減らした方がいいでしょう。

次にそれでも大量データを取らなければいけない場合は、取得速度を出来るだけ早くしましょう。

具体的には、「テーブルにインデックスを貼る」「ビューを作る」が簡単なものになります。

テーブルにインデックスを貼る

インデックスについては、こちらがわかりやすいのでご覧ください!

実際の貼り方は、検索時のテーブルがcontacts 、よくselectで使うカラムがuser_idだとすると、

CREATE INDEX インデックス名 on テーブル名 (カラム名);
CREATE INDEX user_id_index on contacts (user_id);

このような形で貼ることができます!

これによって以下のようなselect文の高速化を狙うことができます。

SELECT * FROM contacts WHERE user_id = 10;

ビューを作る

よく使うselect文が、「毎回同じ条件で取得」している場合はビューを作ることによって高速化できます。

ビューというのは簡単にいうとselect文の条件で絞り込んだ状態の新しいテーブルを作っておけるイメージです。

もし、「商品のテーブル(products)で在庫があるもの全部」を取得するSQLが以下だったとしたら、

SELECT * FROM products WHERE stock > 0;

毎回同じSQLが発行されるため、在庫のある商品テーブルとしてビューを作成しておきましょう。

CREATE VIEW stocklists AS SELECT * FROM products WHERE stock > 0;

これで今度から在庫確認をする際はproductsではなく、stocklistsにselectをかけるだけで取得できるようになります。

アクセス負荷が高い

単純にアクセス負荷が高くて、遅くなっているパターンでは環境やその時によって対応方法が異なるためこれがいいというのがいいずらいです。

レンタルサーバーなどの共有サーバーであれば、同じ区画で利用しているユーザーのアクセス負荷のせいでその他のユーザーのサイトが重くなっている場合もあります。

レンタルサーバー以外であれば、一般的にはロードバランサーでの負荷分散や、メモリが足りなくなっているのであればswapを作るなどのような基本的な部分の他に、エラーログのチェックなどをして原因を精査します。

gzip圧縮していない

gzip圧縮はファイルのサイズを小さく圧縮する方法で、データ量が軽くなるため速度の改善に効果があります。

mod_deflateが使える場合は.htaccessに指定の記述をすることで、サーバー側でファイルを圧縮することができます。

mod_deflateが使えるかどうかはこちらのサービスで確認できます。

自分のサイトのURLを入力して「test」を押して下の表示が出ればmod_deflateが使えます。

対応方法

使用できるとわかった方は、以下の記述で.htaccessに追記します。

圧縮がおすすめのファイルはhtml,css,jsのテキストファイルです。

※ 必ずバックアップをとった状態で作業をしてください。

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain text/html text/css
AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/rss+xml image/svg+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject application/x-font-ttf font/eot font/ttf
</IfModule>

追記後は必ずWEBサーバーの再起動をしてください。

ブラウザキャッシュ(cache)させてない

ブラウザキャッシュというのは、ブラウザで一度表示したページをパソコン内で保持し、再度同じページを表示する時に保持しているデータから読み込み表示速度を速くするというような仕組みです。

今回は上記と同じように.htaccessに記載する方法をご紹介します。

対応方法

キャッシュには有効期限を設定します。

googleの推奨する有効期限は、1週間以上から最大1年程度ですが、更新頻度が高いサイトはCSSやJSのキャッシュは短め(1日も可)でも大丈夫です。

その代わりにキャッシュして速度改善するという効果は薄くなってしまうことにご注意ください。

ちなみに、1時間は"access plus 1 hours"、1日は"access plus 1 days"、1週間は"access plus 1 weeks"になります。

※ 必ずバックアップをとった状態で作業をしてください。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 months" 
ExpiresByType image/jpeg "access plus 1 months" 
ExpiresByType image/png "access plus 1 months" 
ExpiresByType image/x-icon "access plus 6 months" 
ExpiresByType text/css "access plus 1 weeks" 
ExpiresByType text/javascript "access plus 1 weeks" 
ExpiresByType application/javascript "access plus 1 weeks" 
ExpiresByType application/x-javascript "access plus 1 weeks"
</IfModule>

まとめ

お疲れ様でした!

たいていの場合はここにあることを対応すれば、かなりスピードが改善されているはずです!

是非もう一度PageSpeed Insightsにアクセスして計測してみてください!