WordPressの最適化。 コンペティション「最高のアイデアを得るための年間UPU！」

HackerTarget.comによると、Alexaサイトの20.9％（ 500,000のうち104,684 ）はWordPress CMSを利用しています。 小規模なブログエンジンから、WordPressは普遍的なWebサイト開発プラットフォームに成長し、エコシステム全体を生み出しています。



アバディーングループは、サイトのロード時間が1秒増加すると次のような結果になるという調査を実施しました。

• ページビューの11％減少。
• 顧客満足度の16％の低下。
• 訪問者の購入者へのコンバージョン率が7％減少します。

モバイル購入者の40％がオンラインストアを離れ、そのページは3秒以上読み込まれます。



この記事では、WordPressの最適化のトピックについて説明します。 今後の記事でこのトピックをよりよく議論するために、コンテストを開催しています。この記事には含まれていないWordPressの最適化に関する推奨事項をお送りください 。 最も完全で有用な最適化のヒントの作成者には、 VPS 1024が1年間提供されます。 記事の最後に、WordPress最適化の実験用に無料のCloud VPSを登録するためのリンクがあります。

最適化する前にWordPressのパフォーマンスをテストする

サイトの読み込み時間を決定しましょう。 テストには、 GTMetrixサービスを使用します。







ネットワークでのページ読み込み時間2.62秒。



また、サイトサービスWebPageTestも確認してください。 以下の検証結果。





サイトの最初の読み込み時間は2.112秒です。 サイトのリロード時間：1.325秒。

WordPressテーマを最適化する

損失なくグラフィックを圧縮する

WordPressテーマ（およびすべてのメディアファイル）の画像を最適化するには、 WP Smush.itプラグインをインストールします 。 次に、WordPress管理パネルの[メディア]セクションに移動し、[Bulk Smush.it]をクリックします。 使用済みのグラフィックは、損失なく圧縮されます。

CSSスプライトを使用する

CSSスプライトを使用して、サーバー要求の数を減らすことができます。 スプライトテーブルは、サイトの小さなグラフィック要素の1つの大きな画像です。 CSSのおかげで、 background-positionプロパティを使用して各要素を個別に表示できます。







スプライトの主な利点は、一度にすべての要素を一度にロードし、HTTPリクエストの数を減らすことです。



スプライトを作成するには、 spriteme.orgサービスを使用できます。 SpriteMeリンクをブラウザのブックマークバーに移動します。 最適化するWebサイトを開き、ブックマークバーのSpriteMをクリックします。







右側のサービスウィンドウが開き、WordPressテーマ画像からスプライトを作成できます。 [ スプライトを作成]をクリックして作成します。 他の画像をこのウィンドウに移動して、スプライトに結合することもできます。 [スプライトの作成]をクリックした後、WordPressテーマが変更されておらず、すべてのコントロールが配置されていることを確認します。 SpriteMeは完全には機能しません。問題が発生した場合は、自分でスプライトを実行する必要があります。 すべてうまくいった場合は、[ CSSのエクスポート ]をクリックします。 サイトで変更する必要のあるCSSを含む新しいウィンドウが開きます。 結果のスプライトをダウンロードし、WordPressテーマフォルダーに保存します。 CSSテキストエディターでテーマを開きます。 Sprite Meが提供するルールに従って、スプライトに結合された画像を見つけて、CSSを使用したスプライトに置き換えます。 CSSを編集したら、サイトのデザインが変更されていないことを確認します。 他の人のテンプレートを編集するとき、CSSデバッグプロセスには時間がかかる場合があります。



SpriteMeが役に立たない場合は、 Sprite Generator CSSサービスを使用して、テーマイメージのセットからスプライトを生成できます。 CSS-sprites.comが示唆するように 、画像を個別にアップロードするのではなく、画像セットを一度にダウンロードできるため、このサービスは優れています。



自己生成されたCSSスプライトについては、 CSS Background Image Sprites：A Beginner's Guideおよび簡単で便利なCSSスプライトの作成を参照してください。

WordPress画像の最適化

