【2021年版】マジで教えたくはないけどプロがこっそり教えるSEOに効くサイト高速化10の施策

Writer：

Posted date：2021年05月06日

インターネットを作る、全てを人たちが抱える

画像の悩みを解放する。をビジョンに掲げ

ResizeCDNを開発・運営をしている

スペースナビ株式会社の松岡宗谷です。

今回はですね、SEOにバンバン効いちゃうサイト高速化の施策を全部公開しちゃいたいと思います。実はこれ、全てをやれば究極に近い形までの高速化の施策となっておりますのでサイトの表示スピードに関してお悩みの担当者様がいらっしゃれば参考にしてください。

鉄板！サイトを高速化する.htaccess設定
無駄なJSライブラリを削除する
無駄なCSSライブラリを削除する
無駄なフォントを削除する
画像周りを高速化する施策

適切なサイズの画像にする
画像を圧縮する
次世代フォーマットでの画像の配信

画像をCDNで配信する

レンダリングを妨げるリソースの除外

JS周りで改善する
CSS周りで改善する

JSファイルを圧縮する
CSSをインライン化する
動的ページから静的ページに変換する
静的に変換したhtmlファイルを圧縮する
【番外編】格安webサーバーから高速webサーバーに乗り換えよう
まとめ

鉄板！サイトを高速化する.htaccess設定

.htaccessファイルで何をするかなんですが、大まかに

キャッシュ周り設定
URLの正規化

この2点です。2021年になってもこの基本設定がなされていないサイトが多いのでサイトを立ち上げた瞬間にこのファイルを上げると良いでしょう。

	# ファイルの優先順位
DirectoryIndex index.html.gz index.html index.php

# RewriteEngineをOnにする
Options +FollowSymLinks

# 内部ディレクトリ非表示
Options -Indexes

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

#スタイルシート (.css)
<FilesMatch ".css.gz$">
 ForceType text/css
 AddEncoding x-gzip .gz
</FilesMatch>

#Javascript (.js)
<FilesMatch ".js.gz$">
 ForceType application/x-javascript
 AddEncoding x-gzip .gz
</FilesMatch>

#HTML (.html)
<FilesMatch ".html.gz$">
 ForceType text/html
 AddEncoding x-gzip .gz
</FilesMatch>

#PHP (.php)
<FilesMatch ".php.gz$">
 ForceType text/html
 AddEncoding x-gzip .gz
</FilesMatch>

# https強制
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

# index名削除
RewriteEngine on
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ https://%{HTTP_HOST}/$1 [R=301,L]

# index名削除
RewriteEngine on
RewriteCond %{THE_REQUEST} ^.*/index.php
RewriteRule ^(.*)index.php$ https://%{HTTP_HOST}/$1 [R=301,L]

