【まとめ記事】WordPressブログの高速化対策【Newspaper】

今までWordPressの高速化を行ってきましたが、私が対策を打ってきた中で効果のある高速化対策の全体を分かりやすくまとめたいと思います。特にNewspaperのユーザーにとって+αとなる設定についても記載しています。

WordPressを高速化するメリットとしては以下になります。デメリットはAMPとの2重管理の点以外は特にありませんので、皆さんもメリット享受のためぜひやってみてください。

メリット

  1. 速度向上によるユーザビリティ向上
  2. 上記による離脱率減少
  3. Googleからの評価上昇による検索ランキングの向上

これらのメリットを得るための対策を以下にまとめます。

画像関係

画像の圧縮・リサイズ

画像のサイズが大きい、また大きさがブログの幅を超えている場合、無駄にネットワークのペイロードを消費しているため、圧縮したり、リサイズすることが必要です。

WordPressの「EWWW Image Optimizer」のプラグインを使用することで、自動的にリサイズし、画像を圧縮してくれます。

Lazy-Loadの有効化

Lazy Loadは画像をページ読み込み時ではなく、遅延させてページ送りなどの表示時に読み込む技術のことで、ページ表示の時に画像をすべて読み込みせずに済みます。そのため初期表示が早くなります。

私が使用しているNewspaper 10のテーマにはLazy Load機能が付属しています。「Theme Panel」→「Template Setting」→「Image Loading」の「USE LOADING ANIMATION IMAGE」をOnにすることで使用することができます。

その他の方はこの後紹介する「Autoptimize」の設定から「画像」タブの「Lazy-load images?」を有効化します。

JavaScript・CSS・HTMLの最適化

JavaScript・CSS・HTMLの圧縮と最適化

HTML・JS・CSS等のソースコードは通常は改行や空白、タブ、コメントアウトなどが入っており、通信容量が増加したり、コード自体が分散して配置されていることによる速度遅延等、WEBサイトの速度低下の原因となります。

HTML・JS・CSS等のソースコードの改行や空白、タブ、コメントアウトなどの不要コードを削除したGZip圧縮ファイルを作成し、既存のソースコードに影響を与えずにコードの最適化を行ってくれるプラグインを紹介します。

こちらの記事の「Autoptimize」のプラグインを使用することで、HTML・JS・CSS等のソースコードの最適化と圧縮を行ってくれます。

Font Awesomeの削除

テーマでアイコンを使用するには、Font Awesomeプラグインを使用する必要があります。多様なアイコンがあり、全てを使用することがないため、使用していないアイコンをロードしても意味がありません。

テーマ全体の様々なパーツにこれらのアイコンの一部が必要です。そのためFont Awesomeのアイコン取得の関数にフィルターを追加して、必要なものだけをロードします。

方法としては次のコードをテーマのfunctions.phpファイルに挿入します。

// 必要なFonts Awesomeのみロード add_filter( 'infophilic_fontawesome_essentials', 'infophilic_fontawesome_essentials' ); function infophilic_fontawesome_essentials() { return true; }

絵文字を削除する

WEBサイトで絵文字を使用していない場合は、絵文字をロードする必要はありません。そのためテーマのfunctions.phpに次のコードを追加することで削除できます。

// 絵文字の削除 add_action( 'init', 'infophilic_disable_wp_emojicons' ); function infophilic_disable_wp_emojicons() { remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); }

他の関数を削除する

Newpaper 10のテーマには埋め込み関数が組み込まれているため、WordPressの埋め込み関数を使用する必要はありません。テーマのfunctions.phpファイルの最後に次のコードを追加して、登録を解除することをおすすめします。また、サーバーへのHTTP要求も削減されます。

 

// WP埋め込み関数の削除 function infophilic_stop_loading_wp_embed() { if (!is_admin()) { wp_deregister_script('wp-embed'); } } add_action('init', 'infophilic_stop_loading_wp_embed');

キャッシュ

キャッシュとはページを静的HTMLとして保存し、ユーザーがリクエストを行うと、ページはキャッシュから配信されます。

このキャッシュを表示することでコンテンツ表示の速度が向上し、ユーザーエクスペリエンスの向上を図ることが可能になります。

