エックスサーバーとCocoonの組み合わせでpagespeedでモバイル99点を取る設定

この記事は約9分で読めます。
当サイト

エックスサーバーとCocoonの組み合わせでpagespeedで100点に近づけるための設定です。スコアはタイミングにより80後半まで落ちますが、最高99点まで出ました。

最近は特にTTFBが下がり気味でスコアも下がっています。

スポンサーリンク

pagespeedのスコア

ただし、タイミングにより遅い時もある。

どのページで測るかは重要で、まず規約のページなどを画像とアドセンスを外し、そこでスコアを測り指摘を潰していく。このスコアがブログの上限となる。

改善点が無くなったら、トップページ、個別ページ、で改善してく。

モバイル98点 当サイトhttps://kazetoge.com/
別管理サイト https://slackline.jp/packraft/

どれもアドセンス有効でトップページ。

PageSpeed Insights
スポンサーリンク

コクーンでの高速化設定

Cocoonのlazyloadは除外設定が効かないので(自分の環境では)、標準の機能を使う。これで、最初の画像は自動的に遅延回避できるのだが、2番目以降でも指摘される場合がある。その際は、functionp.phpに以下のように追加する。自分は3個除外している。なぜなら、Largest Contentful Paint が遅延読み込みされていますの指摘を回避するため。

//lazy load 除外
function skip_lazyloading_on_first_three_archive_images( $omit_threshold ) {
    if ( is_home() || is_archive() ) {
        return 3;
    }
    return $omit_threshold;
}
add_filter( 'wp_omit_loading_attr_threshold', 'skip_lazyloading_on_first_three_archive_images' );


その他のコクーンの高速化設定はlazyloadとグーグルフォントは無効にして、他はすべて有効にする。がhtmlの軽量化は見にくく問題が見えずらいので解除している。どうでもいい人はオンにしておこう。

スポンサーリンク

エックスサーバーの設定、XPage Speedはポンコツ

phpバージョンを推奨以上の最新にする(phpエラーや警告が出ていないか、プラグインやデバックモード音で一応チェックしておこう)。
Xアクセラレータ Ver.2を有効。サーバーキャッシュ有効。ブラウザキャッシュ無効。ブラウザキャッシュを無効にする理由は画像などのキャッシュ期間は1年にしてほしいため。キャッシュが長めなコクーンの設定を使う。

※XPage Speedは画像、その他不具合が多いので使わない。webp表示期待だけど、数日待っても404が多くて表示されなかった。

Flying Scripts settingsというプラグイン

Flying Scripts
Download and execute JavaScript on user interaction.

pagespeedで引っかかる外部のjsファイルを遅延読み込み。特にアドセンス関連をパスできるのが大きい。+20点ほどアップ。

function.phpに追加

サイト内の.jsファイルをフッターで読み込む様に変更。おそらく問題ないが、何かうまく動かない動作が現われる可能性があるので変わった動作が無いかチェックが必要。

//フッター読み込み
function is_footer_javascript_enable() {
	return true;
}

↓srcsetが必要のないサイトなら下のコードを使う。ほぼサイズ問題を解決可能。

//レスポンシブイメージを無効化
add_filter( 'wp_calculate_image_srcset', '__return_false' );
add_filter( 'wp_calculate_image_sizes', '__return_false' );

インデックスページでサイズ合わないイメージをそもそも読み込む場合はこちらを記述する。mediumなどを環境に合わせる。

//インデックスエントリーカードサムネイルサイズ
add_filter('get_entry_card_thumbnail_size', function (){
  return 'medium';
});

webp化

Converter for Media – 画像最適化 | WebP & AVIF に変換
WebP &; AVIF Converter を使用して、あなたのウェブサイトをスピードアップします。画像を最適化し、標準フォーマットの代わりに WebP と AVIF 画像を提供します!

次世代画像の使用は必須。
EWWW Image Optimizerは余計にDBを消費するし、無駄に高機能なのでConverter for Mediaを使う。ただし、EWWWもConverter for Mediaもキャッシュ設定を追加しないと、ブラウザがキャッシュしない。以下を.htaccessに追加する。コクーンの高速化設定ではwebpがキャッシュされない。エックスサーバーのブラウザキャッシュ設定ではwebpもカバーされるが期間が短いので使わない。

