Google PageSpeed Insightsで100点を取って、SEO対策をする方法

2020/2/15 技術ブログ

The following two tabs change content below.

夜桜 なの

取締役 ： NEET株式会社
夜桜　なのです。 バーチャル女の子をしてるなの。 陸上自衛隊卒のレトルトカレー評論家 高校生の時にフルアセンブラでウィルスを作って、他人に渡したものの、児童相談所に通報されなかったという経歴があるの。 返せなくなった211億円のバーチャル借金があるの。ぐすぐす；； 取締役ブログ事業部部長、音楽事業部部長、IT業務部部長 etc...

Google PageSpeed Insightsで100点を取るための方法

 

この結果は、ネットが比較的混雑しやすい 平日18時代～19時代に継続的に
出た結果です。

（今計測して、この値が出るとは限りません）

※アフィリエイトも行なっているため、モバイルではかなり高速であるものの、80点台となります。

まずはサーバー選定

エックスサーバーに申し込んでサイトを運用する。

エックスサーバーは、今や日本国内最速とは言い難い部分もありますが、バックボーンに関しては2019年6月現在、レンタルサーバー専業業者としては最大級の1.39Tbpsの回線帯域を所持しています。

また、CPUも最新のCPU Intel(R) Xeon(R) Gold 6126 CPU 2.60GHz (12コア24スレッド）を各サーバーに2つずつ搭載しており、メモリには最新のDDR4メモリを使用しており、ほんどと言っていいほどCPUが過多になることはありません。

メモリも256Gバイトと非常に広大であり、多くのメモリをキャッシュ領域として利用されています。

今現時点でメモリ使用量を計測しても、256Gの半分にも満たない50Gバイト程度しか使用していないため、空き領域をフル活用してキャッシュとして利用できるわけです。

更に言えば、RAID0+1構成のフルSSD構成となっています。

1サーバーあたりのユーザー数も約170名程度と詰め込みすぎず、多くのユーザーに広大なリソースを安価で割り振ることができます。

サイト開発はどうしたほうがいいの？

サイト開発にはRaspberry Pi 4 Model Bを使用する

Raspberry Piシリーズの中では比較的高性能なものになりますが、明らかに今現在流通しているパソコンや現在提供されているレンタルサーバー等と比較して、スペックがものすごく低く抑えられています。

その為、そこそこ安価なのですが。

しかし、スペックが低いが為に、サイト開発を行なうのにおいて、メリットがあります。

  • CPUが遅いからこそ、どこで遅いかすぐに判明させることができ、容易に解決させるヒントとなる
  • メモリ空間が少ないからこそ、どこでメモリを使いすぎているかすぐに判明させることができ、容易に解決させるヒントとなる

Raspberry PiにはLinuxというよりDebianをベースとしたRaspbianをインストールすることができ、他にもLinuxやFreeBSDをインストールすることができ、開発目的だけではなく、低スペック低電力サーバー運用をすることも可能です。

また更に低スペックなRaspberry Pi 2も販売されており、LANポートも100Mbpsで実測も100Mbpsも余裕で出ないとかいうのもあります。

Raspberry Pi 4 Model B 4 GB キット-ラズベリーパイ 4/ 冷却ファン アルミニウム合金ケース/ 5V/3Aスイッチ付電源 32GBのmicroSDカード カードリーダー/HDMIアダプター ドライバー /4GB RAM

新品価格
￥15,900から
(2020/2/13 03:41時点)

アフィリエイトをするには表示が最高速であるA8.netを使用する

顧客満足度も通年ナンバーワンであるA8.net がお薦めです。

他のアフィリエイトプロバイダーですと多くがJavaScriptを使用していますが、JavaScriptを使用していると、たとえ遅延していたとしてもJavaScript分の余計な読み込みが発生してしまい、かつ、表示端末においてもスクリプトを実行するために遅延し、全体的な表示が遅くなります。

単純に <a href=”xxx”><img src=”xxx”></a> のタイプのアフィリエイトサイトが、PageSpeed Insightsでも高評価と得て、結果的にSEOの対策にもなります。


外部サイトのJavaScript SDKを読み込むときには、必ず遅延読み込みをする

google analycs等のアクセス解析や、SNSの読み込むSDKをHTML上に設置せず、遅延読み込みをするようにします。

JavaScriptのコードで、以下のようになります。

var add = function (u, i) {
	if (!D.getElementById(i)) {
		var s, e = D.getElementsByTagName("script")[0],
			s = D.createElement("script");
			s.src = u;
		if (i) {
			s.id = i;
		}
		e.parentNode.insertBefore(s, e);
	}
};

document.ready(function() {
	/* google */
	setTimeout(function(){
		W._gaq = [["_setAccount", "UA-XXXXXX-1")],["_trackPageview"]];
		W.___gcfg = {lang: "ja"};
		add("https://ssl.google-analytics.com/ga.js"), "ga");
		add("https://apis.google.com/js/plusone.js");
	}, 1500);

	/* hatena */
	setTimeout(function(){
		add("https://b.st-hatena.com/js/bookmark_button_wo_al.js");
	}, 1200);

	/* twitter */
	setTimeout(function(){
		add("https://platform.twitter.com/widgets.js", "twitter-wjs");
	}, 400);

	setTimeout(function(){
		twttr.widgets.load();
	}, 1200);

	/* facebook */
	setTimeout(function(){
		add(zenhan("https://connect.facebook.net/ja_JP/all.js#xfbml=1", "facebook-jssdk");
	}, 800);
	setTimeout(function(){
		FB.XFBML.parse();
	}, 1400);
});