キャッシュの種類はブラウザキャッシュ、ページキャッシュ、データベースキャッシュ、オブジェクトキャッシュ等あります。

ブラウザキャッシュ

まずはブラウザキャッシュです。.htaccessにExpireヘッダーを追加することで、ブラウザでどの程度の期間ファイルのキャッシュを残すかを設定することができます。

FTP等でWordPressの直下にある「.htaccess」のバックアップを取り、以下の内容を追加します。

# BEGIN Expire headers <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 5 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType image/x-icon "access plus 604800 seconds" ExpiresByType image/svg+xml "access plus 604800 seconds" ExpiresByType image/jpeg "access plus 604800 seconds" ExpiresByType image/png "access plus 604800 seconds" ExpiresByType image/gif "access plus 604800 seconds" ExpiresByType image/webp "access plus 604800 seconds" ExpiresByType font/truetype "access plus 604800 seconds" ExpiresByType font/opentype "access plus 604800 seconds" ExpiresByType application/x-shockwave-flash "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" ExpiresByType application/x-font-woff "access plus 604800 seconds" ExpiresByType application/x-font-opentype "access 604800 seconds" ExpiresByType application/x-font-ttf "access plus 604800 seconds" ExpiresByType application/vnd.ms-fontobject "access plus 604800 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" </IfModule> # END Expire headers <IfModule mod_deflate.c> SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-font-woff </IfModule> # END HAND WRITE

ページキャッシュ

ページキャッシュのプラグインには色々なプラグインがありますが、「Autoptimize」と相性のいいプラグインが「Cache Enabler」です。

「WP Super Cache」と比較しましたが、こちらのプラグインの方が、GoogleのPageSpeed Insightで高スコアを得ることができました。

以下の記事の後半で「Cache Enabler」の導入方法を説明しています。

CDN導入

Cloudflare(クラウドフレア)は無料のCDNで、ウェブサイトのすべてのリソースをキャッシュし、世界中にある分散サーバーからユーザーにコンテンツを配信します。このCDNの機能によりWEBサイトの読み込み時間を短縮することが可能です。

Cloudflareのセットアップ方法は以下の記事で説明しています。

モバイル最適化

AMP対応

Newspaper 10のテーマにはAMPのプラグインが提供されています。「tagDiv Mobile Theme」と「Official AMP for WP」を導入することで、モバイルに最適化されたテーマテンプレートでAMPの表示を行うことが可能です。

AMPの有効化は「Theme Panel」→「MOBILE THEME」→「Mobile settings」の「USE MOBILE THEME FOR:」を「AMP」、または「Mobile+AMP」とすることで設定可能です。

その後管理パネルから「AMP」を選択し、「Traditional」を選択してください。AMPと通常のテーマの2つのテーマの管理となりますが、高速化することが可能です。

モバイルアクセス時のAMPへの誘導

モバイル端末からのアクセス時はGoogle検索やTwitter等からアクセスした場合、AMPのページに誘導されます。一方でダイレクトやAMPへの誘導を行わないリンクの場合、通常のサイトにアクセスするため、モバイル最適化されておらずページ表示の速度が遅くなります。

そこで.htaccessの設定でモバイル端末でのアクセス時はAMPのページにリダイレクトすることが必要です。以下のリダイレクト設定を.htaccessに追加します。

# BEGIN HAND WRITE <IfModule mod_rewrite.c> RewriteBase / # botからのアクセスの場合はURLを書き換えない RewriteCond %{HTTP_USER_AGENT} !(bot|Mediapartners-Google|APIs-Google) [NC] # 対象のURLがファイルの場合はURLを書き換えない RewriteCond %{REQUEST_FILENAME} !-f # 対象のURLがwp-で始まる場合はURLを書き換えない(WordPressの管理画面) RewriteCond %{REQUEST_FILENAME} !^wp-.*? # 対象のURLがmode=pcの場合はURLを書き換えない RewriteCond %{QUERY_STRING} !mode=pc # クエリ文字列(?の後ろの文字)がampの場合はURLを書き換えない RewriteCond %{QUERY_STRING} !amp # iPhone、Android、Windows Phoneからのアクセスの場合、書き換え対象とする RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] # URLの末尾に?ampを追加する RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1?amp [NE,QSA,R,L] </IfModule> # END HAND WRITE

