WooCommerceのGooglePageSpeedInsightsで高いパフォーマンススコアを達成する方法

ウェブサイトのパフォーマンスは、代理店が見落としがちなウェブデザインの重要な側面です。 サイトが非常に迅速に応答してコンテンツを配信する場合、コンバージョンの増加やGoogleでのランキングの向上など、多くのメリットが得られます。

Herdlでは、ハイパフォーマンスが複数のマーケティングチャネルにわたって提供できるメリットを十分に理解しており、パフォーマンスの最適化をプロセスの不可欠な部分と見なしています。

ウェブサイトの速度が重要なのはなぜですか？

eコマースサイトであるコンバージョン率は、レポート作成プロセスの中核を形成する重要なデータです。 サイトの速度はウェブサイトのコンバージョン率に根本的な影響を及ぼします。Googleが提示した調査では、高速なウェブサイトの大きなメリットが明らかになっています。 彼らのレポートでは、ウェブサイトの速度とコンバージョン率の間に強い相関関係があることを簡単に見つけることができます。

Googleは最近、ランキング要素としてのWebサイトの速度の重要性を再確認しました。2018年の初めに、モバイルファーストインデックスへの広範な移行の一環としてSpeedUpdateを発表しました。 Speed Updateは2018年7月に公開され、最も遅いWebサイトエクスペリエンスの原因となったサイトのごく一部にしか影響を与えなかったと報告されています。

eコマースサイトであるコンバージョン率は、レポート作成プロセスの中核を形成する重要なデータです。

それにもかかわらず、ウェブサイトの速度は、Google PageSpeed Insightsが最初にリリースされた2010年まで、Googleの検索エンジンアルゴリズムの一部でした。 立ち上げ時に、サイトの速度はGoogleのランキングシグナルの1つとして正式に指定され、それ以来、不可欠なSEOランキング要素として認識されています。

ハードウェアとセットアップの重要性

パフォーマンスはハードウェアから始まるため、サーバーまたはネットワークが制限されている場合、パフォーマンスは必然的に低下します。

当社のホスティングプラットフォームは、インフラストラクチャの専門家であるBitfieldConsultingのJohnArundelによって設計、構築、管理されており、データセンターレベルのディザスタリカバリを備えた高性能のWordPressホスティングを提供します。 私たちはDigitalOceanとLinodeにサイトを分散させており、どちらもSSDドライブと40Gbitネットワークを備えた高速ハードウェア上で実行される信頼性が高くスケーラブルな仮想プライベートサーバーを提供します。

パフォーマンスとセキュリティのために、私たちは常にサーバーごとのファイアウォールを備えたサーバーごとの単一サイトモデルに取り組んでいます。 共有ホスティングはビジネスサイトでは避けるのが最善であり、eコマースでは絶対に避ける必要があります。 ホスティングとセキュリティに関しては、偏執的である必要があります。「リスクを冒さない」ことが採用するのに最適な考え方です。

共有ホスティングはビジネスサイトでは避けるのが最善であり、eコマースでは絶対に避ける必要があります。

Herdlサーバーは、Puppetによる構成管理を備えたLEMPスタック（Ubuntu LTS、Nginx、MySQL、PHP）を実行します。 Puppetを使用すると、サーバーのセットアップ、アプリケーションのインストール、およびシステム管理を自動化して、これらの反復的なタスク中の人的エラーを排除できます。 また、毎日のサーバーバックアップを自動化し、データベース全体とサイトの増分バックアップをAmazonS3に保存するためにも使用されます。 バックアップをオフサイトのS3に保存することで、データセンターがダウンした場合でもバックアップにアクセスできるようになります。

単一サーバーアーキテクチャの場合、パフォーマンスのボトルネックは多くの場合データベースであり、メモリを大量に消費する可能性があります。vCPUだけでなくRAMも十分にあることを確認してください。 Redisを使用してクエリ結果をキャッシュすることで、データベースのパフォーマンスをさらに向上させることができます。

MySQLに付属している標準構成（ my.cnf ）は機能しますが、サーバーの仕様に基づいて少し調整することをお勧めします。 役立つ提案や設定ファイルの例など、WordPress用のMySQLの最適化に関する優れた記事はたくさんありますが、実際のサイトの使用状況に合わせて調整するのが最善のオプションです。このために、この優れたPerlスクリプトを使用します。

