Hummingbird：ページの表示速度の高速化ができる
サイトのページの表示速度を改善できる WordPress 用プラグインの紹介です。
それは「Hummingbird」です。
その導入手順から日本語化・使い方と設定などを解説していきます。
Hummingbird – Optimize Speed, Enable Cache, Minify CSS & Defer Critical JS
Hummingbird は、Javascript と CSS の最適化、様々なキャッシュ化等によりサイトのページの表示速度を高速化できます。
Hummingbird の主な特徴は、以下のとおりです。
- gzip 圧縮の有効化
- 元リソースへの事前接続可能
- 優先するリソースの順番を指定可能
- 遅延読み込み可能
- ブラウザキャッシュを使用可能
- JavaScript の実行遅延や実行時間の短縮化
- CSS から未使用のコードを削除可能
- JavaScript の最小化
- レンダーブロッキングリソースを排除
- 未使用の CSS の遅延化
- オフスクリーンイメージの遅延ロード (Smush 無料統合)。
- サイトをスキャンして、ワンクリックでパフォーマンスの改善可能
- フルページ、Gravatar、ブラウザキャッシュツール搭載
- パフォーマンスレポート
- アセット（Javascript、CSS、Google Fontのファイル）を配置、最小化、結合による最適化
- Google PageSpeed Insights/ YSlow/ Pingdom、と GTmetrix のスコア向上。
- カスタムしたパフォーマンス設定を行エクスポート＆インポート可能
WordPress プラグイン「Smush」との統合可。
Smush の使い方 – WordPress 活用術
Javascript ファイルと CSS ファイルの結合もできますが、
HTTP/2 の環境下で結合を行うとかえって表示速度の改善にならないケースもあります。
なので、他の設定を行ってから個別で設定を行うと良いかもです。
HTTP/2ではJSやCSSの結合は表示速度改善への妨げになるかも – WordPress 活用術
記事を作成もしくは更新時点でのバージョン：3.3.0
マルチサイトでの利用:可
Gutenberg エディターでの動作
Gutenberg エディターに追加される機能は無いので、気にする必要は無いです。
インストール手順
Hummingbird をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Hummingbird – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Hummingbird」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Hummingbird を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
ダッシュボードの「設定」メニューの中に追加されています。
初回操作時
プラグインの改善のために使用状況のトラッキングをさせてほしいとお願いされます。
デフォルトでは無効になってますし、設定からも変更できるので、
ここでは、スルーして問題はないです。
「RUN PERFORMANCE TEST」を実行しましょう。
ダッシュボードは、各 Hummingbird モジュールの概要パネルとクイックアクセスパネルで構成されています。
キャッシュ機能などが有効になっていると「CLEAR CACHE」ボタンが表示されます。
また、Cloudflare と統合していると、「Dashboard Clear Cache」ボタンも有効になります。
パフォーマンステストの結果も表示されます。
使い方
使い方は、各設定画面から必要な設定を行いましょう。
設定
パフォーマンステスト
パフォーマンステストの実行ができます。
Pro 版にしかレポート機能がないので、頻繁に実行してもあんまり意味がないかも。
キャッシュ機能
4 種類のキャッシング設定と統合・設定を行えます。
ページキャッシュ
Page Types
キャッシュするページの種類を選択します
Enable preload caching
この機能を有効にすると、ホームページはプリロードされ、
その後、キャッシュがクリアされるようなアクションがあると
自動的にプリロードされるようになります。
ページや投稿が更新されたり、キャッシュがクリアされたりすると、
自動的にプリロードされます。
Clear cache on interval
キャッシュのクリーンアップは、ページや投稿の更新後に設定した間隔で行われます。
Purge Varnish caching
この機能を有効にすると、
投稿、ページ、コメントを公開する際に Varnish のキャッシュをパージします。
Purge OpCache
OpCache を有効にするかどうか。
OpCache は、PHP スクリプトのバイトコードをメモリに保存し高速化をはかります。
- Include logged in users
ログインユーザーにもキャッシュしたページを表示するかどうか。 - Cache URL queries
GET パラメーターを使用してページのキャッシュをオンにするかどうか。 - Cache 404 requests
サーバーへの負荷軽減のために 404 ページもキャッシュするかどうか。
- Clear full cache when post/page is updated
投稿または固定ページのいずれかが更新されると、全ての投稿タイプのキャッシュされたアーカイブと分類の全てを再生成するかどうか。 - Enable debug log
デバッグログを残すかどうか。ページキャッシュ機能に問題がある場合に有効にしましょう。 - Identify cached pages
Pro 版のみの機能。ページのタグにコメントを挿入して、キャッシュされているかどうかを簡単に識別できるようにするか。
- Serve compressed versions of cached files
キャッシュしたファイルを圧縮するかどうか。gzip 圧縮が無効または使用できないサーバーでのパフォーマンスを改善できます。 - Cache on mobile devices
モバイル炭末でもページキャッシュを有効にするかどうか。デフォルトでは有効になっています。 - Clear cache on comment post
投稿にコメントが投稿される度にページキャッシュをクリアするかどうか。 - Cache HTTP headers
HTTP ヘッダーをキャッシュするかどうか。
・Exclusions
URL Strings:
特定の URL または特定の文字列を含む URL をキャッシュしないようにできます。
1 行に 1 つのエントリを記述します。正規表現での記述可。
User agents:
キャッシュページを送信したくないボット、スパイダー、クローラーなどがある場合にユーザーエージェントを指定します。
一般的なものがデフォルトで登録されています。
キャッシュしたくない Cookie ID を指定できます。
1 行に 1 つの ID を記述します。
ページキャッシュ機能を無効にしたい時は「deactive」ボタンをクリック。
ページキャッシュをクリアしたい場合は、画面一番右上の「Cache Clear」ボタンをクリックします。
ブラウザーキャッシュ
ブラウザキャッシュの状態を確認できます。
右上の CONFIG ボタンをクリックすると構成を変更できます。
サーバーの種類を選択します。
キャッシュの有効期限を設定します。
ブラウザーキャッシュルールの変更を適用しています。
グラバターキャッシュ
Gravatar Caching は、コメントやテーマで使用されるアバターのローカルコピーを保存します。
ウェブサイトのセットアップ方法に応じて、キャッシュをパージする頻度を制御できます。
RSSキャッシュ
デフォルトでは、WordPress は RSS フィードをキャッシュしてサーバーの負荷を軽減します。
Hummingbird では、有効期限を制御したり、無効化することができます。
統合
プロバイダーと統合し、キャッシュを完全に制御することができるそうです。
設定
File Change Detection:
ファイル構造の変更を検出したら、
ハミングバードがどのように処理するかを選択します。
Gzip圧縮
Gzip 圧縮されているかどうかを確認できます。
Server type
サーバーのタイプを選択します。
Apache/ Nginx/ IIS から選択可。
以降は、Apache 選択時の説明です。
Enable compression
自動を選択すると、自動的に .htaccess ファイルに追記し、
Apache サーバーに GZip 圧縮を自動的に適用できます。
または、手動に切り替えて圧縮ルールを自分で適用することもできます。
手動での更新用コード。
アセット最適化
アセット最適化機能は、デフォルトでは無効になっています。
アセット最適化機能は、マルチサイトモードでも使用可能です。
その際には、ネットワーク管理で有効にする必要があります。
「Active」ボタンをクリックするとファイルチェックが自動的に開始されます。
チェックが完了すると上のような画面に切り替わります。
3 種類のメニューが用意されています。
ここでは、アセットを最適化することで、
ページの読み込み時間を改善するように圧縮・整理できます。
自動化されたオプションを使用するか、
各ファイルを手動で設定するかを選択できます。
自動オプション
Speedy もしくは Basic を選択できます。
手動編集画面。
ファイルの圧縮・結合・移動などを行えます。
ここで設定した内容は、有効化された自動最適化オプションに適用されます。
自動的に最適化するファイルを選択します。
CSS files:
CSS ファイルを最小化し、高速に読み込まれるバージョンが生成されます。
ファイルから不要な文字やコード行を削除し、
よりコンパクトなファイルにします。
JavaScript files:
JavaScript ファイルのホワイトスペースや不要なコードを削除し、
小さくても有効なコードを生成します。
Fonts:
フォントの配信が最適化され、
パフォーマンステストで「レンダーブロッキングリソースを排除する」が検出されません。
デフォルトでは、検出された全ての CSS と JS ファイルが最適化されます。
最適化しなくてもよいファイルがある場合は、ここで指定すると除外されます。
Tools
1.重要なレイアウトやスタイリングの CSS をここで追加します。
セクションにある