以下のページでリダイレクトの設定関係を詳しく説明しています。

不要なプラグインの削除

現在のモバイルテーマは、Multi Purpose StyleとNewsletter Styleをサポートしていません。そのためこれらのプラグインによってロードされているスクリプトを削除します。

以下のパスにモバイルテーマのfunctions.phpファイルがあります。
/wp-content/plugins/td-composer/mobile/

次のコードをモバイルテーマのfunctions.phpファイルに追加します。

※モバイルテーマを無効にしていない場合にのみ使用してください。

// Remove Multi Purpose Style add_action( 'wp_enqueue_scripts', 'infophilic_remove_multi_purpose', 20 ); function infophilic_remove_multi_purpose() { wp_dequeue_style( 'td-plugin-multi-purpose' ); } // Remove Newsletter Style add_action( 'wp_enqueue_scripts', 'infophilic_remove_newsletter', 20 ); function infophilic_remove_newsletter() { wp_dequeue_style( 'td-plugin-newsletter' ); }

Newspaperのフォントの事前ローディング

フォントを事前にローディングすると、Webサイトでのフォントのロード時間が短縮されます。

モバイルテーマのfunctions.phpファイルに次のコードを追加して、Newspaperのフォントをプリロードをさせます。

// Newspaper フォント事前ローディング function dns_prefetch_mobile() { echo "<link href='https://ドメイン/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.woff?8' rel='preload' as='font' type='font/woff' crossorigin>"; } add_action( 'wp_head', 'dns_prefetch_mobile', 0 );

まとめ

以上で、すべての設定は完了です。PageSpeed InsightGTMetrix.comを使用してあなたのサイトの速度をチェックしてみてください。元々の速度より大きく改善しているかと思います。

皆さんもWEBサイトのページ表示速度を向上し、ユーザビリティや離脱率低減、検索ランキングの向上を図ってみてください。

UMilCLhttps://umilcl.com
兼業ブロガー。メインは大手製造業システム企画・設計・プロジェクト管理。工場のプロセス制御が主な業務。 得意分野: プロセス制御と統計、機械学習、画像処理、システム技術 保有資格: プロジェクトマネージャー、情報処理安全確保支援士、ネットワークスペシャリスト、応用情報処理、第一種衛生管理者

Similar Articles

Comments

返事を書く

コメントを入力してください!
ここに名前を入力してください

Follow US

1ファンいいね
6フォロワーフォロー
89フォロワーフォロー
4,245フォロワーフォロー
0SubscribersSubscribe

Archive

Most Popular

Synology DS220j DS220+の比較・レビュー

SynologyのエントリーモデルのDS220jとDS220+が発売され、2020年モデルもある程度そろってきました。 DS220はエントリークラス、DS220+はフラッグシップモデルとなりますが、違いはどこにあるか調査しました。

Synology DS220j レビュー【エントリーモデル後継機】

SynologyのエントリーモデルのDS218jの後継機が発売されたので、改善点と問題点をまとめています。 簡単にまとめると大変コスパのよいエントリーモデルのNASを踏襲した機能向上が行われており、上位機種とのスペックを要求する機能の差別化はそのままです。

Synology DS220+と他DS+シリーズ3種の比較・レビュー

SynologyのDS220+、DS420+、DS720+、DS920+の2ベイと4ベイのDS+シリーズが4機種の後継機が5月20日に発売されました。DS+シリーズ4種のスペックについて比較していますので、購入時の参考にしてみてください。

Windows10のHyper-V環境へのCentOS 8のインストール方法

この投稿では検索にてHyper-V環境へのCentOS8インストールを見に来てくれた方がいたので、CentOS7だけでなく、Windows 10上のHyper-V環境へのCentOS 8.1のインストール方法についても今回投稿します。

【2020年1月】子育て中ママが端末購入するならOPPO Reno A【購入後レビュー有】

妻のスマホ(Google Pixel 3a)が購入から5か月で子供の手により水没したので、防水性能の高い楽天モバイルより発売されているOppoのおすすめの最新機種「OPPO Reno A」の購入を検討した内容を紹介します。