サイトの表示速度を上げる方法を、4つのポイントに絞って簡潔にお伝えします。
サイトの表示速度が遅い、具体的にどう対処すればよいかわからないを解決していきます。
本ブログ「テクノドア」も４つのポイントを実践し、グーグルのスピードチェックツールで高評価を受けています。
Googleは、サイトスピードについて以下のように述べています。
表示速度が1秒から3秒に落ちると、直帰率は32%上昇する。 表示速度が1秒から5秒に落ちると、直帰率は90%上昇する。 表示速度が1秒から6秒に落ちると、直帰率は106%上昇する。 表示速度が1秒から10秒に落ちると、直帰率は123%上昇する。
Find out how you stack up to new industry benchmarks for mobile page speed
せっかく良い記事を書いても、サイト速度が遅いことであなたのサイトが見られなくなる可能性があります。
以上の４つのポイントを意識し、改善を行うことで快適に表示できるサイトが手に入ります。
それでは、解説していきます。
初めに：現状を分析しよう
改善前のサイトスピードをチェックしましょう！
googleが提供しているツールです。
50未満をたたき出した場合は絶対に改善しましょう。
50～80は大体OKです。
80以上はさらなる高みを目指しましょう。
画像の圧縮
ページを読み込む際の容量が、比較的大きいのが画像となります。
使用する画像はあらかじめ圧縮してアップすることを心がけましょう。
某有名なエンタメ系のサイトでも、調べてみると、メインビジュアルすら数百KBの容量にするルールが徹底されていました。
画像の圧縮の方法を2種類ご紹介します。
方法１：WEB上でツールを使用し、圧縮する
ＷＥＢサイトにアクセスして、画像をアップするだけで自動的に圧縮を行ってくれます。
私が良く使うサイトはこの二つです。
・image compressor（通称ゴジラ）
・tinypng（通称パンダ）
方法２：Photoshopで調整する
Photoshopで保存時に画質を調整してください。
サムネイル用の画像を加工して作成する場合は、元サイズで保存してしまうとかなり大きいサイズになってしまう可能性があるので、保存する際に圧縮をしましょう。
方法３：Wordpressプラグインで調整する
よく紹介されているのが、
プラグイン名：EWWW Image Optimizer でしょうか。
プラグインで検索しインストールしてください。
設定が日本語で表示されるので、非常にわかりやすく使いやすいです。
動画について
動画については、youtubeにアップし、埋め込むのが無難で重くなりません。
自分で動画をアップする場合は手間が増えるので、よほどの理由がない限りyoutubeでよいと考えます。
ソースコードの圧縮
HTML、CSS、Javascriptなどのファイルサイズを軽くします。
人間は、改行やスペースなどを駆使して見やすくコードを書きますが、コンピューターがコードを読む際は改行もスペースも不要になります。（実は、改行1つで約1文字、半角スペースで約0.5文字分消費しています。）
文字数を減らすことでそれぞれのファイルサイズが軽くなります。結果、読み込み速度を上げることができます。
方法１：Web上でツールを使用し、圧縮する
・ラッコツールズ（通称ラッコ）
…ゴジラで画像を圧縮してラッコでHTMLを圧縮します。
方法２：エディターで圧縮する
テキストエディタ―などで圧縮できる機能がついていることが多いです。
それぞれのエディターで調整が可能です。
方法３：Wordpressプラグインで調整する
Autoptimize プラグインのレビューが多い印象です。
ただし、Javascriptで不具合が起きる。
とのレビューもあったので、Javascriptはバックアップを取って行うか、安全を取って行わなくてもよいかもしれません・・。
手動でソースを変更する予定がある場合は注意しましょう。
圧縮したソースを触るのは大変です。
整形ツールなどで元にも戻せますが、頻繁に手動で触るファイルは手間がかからないように圧縮しないか、バックアップを取って見やすい状態のファイルを残しておきましょう。
Lazy Load対応
レイジーロード、遅延読み込み。
主に画像を適切なタイミングで読み込んで処理しよう、という調整になります。
通常はアクセス時（サイトに接続したタイミング）で全部の画像を読み込むところを、
ページを読み進める適切なタイミングで、画像を読み込むようにすることで初期表示の速度を上げます。
方法１：JavaScriptで実装する
JavaScriptで設定します。
こちらで詳しく説明されています。
https://cluster-seo.com/blog/lazy-load-javascript-library.html
CLUSTER SEO BLOG 様
JQueryをよく使用していましたが、最近はJQueryの評判をあまり聞かないので、Javascriptでの実装をお勧めします。すでに何等かでJQueryを利用しているのであれば、JQueryのLazy Loadでも問題ないです。
方法２：Wordpressプラグインで調整する
Native Lazyloadが簡単です。
インストールして、有効にすればOKです。
おまけ：chromeのLazyLoadを利用する。
imgタグに、loading=”lazy”を書いてあげるだけ。超簡単です。
なお、safariなどには無視される模様。
今後、全ブラウザで対応できるようになるとよいですね。
キャッシュ化を行う
簡単に説明すると、毎回サーバーにすべての情報をとりに行くと通信に時間がかかります。更新頻度の低いものを、あらかじめ「キャッシュ」として保存をしておくことで通信料を減らして速度を上げることができるようになります。
※ほかの3つよりも少し難しい設定になります。サイト全体に影響を及ぼすので、.htaccessがわからない場合はスルーして構いません。
方法１：.htaccessに記述して対応する
mod_expires でファイルごとにキャッシュの保存期間を設定できます。
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/x-icon "access plus 1 months"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/pdf "access plus 1 weeks"
</IfModule>.htaccessはいろんな部分に影響を及ぼす可能性があるので、
必ずバックアップを取ってから作業を行いましょう。
方法2：Wordpressプラグインで調整する
WP Super Cache が人気です。
インストール後設定画面を開き、（推奨）にチェックを入れていくだけで設定は完了です。
※注意点※
上記でふれた.htaccessを自動的に書き換えます。
不具合が出る可能性もあるので、必ずサイトのバックアップを取ってから行いましょう。
まとめ
サイト速度を上げる４つのポイントについて進めてきました。
当サイト、テクノドアの数字は以下のようになりました。
スマートフォン
パソコン
WordPressを利用している場合は、各プラグインを入れていくだけなので敷居はかなり低いです。
サイト表示を早くして、ユーザーの離脱防止に役立ててください。
