WordPress

【WordPress】ページスピードを改善する方法まとめ

サイト構成

  • WordPress 5.4.2
  • WING-AFFINGER5

サーバー

  • Conoha VPS
  • kusanagi Version 8.4.2-1
  • PHP 7.3.0

プラグイン

  • Akismet Anti-Spam (アンチスパム)
  • AmazonJS
  • Classic Editor
  • Google XML Sitemaps
  • JP Markdown
  • PS Auto Sitemap
  • Redirection
  • Show Article Map
  • Table of Contents Plus
  • WP CSV Exporter
  • WP Multibyte Patch
  • WP User Avatar
  • クレジット削除

まずはLightlightを使ってサイトの健康診断

まさかの29点というスコアを叩き出してしまった

Opportunities

Properly size images

Serve images that are appropriately-sized to save cellular data and improve load time.

Defer offscreen images

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.

Serve images in next-gen formats

Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.

Eliminate render-blocking resources

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.

Remove unused JavaScript

Remove unused JavaScript to reduce bytes consumed by network activity.

Remove unused CSS

Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity.

Diagnostics

Ensure text remains visible during webfont load

Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

Reduce the impact of third-party code

Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading.

Does not use passive listeners to improve scrolling performance

Consider marking your touch and wheel event listeners as passive to improve your page's scroll performance.

Serve static assets with an efficient cache policy

A long cache lifetime can speed up repeat visits to your page.

Minimize main-thread work

Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this.

Reduce JavaScript execution time

Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this.

対応策

サーバーの見直し

Conoha + Kusanagi よりよい環境を探すのが大変そうなので後回し

テキストの圧縮

gzip, deflate, brotli をサーバー側で設定

キャッシュ

「Serve static assets with an efficient cache policy」の対応

location ~ .*\.(jpg|gif|png|css|js|ico|woff) {
    expires 7d;
}

使わないプラグインを削除

できるだけ消すと効果的

クレジット削除プラグインは、

画像の次世代化

「Serve images in next-gen formats」への対応策

プラグイン「WebP Express」を使う？

画像圧縮

プラグイン「EWWW Image Optimizer」を使う？

元クオリティの画像を残しておきたいなら、バックアップを取ること

kusanagiの場合 gifsicleが足りないのでinstallする必要あり

yum install gifsicle

遅延読み込み

「Defer offscreen images」への対応策

プラグイン「Autoptimize」を使う

Images > Image Optimization で lazy-loading を設定する

JS・CSSの圧縮

プラグイン「Autoptimize」を使う

JavaScriptの圧縮

  • JavaScriptコードの最適化
  • Aggregate JS-files?

CSSコードの圧縮

  • CSSコードの最適化
  • Aggregate CSS-files?
  • インラインのCSSを連結

レンダリングブロックを防ぐ

キャッシュ

プラグイン「WP Super Cache」を使う

PWA対策

プラグイン「PWA for WP & AMP」を使う

サードパーティのコネクションを優先的に行う

「Precconnect to required origins」の対応策

function example_resource_hints( $urls, $relation_type ) {
  if ( 'dns-prefetch preconnect' == $relation_type ) {
    $urls = array_merge( $urls, array(
      '//a.imgvc.com',
      '//stats.g.doubleclick.net',
      '//www.google.co.jp',
      '//tpc.googlesyndication.com',
      '//www.google.com',
      '//pagead2.googlesyndication.com',
      '//cdn.ampproject.org'
    ) );
  }
  return $urls;
}
add_filter( 'wp_resource_hints', 'example_resource_hints', 10, 2);

参考）https://blog.shota-kameyama.com/2019/06/19/enhance-speed-performance-wordpress-using-lighthouse/

-WordPress