人気投稿の表示をJetpackからWordPress Popular Postsに乗り換えました[追記あり]

2017年2月16日2017年2月18日Web-log・ココログ関連,WordPress,パソコン・インターネット

人気投稿の表示をJetpackからWordpress Popular Postsに乗り換えました。理由は、Jetpackのバージョンアップで、Pagespeed Insightsのスコアが大幅に低下してしまったからです。

Jetpackはお手軽で、機能豊富です。でも、時々、残念な結果になる事があります。Jetpack Ver.4.4もそうでした。

JetpacをVer.4.5にした結果、PageSpeed Insightsのパソコンでのスコアが、100から88に大幅に低下しました。理由を見ると、width/heght指定が0×0なのに、画像圧縮がされていないからです。PageSpeed Insightsの画面コピーは取り損なっています。GTmetrixのPageSpeed Scoreも95％から93%に低下しています。

サイズが0×0で、圧縮されていない画像は、「人気の投稿とページ」に表示されているサムネイルアイコンでした。サムネイルとは名ばかりで、実態は、元の画像を縮小表示しているだけです。PageSpeed Insightsは、これらの画像を「○○%圧縮できます」とレポートしてきます。この為のスコア低下です。

PageSpeed Insightsの画面コピーは取り損なったのですが、GTmetrixのPageSpeedにも同様のメッセージが出ていました。

代わりのプラグインを探したら次の物が良さそうでした。

WordPress Popular Posts — WordPress Plugins

表示のカスタマイズもかなり自由に出来ます。次のページを参考にさせて頂きました。ありがとうございます。

WPプラグイン：WordPress Popular Posts　Custom HTML Markupの予約語について | 遊撃広報記

表示形式は、最近の投稿を埋め込むために使っているプラグインのFeedzy RSS Feedsになるべく近くなる様にしました。また、テーマで使っているメタデータ表示形式にも合わせています。

<ul>
 	<li>{thumb}{title}
<p class="post-meta"><span class="date">{date}</span>
<span class="cats">{category}</span></p>
{excerpt}</li>
</ul>

この修正の結果、GTmetrixのPageSpeed Scoreは~~95％に戻りました~~なんと100%になりました! グラフを見ると、100%になった時期が、プラグインを変更した時期と一致していました。Jetpackの人気投稿が悪さをしていたのか。

PageSpeed Insightsのスコアも100点戻るはずでしたが、ダメでした。なぜだ〜。

まず、「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」が出ています。前は無かったのに。調べると"devicepx-jetpack.js"が出ています。またJetpackか。

このJavaScriptは、Gravaterの解像度をデバイスに合わせて調整するための物の様です。Jetpackの人気投稿は、投稿内にアイキャッチ画像が無いと、Gravaterのアイコンを表示します。この為に必要だったと思われますが、人気投稿の使用を止めたので、"devicepx-jetpack.js"は不要です。jetpack/class.jetpack.phpの中で、定義されています。

	/**
	 * Device Pixels support
	 * This improves the resolution of gravatars and wordpress.com uploads on hi-res and zoomed browsers.
	 */
	function devicepx() {
		if ( Jetpack::is_active() ) {
			wp_enqueue_script( 'devicepx', 'https://s0.wp.com/wp-content/js/devicepx-jetpack.js', array(), gmdate( 'oW' ), true );
		}
	}