エックスサーバーとCocoonの組み合わせでpagespeedで100点に近づけるための設定です。スコアはタイミングにより80後半まで落ちますが、最高99点まで出ました。
最近は特にTTFBが下がり気味でスコアも下がっています。
pagespeedのスコア
ただし、タイミングにより遅い時もある。
どのページで測るかは重要で、まず規約のページなどを画像とアドセンスを外し、そこでスコアを測り指摘を潰していく。このスコアがブログの上限となる。
改善点が無くなったら、トップページ、個別ページ、で改善してく。
どれもアドセンス有効でトップページ。
コクーンでの高速化設定
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というプラグイン
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化
次世代画像の使用は必須。
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-OptimizeとBackWpUpはどちらも無駄に高機能でクエリを消費するケースもあるので、WP-DBManagerひとつにする。これなら自動バックアップも最適化もどちらも可能。さっさと切り替えるべき。
Advanced Database Cleanerで不要なテーブルとオプションを削除
WP-OptimizeやBackWpUpなどの不要プラグインが残したDB上のゴミを削除する。optionを削除するときは一応調べて削除する。
Query Monitorを入れてクエリを確認して減らす
Query Monitorを使うとリアルタイムでクエリ数が見える。そのほかPHPエラーもチェックでききるので生成過程で無駄が無いか検証する。
クエリはアーカイブページで60以下、個別ページで20以下まで下げる。ひどい時は200以上読み込まれている時がある。クエリとはDBから引き出すデータ項目のこと。
オブジェクトキャッシュを使うと大幅に減らせるのでぜひ使う。
オブジェクトキャッシュを有効化する
エックスサーバーは外部オブジェクトキャッシュも可能。APCとOPcacheが使える。
下記サイトを参考にして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点目指して参考にしてください。
共通サーバなので時々スピードが落ちるんだよなぁ。十分早いとは思うんだけど。