同一サーバーで使用するCSS、JavaScriptは1つに結合する

jqueryのプラグイン等やいろいろなCSS、JavaScriptのライブラリが多く存在しますが、
たったの1つのファイルに結合することにより、それぞれ1リクエストずつとなりますので、大幅に高速化します。

後述する圧縮においても効果が絶大し、更に圧縮度の向上化が認められます。

ただし、CDNから読み出す場合はCDNのキャッシュが既に効いている場合がほとんどですので、特に結合する必要がありません。

無論、各種jQuery プラグインもたった1つのJavaScriptファイルに結合しましょう。

ただし、単に結合したことによって動作しなくなってしまうことがあります。

外部ライブラリを結合した部分以外の部分を動作するように修正したり、場合によっては外部ライブラリ自体の修正が必要な事があります。

JavaScriptやCSSを最高度に圧縮する

JavaScriptをminify+packer+gzip圧縮し、CSSをminify+gzip圧縮をすることで、よりWebサイトが軽量化し、高速化します。

またgzipを使用するにあたり、公式のgzipではなく、7zip (もしくはp7zip)のgzip圧縮機能を用いると、更に10%程度圧縮率が良くなり、より軽量化し、高速化します。

Apacheのdefrate圧縮よりも高圧縮で、かつ、予め圧縮しておくことにより、サーバーに負荷をかけないため、より高速化します。

CSSの圧縮

$ yuicompressor --type css filename.css > filename.min.css
$ 7za a -tgzip -mx9 -si filename.min.css.gz filename.min.css

CSSを圧縮すると平均20%圧縮することができます。
更に7zipを使用して圧縮すると、更に平均70%圧縮できます。

gzip圧縮したファイルはDEFRATEより高圧縮になり、かつサーバーに負荷をかけません。

JavaScriptの圧縮

$ yuicompressor --type js filename.js > filename.min.js.tmp
$ perl jsPacker.pl -e62 -q -i filename.min.js.tmp > filename.min.js
$ rm -f filename.min.js.tmp
$ 7za a -tgzip -mx9 -si filename.min.js.gz filename.min.js

JavaScriptを圧縮すると平均60%圧縮することができます。
更に7zipを使用して圧縮すると、更に55%圧縮することができます。

また、gzipで圧縮すると圧縮データの中にオリジナルのファイル名を保持してしまいますが、7zip(p7zip)のこのコマンドラインで行うと、圧縮データの中にオリジナルのファイル名を保持しませんので、更にサイズの削減となります。

なおこの方法で圧縮を行なうとJavaScriptが動作しなくなる場合があります。必ず表示テストを行ない、動作確認を行なってから、必要に応じ修正して下さい。

今は使われることはまずありませんが、Internet Explorer 8 以前のブラウザでは動作しなくなります。

Apacheのdefrate圧縮よりも高圧縮で、かつ、予め圧縮しておくことにより、サーバーに負荷をかけないため、より高速化します。

WebサーバーからCSS、JavaScriptファイルを圧縮したgzファイルを優先的に転送できるように設定する(Apache)

nginxを使用していて高速化していると謳っているエックスサーバーは実際にはApacheで動作しており、同一サーバー内でリバースプロクシとして完全マルチスレッドで動作できるnginxを使用しているに過ぎないのです。

そのため、Apache の.htaccessが使用できます。

以下の .htaccess ファイルを加えるだけです。

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

<FilesMatch "\.css\.gz$">
	ForceType   text/css
	AddEncoding x-gzip .gz
</FilesMatch>

<FilesMatch "\.js\.gz$">
	ForceType   application/x-javascript
	AddEncoding x-gzip .gz