サイトに写真をアップロードするときは、写真の未使用スペース（たとえば、白い背景）を切り取り、写真のサイズをブログ上の必要なサイズに縮小することを忘れないでください。 大きな画像をアップロードし、 幅と高さの属性を使用すると、画像の読み込みに時間がかかります。 また、画像をアップロードするときにこれらの属性を常に事前定義します。

ファイル形式

画像をダウンロードする前に、それらが最適な形式で保存されていることを確認してください。 最適な形式は、PNG（8/24ビット）、JPG、GIF（小さな写真用）です。 少数の色のイラストは、PNG 8ビットで適切に保存されます。 多数の色の写真や画像はJPEGで適切に保存されます（保存時に最低品質を使用すると、画像が視覚的に損なわれません）。 このアドバイスは当たり前のように思えるかもしれませんが、ダウンロードする画像の量を大幅に減らすことができます。



最高品質での保存（494.5 kb）：







中品質（94.34 kb）で保存：

グラバターとアバター

Gravatarを使用すると、サイトのパフォーマンスが低下します。 アバターを表示する必要がない場合は、WordPress管理パネルの[設定] -> [ ディスカッション ]セクションでアバターをオフにすることができます。



あなたは他の方法で行くことができます：

• cronによるgravatarアバターのキャッシュ。
• コメントでアバターをキャッシュします。
• アカウントがgravatarに関連付けられていないユーザーのために、ユーザーごとにアバター画像のコピーを1つ保持します。

これを行うには、 FV Gravatar Cacheプラグインをインストールします。

FV Gravatar Cacheをインストールしたら、プラグイン設定でcron操作を有効にする必要があります。







ここで、すぐにタスクを開始できます。

jQuery Imageの遅延読み込み

JQuery Image lazy load WPを使用すると、ユーザーが画面で画像を表示しているときにのみ写真をダウンロードできます。 静的ファイルを生成するキャッシュを使用している場合、関数は機能しない場合があります。 この機能を有効にするには、 jQuery Image Lazy Load WPプラグインをインストールします。 競合するBJ Lazy LoadおよびLazy Loadプラグインのテストが実施されましたが、これらのプラグインの結果は、テストされたサイトで平均0.40秒、JQuery Image lazy load WPよりも悪いことが判明しました。

テキスト付きの写真を使用しないでください

テキストのみの写真をサイトに追加するのは得策ではありません。 これにより、サーバーへのクエリの数が増加し、検索エンジンが画像内のテキストを正しく読み取れなくなります。 可能であれば、ロゴにCSSスタイルのテキストを使用します。 Googleは 、ウェブ上で使用するための豊富なフォントセットを提供しています。これは、多くの場合、テキスト付きの画像を放棄するのに役立ちます。

サイトのクリーンアップ

未使用の拡張機能を無効にします。 これにより、CPUホスティングの負荷を軽減できます。 前述のP3プラグインをインストールします 。これにより、どのプラグインがより多くのメモリを消費し、サイト全体のパフォーマンスに悪影響を与えるかを確認できます。

ピングバックとトラックバックを無効にする（オプション）

ピンバックは、別の投稿にリンクするときに作成されるコメントのタイプです。 コメント内の別の投稿を参照すると、投稿の作成者のコメントにピンバックが表示されます。



トラックバック-特別なリンク付きのコメントのタイプ。 通常、トラックバックを受け入れたいブログは、投稿の最後にリンクを配置します。 リンクは別のブログに挿入され、元の投稿のコメントに使用されます。



これらの機能が必要ない場合は、無効にして、サーバーのリソースを解放できます。 WordPress管理ダッシュボードで、 [設定] -> [ ディスカッション ]に移動し、 [記事からリンクされているブログへの通知を試みる]および[他のブログ（ピンバックおよびトラックバック）からのリンク通知を許可する]を無効にします。 変更を保存することを忘れないでください。

コメント内のスパムの量を減らす

WordPressのデフォルトのインストールに含まれているAkismetプラグインを使用すると、コメント内のスパムの量を大幅に減らし、最終的にサーバーの負荷を減らすことができます。

キャッシュと縮小