自分でwebpも1年間キャッシュするように追加記述する。


ExpiresByType image/webp “access plus 1 year”

WP-OptimizeとBackWpUpを削除し、WP-DBManagerを使う

WP-DBManager
WordPress データベースを管理します。

WP-OptimizeとBackWpUpはどちらも無駄に高機能でクエリを消費するケースもあるので、WP-DBManagerひとつにする。これなら自動バックアップも最適化もどちらも可能。さっさと切り替えるべき。

Advanced Database Cleanerで不要なテーブルとオプションを削除

Advanced Database Cleaner
Clean database by deleting orphaned data such as 'revisions', 'expired transients', optimize database and more...

WP-OptimizeやBackWpUpなどの不要プラグインが残したDB上のゴミを削除する。optionを削除するときは一応調べて削除する。

Query Monitorを入れてクエリを確認して減らす

Query Monitor
Query Monitor は WordPress 開発者向けのツールパネルです。

Query Monitorを使うとリアルタイムでクエリ数が見える。そのほかPHPエラーもチェックでききるので生成過程で無駄が無いか検証する。

クエリはアーカイブページで60以下、個別ページで20以下まで下げる。ひどい時は200以上読み込まれている時がある。クエリとはDBから引き出すデータ項目のこと。
オブジェクトキャッシュを使うと大幅に減らせるのでぜひ使う。

オブジェクトキャッシュを有効化する

エックスサーバーは外部オブジェクトキャッシュも可能。APCとOPcacheが使える。

下記サイトを参考にしてAPCuを有効にする。サイトヘルスの永続オブジェクトキャッシュを使用するもクリアできる。

【WordPress】Xserver でプラグインなしで APCu を使う方法
永続オブジェクトキャッシュの設定をすると記事を投稿,更新した際にキャッシュをクリアしないとプレビューなどの反映までに時間がかかる状態になっていた. 毎回クリアするというのでは使いにくいので何か良い方法

番外編 画像サイズ

画像サイズは無駄なサイズが生成されないようにしたい。高速化には直接影響ない。当サイトではサムネイル320トリミング、中768、大1024にする。アップロード画像の最大サイズは1920までに。記事中ではギャラリーで320トリミング、モバイル用に768、PC等に1024がsrcsetで選択されるはず。

最大サイズと無駄なサイズ生成を止めるコードをfunction.phpに追加する。

必要に応じてプラグインで一括削除や再生成をする。

//コクーンの自動生成不必要停止
add_action('init', function() {
    remove_image_size(THUMB150);
	remove_image_size(get_vertical_card_2_thumbnail_size());
    remove_image_size(get_vertical_card_3_thumbnail_size());
    remove_image_size(get_tile_card_2_thumbnail_size());
    remove_image_size(get_tile_card_3_thumbnail_size());
});
//画像アップロード時の自動生成(リサイズ)停止
function stop_image_sizes( $new_sizes ) {
  unset( $new_sizes['medium_large'] );
  unset( $new_sizes['1536x1536'] );
  unset( $new_sizes['2048x2048'] );
  return $new_sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'stop_image_sizes' );


//画像アップロード時の最大サイズ変更
function otocon_resize_at_upload( $file ) {
 
	if ( $file['type'] == 'image/jpeg' OR $file['type'] == 'image/gif' OR $file['type'] == 'image/png') {
 
		$w = 1920;
		$h = 1920;
 
		$image = wp_get_image_editor( $file['file'] );
 
		if ( ! is_wp_error( $image ) ){
			$size = getimagesize( $file['file'] );
 
			if ( $size[0] > $w || $size[1] > $h ){
				$image->resize( $w, $h, false );
				$final_image = $image->save( $file['file'] );
			}
		}
	}
 
	return $file;
 
}
 
add_action( 'wp_handle_upload', 'otocon_resize_at_upload' );

過大な DOM サイズの回避

ドロップダウンメニューなどを使うと増える。Jqueryで折りたたむ。コクーンにはテーマ編集で.jsに書き込める。

以上です。関連サイト

100点目指して参考にしてください。

モバイル100点

共通サーバなので時々スピードが落ちるんだよなぁ。十分早いとは思うんだけど。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。
PageSpeed Insights
タイトルとURLをコピーしました