必ず最初にステージングサイトで構成の変更をテストし、mysqlslap（MySQLに付属）を使用して結果をベンチマークしてください。 ステージングサーバーでもMySQLの低速クエリログを有効にすることをお勧めします。これにより、調査が必要な厄介なクエリが強調表示される可能性があります（また、ベンチマークのテストクエリを提供する場合にも役立ちます）。

コンテンツを定期的に公開している場合、WordPressデータベースは、すべてのページと投稿のリビジョンが自動的に保存されるため、非常に肥大化する可能性があります。 デフォルトでは、WordPressが保存するリビジョンの数に制限はありません。WordPressの構成ファイル（ wp-config.php ）に次の行を追加することで、この数を5つに制限します。

define( 'WP_POST_REVISIONS', 5 );

最後に、データベースを時々最適化することも価値がありますが、必ず最初にバックアップしてください。 WordPressキャッシングプラグインであるWPRocketは、これに必要なすべてのツールを提供します。 WPロケットについては後でもう少し話します。

開発ツール

WordPressの開発では、RootsチームによるSageスターターテーマ（およびワークフロー）を使用したWordPressの独自の「フレーバー」に依存しています。 これには、高度な自動ビルドタスク用のGulp、サードパーティのWordPressプラグイン（およびバージョン管理）の使用を含む依存関係を制御するためのComposer、およびパッケージ管理用のnpmが含まれます。

ご想像のとおり、私たちのワークフローは常に進化しており、プロセスに組み込むための新しいツールとサービスを常に検討しています。 私たちのチームは、コードをDRYに保ち、BEMの原則に可能な限り従うように努めています。 テーマファイルの構造は、テーマの機能、テンプレート、アセットを分割することでこれを容易にするように設定されています。

バージョン管理には、NVIE gitワークフローに従って、Bitbucket経由でGitを使用します。 コードはDeployHQを介して自動的に構築およびデプロイされます。これはセットアップが簡単で、WordPress開発に必要なすべてのオプションを提供します。 さらに、彼らのサポートはファーストクラスです。

アプリケーションが稼働したら、パフォーマンスを微調整して最適化できるように、重要な統計を測定してベンチマークします。 このために、Pingdom Tools、GT Metrix、およびGooglePageSpeedInsightsを組み合わせて使用​​します。 これらのサービスが生成するレポートには、多くの指標があります。最終的には、読み込み時間とページサイズの両方に焦点を当て、両方を可能な限り低くすることを目的としています。 これにより、すべてのデバイス（およびネットワーク接続）のすべてのユーザーが可能な限り最高のエクスペリエンスを得ることができます。

クロスブラウザーとデバイスのテストに関しては、LambdaTestを選択します。 使い方は簡単で、包括的なテストスイートを提供し、すべての予算に合うように計画されています。 また、TrelloおよびSlackと統合され、ワー​​クフローの重要な部分を形成します。

WP Rocketは私たちが好むWordPressキャッシングプラグインであり、どのサイトでもパフォーマンスを劇的に向上させます。 構成は簡単で、上級ユーザー向けに非常にきめ細かい制御を提供します。つまり、キャッシュ構成を微調整できます。 WP RocketはCDNとうまく統合されており、そのライセンスモデルは代理店に最適です。

クライアントの予算とサイトに応じて、静的アセットはWebサーバーから直接提供されるか、CDN（BelugaやBunnyCDNなど）から、またはリアルタイムの画像最適化サービス（PiioとImagekit）を介して提供されます。 モバイルパフォーマンスの場合、Piio（pie-oと発音）は、画像を遅延読み込みする前にその場で画像を検出、最適化、サイズ変更するため、優れた選択肢です。つまり、各デバイスは、最適化され、正しくサイズ変更された画像を（ブラウザーでスケーリングせずに）受信します。

画像最適化サービスを使用していない場合は、ShortPixelが推奨プラグインです。 非可逆、光沢、または可逆圧縮を使用して優れた画像最適化を提供し、画像をWebP形式に変換することもできます。 また、メディアライブラリ全体を一括最適化することもでき、価格も非常に競争力があります。

