GitHub PagesでもPageSpeed Insightsでサイト高速化がしたい！

初めに

今回自身のGitHub PagesのサイトをPageSpeed Insightsで計測し、サイトの高速化を行いました。その時の設定や対策を書いていこうと思います。

PageSpeed Insights

PageSpeed Insightsとは

PageSpped InsightsはGoogleが提供しているウェブページを解析して読み込み速度を測定してくれるサービスで、登録不要で無料で利用することが可能です。また、読み込み速度の解析だけでなく速度の改善策も提示してくれます。
サイトの読み込み速度はGoogleのSEOにも直結するため、対策は必須と言えます。

利用方法

利用方法は画面中央部のフォームに測定したいサイトのURLを入力し、分析ボタンを押すだけで計測ができます。

分析結果

サイトの分析はモバイル、パソコンのそれぞれのスコアと改善策が表示されます。自身のサイトの高速化する前のスコアは下記のになります。

Googleは85点以上を合格点としてるので、提示されている改善策を行っていきます。

改善策

今回提示されている改善策は下記の5点でした。1つずつ対応していきます。

• 画像を最適化する
• スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を排除する
• ブラウザのキャッシュを活用する
• 圧縮を有効にする
• JavaScriptを縮小する

画像を最適化する

Googleから「画像に適切なフォーマットと圧縮を選ぶことで、データ サイズを大きく削減できます。」と提示されるため、画像を圧縮していきます。
圧縮には下記サイトを利用しました。両方とも登録不要、無料で利用でき画質を落とさずサイズを約半分に圧縮することができます。

JPEG用圧縮サイト
http://www.jpegmini.com/
PNG用圧縮サイト
https://tinypng.com/

圧縮後再びPageSpeed Insightsで計測したところ

• モバイル → 69
• パソコン → 78

と約20ほどスコアが上がりました。

スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を排除する

Googleから「このページには、ブロッキング CSS リソースが 6 あります。これが原因で、ページのレンダリングに遅延が発生しています。」と提示されます。
これは、headタグでCSSを読み込んでいるため画面の描写が遅延しているのが原因です。
Googleから推奨される改善策はサイトのファーストビュー(初期表示される画面の範囲)で必要なCSSは直接HTMLに記述し、画面下部などのスクロースしなければ見えない箇所のCSSは非同期で読み込むことを提案しています。
ファーストビューとはいえ、大量のCSSをHTMLに記述するのは気が引けたため、今回はファーストビューでは利用しない外部のCSSを非同期で読み込みました。
非同期で読み込むJavaScriptはこちらを参考にしました。
外部cssを動的に読み込む方法

function loadCss(href, check) {

	if(typeof(check) == 'undefined') check = true;

	var head = document.getElementsByTagName('head')[0];
	var link = document.createElement('link');
	link.rel = 'stylesheet';
	link.type = 'text/css';
	link.href = href;

	if(check) {
		var links = head.getElementsByTagName('link');
		for(var i = 0; i < links.length; i++) {
			if(links[i].href == link.href) return false;
		}
	}

	head.appendChild(link);
}

<script type="text/javascript">
	loadCss('cssファイル');
</script>

上記のように6つあるCSSの内2つほど非同期で読み込むようにしたのですが、スコアの方は変化ありませんでした。対応するならCSS全て対応すべきなのでしょうか・・・要調査です。

ブラウザのキャッシュを活用する

Googleから「静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。」とブラウザにCSSやJavaScriptをキャッシュするよう提示されます。
Googleから推奨される改善策はExpiresヘッダーによる最低1週刊のキャッシュの制御を提案しています。
Expiresヘッダーはサーバーの「.htaccess」に下記のように設定します。

ExpiresByType image/jpg “access plus 10 days”

上記の例はjpgをブラウザのキャッシュに10日間設定するという意味になります。
しかし、GitHub PagesではGitHub Pagesでは下記のように10分間のキャッシュが設定されており「.htaccess」を設定することができません。

Cache-Control:max-age=600

そのため残念ながら非対応とします。

圧縮を有効にする

Googleから「gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。」とネットワークを介したCSSやJavaScrpitの読み込みを圧縮した状態で行うようにと提示されます。
こちらもサーバーの「.htaccess」に下記のように設定することで実現できます。

AddOutputFilterByType DEFLATE text/css

しかしキャッシュと同様GitHub Pagesでは設定できないためこちらも非対応とします。

JavaScriptを縮小する

Googleから「JavaScript コードを縮小すると、データ サイズを大きく削減でき、ダウンロード、解析、実行の速度を向上させることができます。」とJavaScirptのファイルを圧縮するよう提示されます。
普段JavaScpritを書く際、改行やインデントを付け見やすく記述しますが実際に利用する際は必要がないためサーバーにアップロードするファイルは改行やインデントを削除したものをアップロードし、サイズを減らすようにします。
圧縮はPageSpeed Insightsが圧縮したファイルを提示してくれるためこちらを利用します。
分析後の画面中央部の下記リンクから圧縮されたファイルを取得します。

圧縮後再びPageSpeed Insightsで計測したところ

• モバイル → 73
• パソコン → 83

と少しスコアが上がりました。

終わりに

最終的にスコアは最初から約30ほど上がりました。
しかし、キャッシュなどGitHub Pagesでは対応できないものありました。
GitHub Pagesは便利なサービスですが、柔軟な設定はできないので利用には注意です。