</FilesMatch>

JPEG画像を最高度に圧縮する

無理に高解像度のサイズの画面で掲載せず、サイトに合った適切なサイズにリサイズを行なった後、mozjpegもしくはGuetzliで圧縮します。

一般的にGuetzliは非常に重いものの、かなりの高圧縮をしてくれますが、失敗した時にはmozjpegで圧縮するようにしましょう。

簡単なコードが以下の通りになります。

#!/usr/bin/env perl

my $cjpeg="/opt/mozjpeg/bin/cjpeg -quality 84 -optimize";
my $guetzli="/usr/local/bin/guetzli --quality 84";

sub compress {
	my($new)=@_;
	`$cjpeg $new.src > $new.cjpeg`;
	`$guetzli $new.src $new.guetzli`;
	my $originalsize=-s "$new.src";
	$originalsize+=0;
	my $cjpegsize=-s "$new.cjpeg";
	$cjpegsize+=0;
	my $guetzlisize=-s "$new.guetzli";
	$guetzlisize+=0;

	if($cjpegsize >= $guetzlisize && $guetzlisize ne 0) {
		print "[use guetzli]org $originalsize cjpeg $cjpegsize guetzli $guetzlisize\n";
		`cp $new.guetzli $new`;
	} else {
		print "[use cjpeg]org $originalsize cjpeg $cjpegsize guetzli $guetzlisize\n";
		`cp $new.cjpeg $new`;
	}
	unlink "$new.src";
	unlink "$new.cjpeg";
	unlink "$new.guetzli";
}

なお、mozjpegで圧縮すると画像にもよりますが5%～80%、guetzliで圧縮すると更に10%～50%の圧縮が見込めます。

→圧縮一例

PNG画像を最大限に圧縮する

optipng が最も有力です。

$ optipng -o9 filename.png

可能であればgif画像を使用する

高品質なPNGはフルカラーで使用できるものの、その分容量を使用してみます。
gifは256色しか使用できませんが、その分ファイルサイズを抑えることができます。

ためしにペイント等のアプリケーションでgif形式で保存して問題なければ、gif画像を使用してみると良いでしょう。

なお、わずか2色しか使用していない画像ファイルでも場合によってはぼけることがあるので注意して下さい。

小さな画像であれば試しにbase64でエンコードしてみる。

小さな画像であればbase64にエンコードして、HTMLとして記述すると、HTTPアクセスが減る為、ファイルサイズが増えるものの高速化する場合があります。

ただし、100×100未満の画像や単一色しか使用していない画像に留めておくとよいでしょう。

data:image/gif; の後にそのままbase64でエンコードをしたものから改行を取り除いたものを入れるだけです。

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

同様に、jpegであれば data:image/jpeg、pngであれば data:image/png になります。

なお、同じ画像を何度も表示する場合は <img src=”filename.jpg”>とかのが普通に早いですので、１つの画像を１か所にしか表示しない時のみやってみると良いでしょう。

これ以外にもsvgをHTMLに埋め込むという手段もあります。

<img src=”filename”>は極力しない。

アフィリエイトで利用する際には仕方ないですが、自コンテンツに関しては、
1枚目の画像のみ普通に を使用し、それ以外は、jQueryのlazyloadプラグインを使用して、遅延読み込みをします。

HEAD部分か末尾部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>

画像部分

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="filename.jpg" alt="ALT文字列" class="lazy" width="640" height="480">

この場合、必ず、widthとheightを指定するようにして下さい。

なお、img src=data:image/gif から始まる文字列は最も最適化された1ピクセル×1ピクセルの透過画像です。

HTMLを圧縮する

ツールで行ったほうが無難ですが、テキストエディタでも可能なことです。
改行コードを取り除き、余計なコメント、余計なスペースを取り除くようにしましょう。

google検索サイトが如何なる環境においても快適に見えますが、そこには単純なHTML圧縮もかかっているからです。

動的サイトでも静的HTMLに可能なものは、可能な限りキャッシュファイルを生成する

動的サイトから静的HTMLを保存して、そのHTMLから出力することにより、
最低でも1.5倍、最大で4～5倍以上高速化することができます。

WordPressのプラグインで言えば、WP Super Cacheが有名です。

Apacheであれば、DEFRATE圧縮をかける。

以下の .htaccess ファイルを加えるだけです。

<IfModule mod_mime.c>
	AddType font/opentype         .otf
	AddType font/eot              .eot
	AddType font/truetype         .ttf
	AddType application/font-woff .woff
