ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

WordPress：ITTI自社サイトを爆速にした方法

WordPressによって構築されているITTI自社サイトの表示を高速化した方法をご紹介します。

GoogleのPageSpeed Insightsに、Lighthouseが組み込まれて計測指標が変わったので、ITTIホームページの表示速度を上げるカスタマイズをしました。

その結果、クライアント様より「ITTIさんのサイトは表示が早いね」と評価いただきました。

Page Speed Insightsの評価

Page Speed Insightsのスコアは下記になっています。

パソコン表示

モバイル表示

サイトスピードへの取り組み方

自社ホームページで効果があったことをクライアント・サイトにも導入することを目的としているため、カスタマイズは「汎用性が高いもの」「導入コストがかからないもの」を中心におこなっています。

そのため、手軽に導入できるカスタマイズかと思います。

サーバの調整

サーバ側でおこなった調整は下記になります。
ベーシックなことしかしていません。

  • gzip圧縮
  • ブラウザキャッシュの設定
  • 静的ファイルをNginxで処理するようにした
  • HTTP/2を使用

gzip圧縮

cssやjsファイルを圧縮してブラウザに送信することで、データ転送量を減らすことができます。

ブラウザキャッシュ

ユーザーのブラウザにcssや画像をキャッシュさせます。リピーターや、サイトを回遊するユーザーの表示速度が早くなります。

gzip、ブラウザキャッシュの設定は「.htaccess」ファイルにコードを記述するだけで有効になります。

.htaccess
AddType image/x-icon .ico

#gzip圧縮
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

#ブラウザキャッシュ
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/atom+xml "access plus 1 days"
ExpiresByType application/rdf+xml "access plus 1 days"
ExpiresByType application/rss+xml "access plus 1 days"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access plus 1 month"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/bmp "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType font/eot "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType font/woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType text/x-cross-domain-policy "access plus 1 week"
</ifModule>

サンプルでは、多くのファイルを1ヶ月キャッシュさせる設定になっています。
キャッシュ期間は適宜変更してください。

  • access plus 0 seconds #キャッシュさせない
  • access plus 1 week #1週間キャッシュ
  • access plus 10 days #10日間キャッシュ
  • access plus 1 month #1ヶ月キャッシュ
  • access plus 1 year #1年キャッシュ

HTTP/2を有効にする

サーバが「HTTP/2」に対応している場合は、複数のリクエストを同時に処理することができるため、表示速度が早くなります。

HTTP/2を有効にするには、ホームページがSSLで暗号化されている必要があります。

サーバ側で「HTTP/2」を有効・無効にできる場合は有効にします。

下記サイトでHTTP/2が有効になっているかを確認できます。

HTTP/2 TEST

ホームページの調整

ホームページでおこなった調整は下記になります。

  • DNS Prefetchを最適化
  • 画像をWebPにも対応
  • LazyLoadを導入
  • WebFontを1つだけにする
  • jQueryをCDNから読み込まない
  • HTML、CSS、JSファイルの圧縮

DNS Prefetchの最適化

DNS Prefetchの効果については賛否あるので推奨はしません。

サイトで記述しているDNS Prefetchは下記になります。
<head></head>内に記述します。

DNS Prefetch
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//connect.facebook.net">
<link rel="dns-prefetch" href="//s-static.ak.facebook.com">
<link rel="dns-prefetch" href="//static.ak.fbcdn.net">
<link rel="dns-prefetch" href="//static.ak.facebook.com">
<link rel="dns-prefetch" href="//www.facebook.com">
<link rel="dns-prefetch" href="//cdn.api.twitter.com">
<link rel="dns-prefetch" href="//p.twitter.com">
<link rel="dns-prefetch" href="//platform.twitter.com">
<link rel="dns-prefetch" href="//twitter.com">
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="//www.googleadservices.com">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//www.googletagmanager.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//maps.google.com">

WordPressが自動的に挿入するプリフェッチを削除します。
functions.phpにコードを記述します。

functions.php
function remove_dns_prefetch( $hints, $relation_type ) {
if ( 'dns-prefetch' === $relation_type ) {
return array_diff( wp_dependencies_unique_hosts(), $hints );
}
return $hints;
}
add_filter( 'wp_resource_hints', 'remove_dns_prefetch', 10, 2 );

WebP画像に対応する