セキュリティは、Webサイトのパフォーマンスに不可欠な要素です。 サイトが損傷したり、マルウェアに感染したり、攻撃によってオフラインになったりした場合、サイトは最適に機能していません。 非常に人気があるため、WordPressはハッカーの標的となることが明らかであるため、アプリケーションレベルのセキュリティが不可欠です。 利用可能な最高のWordPressセキュリティプラグインであるWordFenceを使用し、強くお勧めします。 eコマースサイトの場合は、有料のプロライセンスを選択してください。顧客データはリスクを冒すべきものではありません。

可用性も重要です。 それが現在ダウンしていて、あなたがそれについて知らなければ、地球上で最速のサイトを持っている意味はありません。 サーバーレベルの監視では、Icingaを使用して、各サーバーで実行されているすべてのサービスを監視します。 また、Uptime Robotを使用して、安心感を高めています。これら2つを組み合わせることで、問題が発生した場合に常に迅速にアラートを受け取ることができます。

Mabl、Sentry、およびFluxguardはアプリケーションの監視を処理し、アプリケーションレベルの問題を警告します。 また、コンテンツレベルで変更を検出することもできます。これは、更新後の根本的なコードレベルの問題の優れた指標です。 Mablは、自動テストなど、他にもたくさんのクールな機能を備えています。 これは私たちのお気に入りのサービスの1つであり、間違いなくチェックアウトするサービスの1つです。

トラフィックと負荷が単一サーバーの容量を超えて増加すると、マルチサーバーアーキテクチャが機能します。 この時点で、開発運用コンサルタントまたはチームの専任の社内メンバーを雇うことを強くお勧めします。

パフォーマンスを設計および開発プロセスの一部にする

パフォーマンスは、計画から設計および開発に至るまでのプロセス全体で考慮事項です。 最高のオンライン体験を生み出すためのプロジェクト、または特定の要素にアプローチするための最良の方法について、設計チームと開発者の間で継続的な対話があります。

計画段階では、サイトに必要な機能についてしっかりと把握しています。 eコマース要素を提供する場合はホスティング要件が異なるため、WooCommerceの使用はこの優れた例です。 クライアントは最初からこれを認識しており、さまざまなホスティングオプションのセットが提供されています。

これと同じ考え方がデザインフェーズにも引き継がれ、サイト上のページや要素を表すために、ワイヤーフレーム、コンセプト、さらにはアニメーションを作成します。 ここでほとんどのフロントエンド効果が考案され、私たちのチームは協力して、パフォーマンスが不可欠な役割を果たす素晴らしい体験を提供するものを設計します。

モバイルとデスクトップのエクスペリエンスがどのように異なるかを考慮して、このプロセスの一部としてすべてのデバイスを検討することが重要であると考えています。

私たちは、要素を継続的に調整しながら、開発全体を通じてテストに反復的なアプローチを取ります。 私たちは、理想的なコンセプトから始めて、個々のデバイスやブラウザーに適したレイヤーを削除するという、優雅な劣化のプロセスに従います。 さらに、特にパフォーマンスの最適化、キャッシュとファイルの最適化、およびコードレベルの変更のための時間を確保します。 このステップでは、最高のパフォーマンスが得られるまで、複数のデバイスで要素をテストして再テストします。

仕事のすべての段階でパフォーマンスに焦点を当てることで、提供するサイトが立ち上げ時に好評を博し、多くの賞を受賞することができました。 これには、AwwwardsのDeveloper Award、Mobile Excellence Award、Mobile Site of the Weekなどの開発固有の賞が含まれます（とりわけ）。

WooCommerceサイトの速度とセキュリティを向上させる

ウェブサイトのパフォーマンスに関する背景と、セットアップとプロセスに関する詳細を共有することで、WooCommerceマネージャーがサイトの速度とセキュリティを向上させるのに役立つことを願っています。 eコマースWebサイトを効果的に運営するには、パフォーマンスを最優先する必要があります。モバイルデバイスの普及に伴い、パフォーマンスがさらに重要になると考えています。

セットアップに関して質問やコメントがある場合は、コメントを残すか、連絡してください。