</IfModule>
<IfModule mod_deflate.c>
	SetOutputFilter DEFLATE
	BrowserMatch ^Mozilla/4\.0[678] no-gzip
	BrowserMatch ^Mozilla/4 gzip-only-text/html
	BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

	Header append Vary Accept-Encoding env=!dont-vary

	SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE text/js
	AddOutputFilterByType DEFLATE text/javascript
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE image/x-icon
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/rss+xml
	AddOutputFilterByType DEFLATE application/atom_xml
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE application/x-httpd-php
	AddOutputFilterByType DEFLATE font/opentype font/eot font/truetype application/font-woff
	AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
	AddOutputFilterByType DEFLATE application/x-font-opentype
	AddOutputFilterByType DEFLATE application/x-font-otf
	AddOutputFilterByType DEFLATE application/x-font-truetype
	AddOutputFilterByType DEFLATE application/x-font-ttf
	AddOutputFilterByType DEFLATE font/opentype
	AddOutputFilterByType DEFLATE font/otf
	AddOutputFilterByType DEFLATE font/ttf
</IfModule>

画像や静的ファイルにキャッシュを持たせる。

以下の.htaccessファイルを加えるだけです。

<IfModule mod_expires.c>
	ExpiresActive on
	ExpiresDefault                                      "access plus 1 month"
	ExpiresByType text/css                              "access plus 1 year"
	ExpiresByType application/atom+xml                  "access plus 1 hour"
	ExpiresByType application/rdf+xml                   "access plus 1 hour"
	ExpiresByType application/rss+xml                   "access plus 1 hour"
	ExpiresByType application/json                      "access plus 0 seconds"
	ExpiresByType application/ld+json                   "access plus 0 seconds"
	ExpiresByType application/schema+json               "access plus 0 seconds"
	ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
	ExpiresByType application/xml                       "access plus 0 seconds"
	ExpiresByType text/xml                              "access plus 0 seconds"
	ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
	ExpiresByType image/x-icon                          "access plus 1 week"
	ExpiresByType text/html                             "access plus 0 seconds"
	ExpiresByType application/javascript                "access plus 1 year"
	ExpiresByType application/x-javascript              "access plus 1 year"
	ExpiresByType text/javascript                       "access plus 1 year"
	ExpiresByType application/manifest+json             "access plus 1 week"
	ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
	ExpiresByType text/cache-manifest                   "access plus 0 seconds"
	ExpiresByType audio/ogg                             "access plus 1 year"
	ExpiresByType image/bmp                             "access plus 1 year"
	ExpiresByType image/gif                             "access plus 1 year"
	ExpiresByType image/jpeg                            "access plus 1 year"
	ExpiresByType image/png                             "access plus 1 year"
	ExpiresByType image/svg+xml                         "access plus 1 year"
	ExpiresByType image/webp                            "access plus 1 year"
	ExpiresByType video/mp4                             "access plus 1 year"
	ExpiresByType video/ogg                             "access plus 1 year"
	ExpiresByType video/webm                            "access plus 1 year"

	ExpiresByType application/vnd.ms-fontobject         "access plus 1 year"
	ExpiresByType font/eot                              "access plus 1 year"
	ExpiresByType font/opentype                         "access plus 1 year"
	ExpiresByType application/x-font-ttf                "access plus 1 year"
	ExpiresByType application/font-woff                 "access plus 1 year"
	ExpiresByType application/x-font-woff               "access plus 1 year"
	ExpiresByType font/woff                             "access plus 1 year"
	ExpiresByType application/font-woff2                "access plus 1 year"

	ExpiresByType text/x-cross-domain-policy            "access plus 1 week"
</IfModule>

なお、スクリプトやCSS、画像を上書き変更しても、ブラウザには反映されませんので、
万が一変更する場合は

<script src=”script.js>2020-02-01″></p>

や

<script src=”script.js?ver=2.43″>

等のように、? の後に無意味なランダム等の文字列を付記して下さい。

リンク

yuicompressor ダウンロード ※要Java もしくはopenjdk
https://yui.github.io/yuicompressor/

jsPacker ダウンロード
http://dean.edwards.name/download/#packer

7zip ダウンロード
https://sevenzip.osdn.jp/

p7zip ダウンロード
https://sourceforge.net/projects/p7zip/

jquery.lazyload.min.js プラグインダウンロード
https://github.com/tuupola/lazyload

optipng ダウンロード
http://optipng.sourceforge.net/

mozjpeg ダウンロード
https://github.com/mozilla/mozjpeg

guetzli ダウンロード
https://github.com/google/guetzli

 

スポンサーリンク
【amazon.co.jp】 【楽天市場】 【Yahoo!ショッピング】
【送料・処分費など完全無料のパソコン・スマホ回収】