表示速度を遅くしている大きな原因は画像ファイルです。
ファイルサイズが軽いWebPに対応することで表示速度が劇的に早くなります

WebPは、Safari以外のブラウザでWebPに対応しています。

WebP対応ブラウザの確認

WebPとLazyLoadの導入について詳しく解説しているので参考にしてください。

WebPとLazyLoadを使って表示速度を向上させる方法

WebFontを1つだけにする

ウェブフォントが増えれば増えるだけデータ転送量が増えて重くなります。

WebFontを使う場合はCSSの「font-display」プロパティを記述します。
ウェブフォントを読み終えるまで代替フォントで表示させることができ、レンダリング速度が早くなります。

CSS
h1{
  font-family: 'M PLUS 1p', sans-serif;
  font-display: swap;
}font-display: swap;

jQueryをCDNから読み込まない

サーバからjQueryを読み込んだほうが安定して早いのでCDNから読み込まないようにします。

環境によってはCDNからjQueryを読み込んだ方が早いケースもあるので推奨はしません。

WordPressではfunctions.phpに下記のコードを記述するとCDNからjQueryを読み込みません。

functions.php
function my_delete_local_jquery() {
wp_deregister_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'my_delete_local_jquery' );

HTML、CSS、JSファイルの圧縮

ファイル内の改行やメモを削除して、ファイルサイズを小さくすることでデータ転送量を減らすことができます。

プラグインで対応する場合は「Fast Velocity Minify」がお薦めです。

Fast Velocity Minify

HTMLファイルだけを圧縮する場合は、下記のPHPコードをheader.phpの一番上に追記すると改行を削除することができます。

PHPコード
<?php
function compress_output($buffer) {
  $search = array(
    '/\>[^\S ]+/s',
    '/[^\S ]+\</s',
    '/(\s)+/s'
  );
  $replace = array(
    '>',
    '<',
    '\\1',
    ''
  );
  $buffer = preg_replace($search, $replace, $buffer);
  return $buffer;
}
ob_start("compress_output");
?>

ホームページの調整で見送ったこと

Pjax

Pjaxを使うと表示が早くなりますが、導入できないクライアントサイトもあり、導入コストも大きくなるためPjaxは見送りました。

非jQuery

jQueryを廃止してJavaScriptを書き直すことも検討しましたが、こちらも導入コストが大きくなるため見送りました。

サイトスピードを上げるプラグイン

サイトスピードを上げるために以下のプラグインを導入しています。

  • Fast Velocity Minify
  • Scripts-To-Footer
  • ShortPixel Image Optimizer
  • Cache Enabler

Fast Velocity Minify

HTML、CSS、JSファイルの圧縮や非同期など、細かい設定ができます。

圧縮プラグインは多くありますが、Fast Velocity Minifyは細かい設定ができるのでお薦めです。

Fast Velocity Minify

Scripts To Footer

プラグインが生成するJavaScriptをフッターに移動させます。

こちらも同じようなプラグインがありますが、Scripts to Footerがお薦めです。

Scripts To Footer

ShortPixel Image Optimizer

画像を圧縮してくれる定番プラグインです。

WebPにも対応しており、記事の画像をpictureタグで分岐表示もしてくれます。

ShortPixel Image Optimizer

Cache Enabler

キャッシュプラグインです。
キャッシュプラグインもいろいろありますが、今回は「Cache Enabler」を試してみたかったので導入しています。

軽量でキャッシュ効果も高いのでお薦めです。

Cache Enabler

キャッシュプラグインでは「W3 Total Cache」がお薦めです。クセも強いプラグインですが効果は高いです。

W3 Total Cacheの設定は下記を参考にしてください。

W3 Total Cache（W3 トータル・キャッシュ）のベストな設定方法

以上が表示速度を上げるために主におこなった方法です。

自社サイトでは、コードの見直しなどをおこない表示速度を上げるチューニングをしていますが、紹介した内容でかなり早くなると思います。

新しい記事

ホームページ運営の情報を配信中

BLOG

イッティからのお知らせ

NEWS

新宿のWEB制作会社イッティ
イッティ / 有限会社ラクフウ

東京都新宿区西新宿4-29-4
TEL：03-6276-3320

©2005 ITTI Rakufu Inc.

お問い合せ 会社概要 地図・アクセス 個人情報保護方針 サイトポリシー ラクフウ 企業サイト
新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