DNSルックアップを1〜5個の異なるホスト名に制限する

ブラウザがWebサーバーとのネットワーク接続を確立する前に、ブラウザはサイト名をIPアドレスに解決します。 DNSレコードは、クライアントブラウザーとオペレーティングシステムによってキャッシュできます。 正しいエントリがまだクライアントキャッシュにある場合、遅延はありません。 ただし、クライアントがネットワーク上でDNSルックアップを実行する必要がある場合、DNSサーバーの場所によっては、遅延が非常に大きくなる可能性があります。 DNSルックアップ時間の短縮は、他の種類のクエリよりも重要です。



他のホスト名からリソース（画像、CSSファイル、JavaScriptファイルなど）を要求するたびに、サイト訪問者のDNSルックアップの数を増やします。



ホスト名が別のドメインまたはサブドメインにある場合、DNSルックアップの回数が増えます。

pic1.sitename.ru≠pic2.sitename.ru≠google.com

コンテンツを取得するリソースの量を最大4〜5に制限します。



サイトで使用されているすべての外部リソースを表示するには、サイトのFirefoxでFirebugを開き、[ NET] -> [ すべて]セクションに移動します。







このルールの詳細については、Yahoo！ 開発者向け。

JavaScriptとCSSを外部にする

JavaScriptとCSSを可能な限り外部ファイルに持ち込みます。 これにより、異なるCSSファイルからファイルを収集し、JavaScriptファイルを結合できます。

CCSファイルへのリンクを一番上に、JavaScriptファイルへのリンクを下に置く

JavaScriptはページの機能を変更する可能性があるため、ほとんどのブラウザーは最初に他のリソースをロードする前に最初に配置されたJavaScriptファイルを解析します。 これにより、コンテンツのダウンロードの並列化を減らすことができます。



スクリプトを一番上に配置すると、JavaScriptの読み込みが完了するまで、訪問者に空白のページが表示される場合があります。 これはパフォーマンスに悪影響を与える可能性があります。 したがって、スクリプトはページの下部に配置する必要があります。



CSSファイルは、ページ上部のヘッダーに配置する必要があります。 そうでない場合、負荷の並列化に悪影響を及ぼす可能性もあります。

キャッシュと縮小の有効化

Use Google Librariesをインストールして有効にします 。 WordPressで配布されるJavaScriptライブラリの一部は、 Google AJAX Libraries APIでもホストされています 。 プラグインを使用すると、WordPressインストールのファイルを使用する代わりに、WordPressでGoogleのCDNを使用できます。 このアプローチの利点の詳細については、記事「GoogleにjQueryをホストさせる3つの理由」を参照してください。



また、 W3 Total Cacheプラグインをインストールしてアクティブ化します。 メモリ内の効果的なキャッシュを有効にするには、サーバーにMemcachedをインストールする必要があります。 Ubuntu 14.04でInfobox Cloud VPSを使用します。



Memcachedをインストールします。

apt-get install memcached   <strong>/etc/memcached.conf</strong>: #/etc/memcached.conf #Memcached  ,   -d #    logfile /var/log/memcached.log #     -m 256 #  -p 11211 # localhost -l 127.0.0.1
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Memcachedを再起動します

 /etc/init.d/memcached restart
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

PHPのMemcachedサポートモジュールをコンパイルしてインストールします

 apt-get install php5-dev libmemcache-dev pecl download memcache tar xzvf memcache-2.2.7.tgz cd memcache-2.2.7/ phpize && ./configure --enable-memcache && make cp modules/memcache.so /usr/lib/php5/20121212/ echo 'extension=memcache.so' >> /etc/php5/apache2/php.ini /etc/init.d/apache2 restart
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

W3 Total Cacheで縮小を機能させるには、Javaをインストールする必要があります。

 apt-get -y install software-properties-common add-apt-repository ppa:webupd8team/java apt-get update apt-get install oracle-java8-installer
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