# www削除
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.(.*) [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [L,R=301]


# Expires を指定する方法
<IfModule mod_expires.c>
 ExpiresActive On
# ExpiresActive Off
 # 全てをキャッシュする
 # ExpiresDefault "access plus 1 days"

 # HTML
 ExpiresByType text/html "access plus 7 days"

 # Favicon
 ExpiresByType image/vnd.microsoft.icon "access plus 3 month"
 ExpiresByType image/x-icon "access plus 3 month"

 # CSS
 ExpiresByType text/css "access plus 1 year"

 # JavaScript
 ExpiresByType application/javascript "access plus 1 year"
 ExpiresByType application/x-javascript "access plus 1 year"
 ExpiresByType text/javascript "access plus 1 year"

 # 画像や動画
 ExpiresByType audio/ogg "access plus 3 month"
 ExpiresByType image/bmp "access plus 3 month"
 ExpiresByType image/gif "access plus 3 month"
 ExpiresByType image/jpeg "access plus 3 month"
 ExpiresByType image/png "access plus 3 month"
 ExpiresByType image/svg+xml "access plus 3 month"
 ExpiresByType image/webp "access plus 3 month"
 ExpiresByType image/avif "access plus 3 month"
 ExpiresByType video/mp4 "access plus 3 month"
 ExpiresByType video/ogg "access plus 3 month"
 ExpiresByType video/webm "access plus 3 month"

 # Other
 ExpiresByType text/x-cross-domain-policy "access plus 3 month"

 # データはキャッシュさせない
 # ExpiresByType application/json "access plus 0 seconds"
</IfModule>

注意点としては、ローカルで開発している時には# https強制の箇所を削除するかコメントアウトしないと正しくローカルで表示されなくなってしまうのでローカルと本番環境で切り分けが必要です。

WordPressやフレームワークで構築する場合は既存の.htaccessを削除せずにトップディレクトリにある.htaccessのソースコードの1番上に‪追加する形で記述しましょう。‬

無駄なJSライブラリを削除する

UXSEO [3億PVから研究した2021年最新のSEO決定版サービス]にてB to Bという形で多くのクライアント様のサイトをSEO施策をさせていただいているのですが、ほぼ全て97%のサイトで無駄なJSライブラリがございます。

やはりクライアント様がWeb制作会社さんに頼む時に良い感じのデザインにしてくれ！と頼むのも気持ちはわかります。

そうやって生まれたサイトにはライブラリに次ぐライブラリを重ねたサイトが出来上がって見た目は良いですが、途中で使われなくなったのでしょうか、そんなJSライブラリも読み込まれている状況も多々あります。

使うにしてもJquery1つのみにしましょう。え？ここでまさかのJqueryだと思いましたよね？エンジニアでもありますのでお気持ちはものすごくわかります。新しい技術を取り入れたいですもんね。

ただ、今回はSEOを第一に考えた施策であり、無用なライブラリやフレームワークを一切省く事が肝要です。

ResizeCDNでは‪「jquery-3.5.1.min.js」を採用しています。‬

jquery CDN配信としては

Google CDN
Microsoft CDN
CDNJS CDN
jsDelivr CDN

があると思いますが、遅いので自サーバーに配置して利用致しましょう。

無駄なCSSライブラリを削除する

人は何故Bootstrapを使ってしまうのでしょうか？SEO的にもHTMLコーディング的にもデザイン的にもCSS規約にしても害悪しかありません。

他にもJavaScriptライブラリで入れてしまったSlickなどのCSSライブラリも即削除しましょう。

今時のCSSはCSSだけでも様々な動きが簡単に実装できるのでCSS周りはシンプルに。

無駄なフォントを削除する

まだ英字ならギリギリSEO的に問題はありませんが、日本語のフォントを使いたくなるのはわかりますが、SEO観点からするとNGです。

平均的に日本語のフォントファイルに内蔵されている文字数は約7,600文字程度です。それが英語だと100文字程度です。日本語のフォントがいかに重いか文字数だけでもわかります。

実際に日本語フォントを取り入れているサイトを表示してもページが表示される時にデザインなどは表示されるけど、文字だけ一瞬だけ表示されない時ってあるじゃないですか。それって気持ちよくないし、やはりUX的にも外部フォントは取り入れないべきではないでしょうか。

画像周りを高速化する施策

webページを閲覧した時にテキストも多いですが、やはり画像って多いんです。ダウンロード容量的にも画像は大きくて最適化を行うとSEO的にも大きな施策になります。

施策と言ってもそこまで難しいわけではないので一番初めに取り掛かっても良いかもしれません。

適切なサイズの画像にする

よくあるのが小さな表示のサムネイルにも関わらず読み込み画像の大きさは2080×1480サイズで容量は2MB以上、なんてサイトも多く存在します。大体、記事表示は10本ある事がありますので上記の計算で行くとサムネイル画像だけで20MBになる事にもなりかねないので2パターンほどの大きさを用意して表示するのがベスト。

リスト形式でのサムネイル画像(640×400あたり)
記事中で表示するサムネイル画像(1280×800あたり)

画像を圧縮する

画像を圧縮するだけで最大75%ほど容量が圧縮されるなんて事も。どんな画像ソフトで編集してもやはりアップする最終段階で画像を圧縮したほうがいいです。

アプリでもWebでも言語でもclでも方法は豊富にありますので好きな手法で圧縮を行なってみては。

次世代フォーマットでの画像の配信

最近流行のWebpやAVIF拡張子での配信ですね。

ResizeCDNではWebpでの配信を推奨しております。

	/* Webp配信する例 */
<img src="https://resizecdn.com/assets/img/media/article/26.jpg" width="1600" height="1064">

↓

<picture>
 <source type="image/webp" srcset="https://resizecdn.com/assets/img/media/article/26.webp">
 <img src="https://resizecdn.com/assets/img/media/article/26.jpg" width="1600" height="1064" decoding="async" loading="lazy">
</picture>

PageSpeed Insightsで既存の画像のままの評価とWebp配信した後での評価を試してみて下さい。画像が多ければ多いほど効果が高い施策となっております。

画像をCDNで配信する

一旦ここでCMに入ります。

やはりそれでも毎回画像をWebp画像に変換して煩わしいHTMLを書かなければいけないのは大変じゃないですか？

それをResizeCDNは全部を請け負って配信できちゃいます。

ResizeCDNで楽できるポイント

既存画像からWebp画像を自動生成
画像をいい感じに圧縮
pictureタグを自動記述
decoding="async" loading="lazy"もよしなに
高速サーバーから超スピード配信
画像をいい感じに圧縮
リサイズもリアルタイムで可能
HTMLから部分変換・一括変換が可能
PHPからも部分変換・一括変換が可能

従来通り、今まで使用していた画像のままでResizeCDNを利用すると上記の便利な事が簡単にできちゃいます。

興味がある方は是非ResizeCDNを試して下さい。

ResizeCDN - 画像特化型CDN

レンダリングを妨げるリソースの除外

ここ最近で言うとクライアント様のサイトで一番改善したい部分がこちらになります。

ライブラリの重装備をしたサイトはレンダリングを妨げまくるのでSEO観点からもUX観点からも最悪でしかないと言うのが率直な印象です。

本当のプロはライブラリを使用せずに全く同じ動きを実装できますのでライブラリを多用するWeb制作会社さんと契約しているのであれば他社に乗り換えるのも検討した方が良いかもしれません。

JS周りで改善する

改善するにあたって属性を使用しないでheadタグ内でJavaScriptを呼び出しているサイトをちらほらとお見かけいたします。

あまりよろしくないのでまずは属性のお話から致しますね。

JavaScript周りで改善するには属性を利用する手段がありますが、、、

Async属性 – HTMLパーサー（つまり、訪問者のブラウザなど）が残りのHTMLを解析しながらJavaScriptをダウンロードできるようにします。つまり、ファイルのダウンロード中に解析が完全に停止することを防ぎます。ただし、ひとたびダウンロードすると、スクリプトを実行するためにHTMLパーサーを一時停止します。
Defer属性 – HTMLパーサーに、残りのHTMLを解析しながらJavaScriptをダウンロードさせ、さらに、HTML解析が完了するまでスクリプトの実行を待ちます。

async vs defer attributes

HTTP/1なのかHTTP/2なのかで議論が分かれるかと思われます。

そんな中、化石的な手法ですがbodyタグの最後に記述する方法がある意味でのベストプラクティスではないでしょうか。

上記、属性2つにつきましては記述する場所が曖昧になる事が多いです。それだと場所がバラバラで属性もバラバラになる可能性がありますので管理する観点からもいい状況とは言えません。

bodyタグの最後に記述するこの1点を守ればソースコード上からも見通しが良くなり、かつページを表示する際にレンダリングを妨げる事がなくなりますのでこの問題も古くからの手法を守り通す事が重要となっております。

CSS周りで改善する

よくお見かけするのが複数の大量のcssファイルを読み込んでいるサイトさんが多いです。最近でもクライアント様のお話になりますが20以上のcssを読み込んでいて、詳しく追ってみると古いcssと新しいcssを担当者さんがわからないまま読み込んでいた事例がございます。

最適化を行えば3つほどのCSSファイルで十分なのではないでしょうか？

core.css
そのカテゴリー内のcss
そのページのcss

基本的にはこの3つに切り分けて考えるとcssファイルもシンプルになります。

使っていないcssの中身を削る事もいい事だとは思いますが、作業量に対して効果が微々たるものすぎてそこまでお勧めしません。

例外として5万行以上のcssファイルを読み込んでいたサイトさんもありますので、そうゆう場合はガシガシ削除した方が(なんなら0から記述していった方が早いかも？)良いでしょう。

JSファイルを圧縮する

実はここら辺から技術寄りのお話になってきて本当は教えたくないのですが、この記事では特別に載せる事にしました。jsファイルを圧縮するなんてほとんどのサイトがやっていないのでなんの施策も行なってないサイトに勝つ事が容易になってきます。

大手のギッチギチにSEO対策をしているメディアさんに勝つには必須の施策ではないでしょうか。

今回はPHPでJavaScript圧縮ファイルを生成する例をご紹介致します。

	<?php
define('PATH', $_SERVER["DOCUMENT_ROOT"].'/');

// 作成リスト(あくまで例
$js_array =array (
	'assets/js/library/highlight-10.7.1.min.js',
	'assets/js/library/jquery-3.5.1.min.js',
	'assets/js/core.js', 
	'assets/js/root/common.js', 
	'assets/js/media/article/common.js', 
);

foreach($js_array as $key => $value) {
	// 古い圧縮jsファイル削除
	unlink(PATH.$value.'.gz');
	// 元ファイルの内容を読み込む
	$code = file_get_contents(PATH.$value);
	// gzip圧縮処理して同一フォルダにファイルを作成
	$gzip = gzopen(PATH.$value.'.gz' ,'w9');
	gzwrite($gzip ,$code);
	gzclose($gzip);
}

大体ですが、3分の1以下の容量まで圧縮が可能です。

CSSをインライン化する

CSSのインライン化はjsの圧縮以上にインパクトがある施策となっております。UXSEOでは自動実装となっておりますが、こちらのソースコードに関しては企業秘密とさせていただきます。

手法としては

インライン化できるアプリを使用する
Web上で変換できるサービスでインライン化を行う
PHPなどでゴニョゴニョして変換する
CLで変換できるライブラリを使用する
手動で行う

基本的にはこの5点があります。おすすめはやはり‪「PHPなどでゴニョゴニョして変換する」です。‬

Webサイトの悩みのタネである表示スピードの3割以上はこの施策で改善致しますので施策としてはマストなので是非やってみて下さい。

注意点としてはインライン化を行なった後に、編集はどうするの？って声があるのですが、もちろんですが、元のCSSファイルを編集します。

インライン化はデプロイすると言う意識で行うと運営・保守する上でも腹落ちすると思います。

動的ページから静的ページに変換する

結論ですが、基本的にWordPressは激遅です。その遅いWordPressでどうすればSEOで優位に立てるかと言ったら動的ページから静的ページに変換する事が重要です。

もちろん手動で静的ページにしていたら時間がいくらあっても足りません。

UXSEOでは3時間おきに最新ページを生成しております。

動的ページから静的ページに変換する事で今まで積み重ねた施策がさらに最適化されますので高速化のメイン施策とも言えるでしょう。

静的に変換したhtmlファイルを圧縮する

静的に変換したhtmlファイルを更に圧縮を行います。最後の仕上げです。

	// 元ファイルの内容を読み込む
$code = file_get_contents($directory_path);
// gzip圧縮処理して同一フォルダにファイルを作成
$gzip = gzopen($directory_path.'index.html.gz' ,'w9');
gzwrite($gzip ,$code);
gzclose($gzip);

今まで最適化してきたファイルを更に4分の1以下にする事ができるんです。やばいっすよね。この時点で恐ろしいほど爆速になっていると思われますので是非体感して下さい。

因みに、ResizeCDNの全ページは上記の施策を全て行なっておりますので、施策してどれくらい効果があるのか試す事がめんどくさい人は回遊してみて下さい。日本の中でも10本の指に入るほど高速化されたページ遷移体験ができるはずです。

【番外編】格安webサーバーから高速webサーバーに乗り換えよう

番外編となりますが、クライアント様の問題をリスト化した時に必ずと言っていいほど格安のwebサーバーを借りている確率が高いです。

安いサーバーの何が悪いかと言いますと(ここでは格安サーバー＝共有サーバーと定義致します)、回線自体を共有していますので運が悪いと常時回線が遅い状態のサーバーもあり得ると言う事です。

他にも

大事な設定ができない
CPUの性能が悪い
大量のアクセスを捌けない

などがございます。簡単に例えますとマンションで共通で利用できるwifiのような性能と言う事です。絶対使いたくないですよね。ですが、ビジネスで使っていらっしゃる会社が多いのが現状です。

ResizeCDNは現状ConohaのVPSで運営しています。4つほどのVPSを借りてWebサーバー・データサーバー・キャッシュサーバーに切り分けてますね。

Conohaはここ1年でめちゃくちゃいいサーバーを提供しているなと実感しています。

本当にこんなに良いサーバーを驚くほどの低価格で借りれるのでVPSであればConoha一択ですね。クラウドであればAWSかGCPですが、個人的にはGCPがオススメです。

まとめ

いかがだったでしょうか？

いやー本当に教えたくないんですよね。やっぱりSEO会社としてやっていますし、ガンガンやっている施策ばかりを載せましたのでマネするだけで75%のSEO施策はコンプリートできる内容です。

技術的にもそこまで難しくない範囲だと思いますので是非チャレンジしてみて下さい。

と言う事で今回はここまでで！

あ、SEOで困った事がありましたらUXSEO [3億PVから研究した2021年最新のSEO決定版サービス]もよろしくお願いします。

ResizeCDNを利用して画像の悩みを一気に解決しませんか？

圧縮はもちろん最新画像フォーマットにも対応
ResizeCDNを利用すると圧縮・最新画像フォーマットに自動対応して配信できます。
全体対応・特定の箇所のみと柔軟なCDN配信が可能
プッシュ型ならでは柔軟な対応とハイスピード最短1分でCDN化ができます。

→より詳しく

今すぐ始める

お問い合わせしてみる

著者プロフィール

松岡宗谷

画像特化型CDNサービス ResizeCDN https://resizecdn.com/ を開発・運営しています。スペースナビ代表取締役。スタートアップ界隈でCTO→Sharetube創業→スペースナビ創業→画像に特化したCDN開発。個人の夢は完全義体化。会社の夢は宇宙事業。プログラマーは死ぬまで現役でありたい

Twitter：@mtoksuy

前の記事お金のデザインが運営するお任せ資産運用サービス「THEO」のサイトでResizeCDNとUXSEOをやってみた

次の記事「次世代フォーマットでの画像の配信」はResizeCDNで簡単に解決出来る！！