無料テーマでPSIのスコアを上げたいお話

Cocoonと言えば無料テーマの代表的存在で使用している人も多いと思います。

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

当ブログのテーマもCocoonを使ってます。

レンサバだとWP自動インストール時についでにCocoonを設定してくれるところもありますね。

無料なのに高機能てんこもりで至れり尽くせりでございます。

機能の一つでYouTubeのURLを記述すると自動でiframeになって表示してくれます。

以前は高速化してくれていたのですが現在は無効になっているようです。

YouTube動画読み込みを高速化させる方法

YouTube動画を出来る限り軽く読み込む方法です。クリックすることでiframeに置き換わり動画が再生されます。

YouTube埋め込みの表示も高速化されたので、CocoonのYouTube高速化機能は現在無効にしてあります。

んで、このYouTubeのリンクを一ついれるだけでPSIのスコアがガタ落ちするようです。

モバイルだと30ぐらい下がるっていう。。。

今回はこれをどうにかしてみたいと思います。

画像に変換

iframeのままだとjs等を読み込むせいで速度が落ちるようです。

なので読み込み時に画像に変換しクリックしたら再生する、という仕様にします。

下記サイト等を参考にしました。

Youtube 動画の埋め込みで遅いページの高速化

Youtube の複数の動画を埋め込むとページ自体が非常に遅くなる(重い)時の高速化(軽量化)の方法．原因は iframe で各動画を読み込みに行くため．「youtube 複数埋め込み高速化」

【Youtube高速化】Google PageSpeed Insightsのスコアを上げる方法

Youtubeを画像表示にしてクリックしたら読み込みで解決YoutubeはかなりGoogle PageSpeed Insightsのスコアを低下させます。ひどければ、スコア20程度の下げることでしょう。逆に言えば今回ご紹介する方法でスコアが

まずはjavascriptを下記のように記述します。

$(function(){
	$('.video').each(function() {
		var iframe = $(this).children('iframe');
		var url = iframe.attr('src');
		var title = iframe.attr('title');
		var width = iframe.attr('width');
		var height = iframe.attr('height');
		var id = url.match(/[\/?=]([a-zA-Z0-9_-]{11})[&\?]?/)[1];
		iframe.before('<img width="'+width+'" height="'+height+'" src="http://img.youtube.com/vi/'+id+'/mqdefault.jpg" />').remove();
		$(this).on('click', function() {
			$(this).after('<div class="video"><iframe loading="lazy" title="'+title+'" width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+id+'?autoplay=1&feature=oembed&wmode=opaque" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>').remove();
		});
	});
});

そのままだと画像が表示されるだけなので再生ボタンを適当にアップロードしてcssを下記のように設定します。

.video {
	text-align:center;
}
.video::before {
	position: absolute;
	background: url(/images/youtube_on.png);
	content: "";
	background-size: 100%;
	width: 70px;
	height: 50px;
	top: 50%;
	left: 50%;
	transform : translate(-50%,-50%);
	opacity: .90;
	transition:.5s;
}
.video:hover::before {
	cursor: pointer;
	background-image:url(/images/youtube_off.png);
}

これで見た目もそれっぽくなります。

PSIスコアもいい感じに戻りました。