javaコマンドの場所を特定できます

 which java
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、縮小のために、yuicompressorが必要です。

 wget https://github.com/downloads/yui/yuicompressor/yuicompressor-2.4.7.zip unzip yuicompressor-2.4.7.zip cd yuicompressor-2.4.7 apt-get -y install ant ant cd build mkdir /usr/share/yuicompressor mv yuicompressor-2.4.7.jar yuicompressor.jar cp yuicompressor.jar /usr/share/yuicompressor/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

[パフォーマンス]-> [縮小]セクションのWordPress管理パネルに移動します（そのようなセクションがない場合は、プラグインセクションに移動し、W3 Total Cacheを見つけて[設定]をクリックします）。

Rewrite URL structureをオンにします 。

HTMLおよびXMLの最適化を有効にします。







JavaScriptの最適化：







CSSの最適化：







セクションパフォーマンス -> ページキャッシュで設定します：







セクションパフォーマンス -> ブラウザキャッシュでさらに ：







CDNを使用する場合は、圧縮を無効にします。 CDNはすでに圧縮されています。



ブラウザキャッシュセクションのCSS、JavaScript、およびメディアの最適化：

cdnを使用

CDNを使用すると、世界中のさまざまな場所から静的コンテンツ（画像、CSSファイル、JavaScriptファイルなど）を受信できます。 訪問者にとって、地理的に近い場所にあるサーバーからコンテンツがより速く開きます。 CDNは、ほとんどのホスティングプロバイダーよりも速く静的コンテンツを処理するために最適化されています。 また、CDNは、メインサーバーへのネットワークの負荷を減らし、サーバーが過負荷でクラッシュする可能性を減らします。 CDNのもう1つの機能は、データ読み込みの並列化の改善です。 ほとんどのブラウザでは、単一のホスト（ドメインまたはサブドメイン）からダウンロードするリソースに制限があります。 ページに10個の画像があったとしても、ブラウザは一度に2個の画像しかダウンロードしません。



ただし、まだDNSルックアップの問題は望ましくありません。 Google からアドバイスがあります：

6個未満のリソースに対して1つのホストを使用しないでください。 ホスト上の2つ未満のリソースは本当に悪いです。 5個を超えるホストを使用しないでください（サイトの広告を処理するサーバーなど、制御できないサーバーはカウントしません）。



すべてのホストからの負荷の50％以上を処理するホストがないことを確認してください。

CDNセットアップ

この例では、CloudFlareからCDNを構成します。 CloudFlareプラグインをインストールします。

1. CloudFlareでアカウントを作成します

2.サイトを追加します。







3.パフォーマンスとセキュリティレベルを構成し、料金プランを選択します（無料プランはSSLをサポートしておらず、 他の制限があります ）。







4. DNSサーバーを変更します。







ドメインのCloudFlare CDN DNS管理セクションをオンにします（クラウドアイコンをクリックして、アイコンをオレンジ色にします）。







その後、[プラグイン]-> [CloudFlare]セクションで、CloudFlareからCDNネットワークにアクセスするための正しいデータ（ドメイン名、メール、APIキー）を設定します。

最適化後のWordPressパフォーマンステスト

GTMetrixサイト検証結果 。







サイトのロード時間は1.38秒でした。 最適化前の時間は2.62秒でした。

最適化の結果、サイトの読み込み時間が2倍に短縮されました。 Google Page SpeedとYahoo! YSlow。



WebPageTestでサイトをチェックしましょう。







サイトの最初の読み込み時間は1.401秒です。 サイトのリロード時間は0.477秒です。 最適化の前、サイトの最初の読み込み時間は2.112秒でした。 サイトのリロード時間1.325秒。

最適化の結果、サイトの最初の読み込み時間が25％短縮されました。 サイトのリロード時間はほぼ3倍に短縮されました。



これは、WordPressを最適化するための最初のステップに過ぎないと確信しています。 テストで確認した最適化のアイデアをtrukhinyuri@infoboxcloud.comに送信します。 推奨事項の最良のセットについては、著者はInfoboxから 1年間のVPS 1024を受け取ります。 WordPressのインストールと最適化を試行できるように、Cloud VPSの試用版を15日間無料で提供しています。 こちらから登録してください 。



成功したWordPress最適化！