ECサイトの開設は、特に小売企業にとって大きな成長機会であり、一大プロジェクト。オンラインプレゼンスの確立が成功の鍵となるだけでなく、国際競争を生き抜くための必然的な戦略になる可能性もあります。
オンラインストアを持つことで、流通を介さずに地元の優れた商品を世界に向けて販売したり、ターゲットを絞った広告やSNSキャンペーンなどの高度なマーケティング戦略を活用したり、AIツールを用いて業務効率や顧客体験、マーケティング戦略を改善したりすることが可能になります。
しかし、オンラインストアを立ち上げるには、入念な戦略と組織計画、コストと利益、利点と欠点、そして脅威と機会の徹底的な分析が重要。
さらに、成功にはビジネスを支える最新で高速、かつ安全なウェブサイトも必要です。また、スムーズなショッピング体験の提供、GDPRのような国際的なプライバシー規制への準拠、安全な取引の確立、セールスファネルを通じた商品購入までのサポートも鍵となります。
また、SEOの強化、優れたスケーラビリティ、高い柔軟性、簡単な管理方法により、技術的な問題に時間やリソースを費やすことなく、大事なビジネスに専念することができます。
これらすべてを実現することは容易ではありませんが、取り組む価値があります。
オンラインストアを開設する際に考慮すべき要素は、パフォーマンス、セキュリティ、機能性の3つに分けることができます。
そこでKinstaブログでは、3つの記事にわたり、この3つの要素をそれぞれ詳しく掘り下げていきます。
第一弾となる今回の記事で取り上げるのは、「パフォーマンス」です。オンラインストアの速度とパフォーマンスを最適化するためのベストプラクティスを10種類ご紹介します。
セキュリティと機能性については、それぞれ別の記事でご説明します（ECサイトに特化したホスティングを利用する重要性も）。
世界を視野に入れ、ECサイトでビジネスを成長させましょう。
最新ECサイトを開設するには
買い物客のサイトとのインタラクションを強化し、豊かで快適なブラウジングおよび買い物体験を提供するECサイトを実現するには、いくつかの技術的・機能的な側面が重要になります。
技術的な観点からは、優れたパフォーマンスとセキュリティが必要です。また、チームが管理しやすく、拡張性にも優れていなければなりません。
このような特徴を持つウェブサイトを構築するには、必然的に最先端のインフラ、優れたコンテンツデリバリネットワーク（CDN）、開発者向けの高度な機能、効率的で使いやすいバックアップ機能、迅速で熟練したカスタマーサポートが必要になります。
したがって、ECサイトを立ち上げる最初のステップは、必要となるサービスやツールの選択です。つまり、どのようなホスティングソリューションを利用するかを決定します。今日その選択肢は無限にあり、システム管理者を雇ってサーバーを自社で管理することもできれば、WixやShopifyのようなフルマネージドソリューションを利用することもできます。
自社でサーバーを管理すると、最大限の柔軟性とカスタマイズ性を確保することができますが、膨大なリソースと熟練したシステム管理エンジニアが必要になります。このため、通常は大企業向けの選択肢です。
フルマネージドプラットフォームには使いやすいという利点がありますが、必要な技術的そして運用的な柔軟性は保証されません。またビジネスの成長に伴い、予想外の費用が発生する可能性もあります。
この折衷案となるのが、オープンソースプラットフォームを基盤に、EC機能を提供するホスティングサービスを組み合わせる方法です。
関連して、以下の主要サービスの比較も参考にしてみてください。
Kinstaでは、ECサイト向けプレミアムホスティングを提供しています。インフラストラクチャは、最も使用されているECプラグインであるWooCommerce、およびEasy Digital Downloadsをサポートし、WordPressサイトのパフォーマンス、セキュリティ、使い勝手に最適化されています。さらに隔離コンテナ技術を採用して、Google Cloud Platformの上にサービスを構築し、Cloudflareのネットワークをフル活用してパフォーマンスをセキュリティを保証します。
ECサイトのパフォーマンスを最適化するベストプラクティス10選
ECサイトのコンバージョン率に関する最近の調査によれば、ECサイトの主な成功要因は、ページの読み込み速度にあります。1秒で読み込まれるECサイトは、5秒で読み込まれるサイトと比較して、コンバージョン率が2.5倍も高くなります。
1秒で読み込まれるページの平均コンバージョン率は約40%で、2秒に延びると34％に低下します。3秒では29%、そして6秒で最小値に達します。
つまり、ECサイトの表示速度は1秒〜2秒の間まで高速化することが重要です。
このようなパフォーマンス改善は、サイトの複数の領域に影響を与える継続的なプロセスになります。一般に特に大量のリソースを消費するECサイトでは、その戦略的価値は明白です。
それでは、ECサイト所有者が実践できる、パフォーマンス最適化のベストプラクティスを10種類ご紹介していきます。
1. 最先端のホスティングインフラと技術スタックを選び
ECサイト用のホスティングを選ぶ際には、提供される技術スタックを考慮しましょう。
まず最初に決めることになるのは、ウェブホスティングの種類です。以下のような種類があり、インフラや提供サービスが大きく異なります。
- 共用サーバー
- 専用サーバー
- VPS（仮想専用サーバー）
- クラウドホスティング
- マネージドWordPressホスティング
ECサイトのパフォーマンスを最大化するには、高速なインフラが欠かせません。共用サーバーは、非常に安価に利用することができますが（中には無料レンタルサーバーも）、ECサイトを軌道に乗せるのに必要な最低限のパフォーマンスとセキュリティは保証されません。
専用サーバーおよびVPSでは、高度なカスタマイズとパフォーマンスの最適化が可能ですが、シスアドのスキルが必要になるため、中小企業の予算には合わないかもしれません。クラウドホスティングサービスは、ECサイトに最新のパフォーマンスとセキュリティを提供してくれるため、高度な技術的スキルを必要としない場合があります。
WordPressでECサイトを運営している場合は、マネージドWordPressおよびWooCommerceホスティングを利用することができます。サーバーの設定や最適化を自分たちで行う必要はなく、専門的なサポートを受けることができるため、サイトのインストールやメンテナンスが簡素化されます。
また、最先端の技術スタックを利用することも重要です。多くのウェブホスティングは、ApacheウェブサーバーとMySQLを土台にしたスタックを提供していますが、できればNginxとMariaDBのようなより新しく優れた技術スタックを利用できるのが理想的です。
Kinstaのホスティングインフラと技術スタック
Kinstaでは、Google Cloud Platform上に最高かつ最速のマネージドWordPressホスティングソリューションを構築しています。
データセンターは、プランを問わずC3DまたはC2（コンピューティング最適化）VMを実装するすべてのロケーションから任意の場所を選択可能です。さらに、Googleの低レイテンシを誇るプレミアムティアネットワークも活用しています。
さらに、Nginx、MariaDB、PHP8.3 、LXDコンテナ、エンタープライズレベルのCloudflare統合をベースに、高速で堅牢な技術スタックをすべてのお客様に提供しています。
Kinstaが最速のマネージドWordPressホスティングである理由はこちらをご覧ください。
2. サポートされているPHPバージョンを利用する
W3Techsによれば、2024年8月現在、PHPは「（特定できた）全ウェブサイトのうち76.1%で使用」されています。
そのうち、PHP 7を使用するサイトは52.6%、8は33.0%、5は14.2%を占めています。
ECサイトでは、サポートされているPHPバージョンを使用することも重要です。
PHPにはリリースのライフサイクルがあり、各メジャーリリースは通常2年間サポートされます。サポートされているバージョンは、パフォーマンスとセキュリティの更新が継続的に行われており、サポートが終了したバージョンのPHPは（サポートされているバージョンと比較して）パフォーマンスが低下し、セキュリティの脆弱性が増加します。
2024年8月現在、PHP 8.1、8.2、8.3が公式にサポートされています。
PHP 8.1、8.2、8.3と複数のCMSおよびフレームワークを用いて独自に速度テストを実施した結果、 最新バージョンのPHP 8.3が最も高速であり、最大52.20％パフォーマンス改善をもたらすことがわかりました。
KinstaがサポートするPHPバージョン
Kinstaでは、サポートされているPHPバージョンのみを許可しており、現在はPHP7.4, 8.0, 8.1, 8.2, 8.3をご利用いただけます。
専用コントロールパネル『MyKinsta』では、数回のクリックでWordPressサイトのPHPバージョンを変更することができます。「WordPressサイト」画面で該当のサイトを選択し、「ツール」画面を開きます。この画面では、サイト管理に役立つ多数のツールにアクセスできます。「PHPエンジン」セクションを見つけて「変更」をクリックし、変更したいバージョンを選択するだけでOKです。
3. キャッシュを使って利用する
キャッシュはリソースのコピーを保存し、完全なページを再びダウンロードする手間を省き、コピーされたバージョンを素早く配信することができます。キャッシュにはいくつかの種類があり、それぞれに異なる目的がありますが、ここで注目したいのはブラウザキャッシュとWordPressキャッシュです。
ウェブサーバーがブラウザに対してリソースのキャッシュ期間を適切に指示するためには、正しいHTTPヘッダーが含まれていることが重要です。具体的には、HTTPリクエストにETagとExpiresヘッダーを設定します。
WordPressにはキャッシュシステムが組み込まれており、WP_Object_Cacheを使用することで、データベースへのリクエスト回数を減らすことができます。オブジェクトキャッシュは、すべてのキャッシュデータをメモリに保存し、キャッシュの内容をキーを使って利用できるようにします。このキーはキャッシュの内容を名前付けし、後で取り出すために使用されます。
WordPressを利用している場合、サードパーティのWordPress向けキャッシュプラグインをインストールすることも可能です。W3 Total CacheやWP Super Cacheなどを利用すれば、WordPressのキャッシュをきめ細かく管理できます。共用サーバーを利用する場合、あるいは利用するホスティングサービスに効率的なキャッシュ管理機能がない場合に有用です。
ただし、これらのツールは設定が複雑でやや高度な知識が必要になり、キャッシュの管理方法は自社で確立しなければなりません。
ECサイトであれば、買い物客のユーザー体験を考慮し、マイアカウントや決済手続きなどの特定のページからキャッシュを除外する必要があるかもしれません。
Kinstaのキャッシュ管理機能
キャッシュの管理は、専門知識を持つ担当者がいない場合、大変な作業になり得ます。Kinstaでは誰でも簡単に使用できるキャッシュ管理機能を提供しており、すべての設定がMyKinstaの「キャッシュ」画面に集約されています。
Kinstaのキャッシュ機能とサードパーティのWordPressプラグインの大きな違いは、Kinstaのキャッシュはサーバーレベルで動作する点です。
MyKinstaの「WordPressサイト」画面でキャッシュを管理したいサイトを選択し、「キャッシュ」画面を開きます。「サーバーキャッシュ」タブでは、キャッシュのクリアと有効期限の変更を行うことができます。
Kinstaでは、サーバーレベルでキャッシュが実装し、より優れたパフォーマンスと簡単な管理機能を提供しています。このため、キャッシュプラグインの使用は許可されていません。
特にWooCommerceおよびEDDサイトの場合は、woocommerce_items_in_cartまたはedd_items_in_cartのCookieが検出されると、自動的にキャッシュをバイパスします。これにより、買い物客によりスムーズな買い物体験を提供可能です。
Kinstaのお客様のWordPressサイトには、自動的にKinsta MUプラグインがインストールされるため、WordPress管理画面でキャッシュを管理することもできます。
この設定ページでは、以下の操作を実行できます。
- 全キャッシュのクリア
- サイトキャッシュのクリア
- オブジェクトキャッシュのクリア
- CDNキャッシュのクリア
- パージするカスタムURLの追加
- オートパージの有効化・無効化
また管理画面上部の「Clear Caches」をクリックすると、以下のキャッシュをクリアできます。
- すべてのキャッシュ
- サーバーキャッシュ（フルページキャッシュ）
- オブジェクトキャッシュ
- CDNキャッシュ
ちなみに、CDNキャッシュは他と種類が異なります。詳しくは次のセクションでご紹介します。
4. CDNを利用する
CDNは画像、スクリプト、スタイルシートなどの静的リソースを保存し、物理的に最も近い場所から配信できるようにするサーバーのネットワークです。
CDNを利用することで、通常サイトのパフォーマンスとセキュリティを大幅に向上させることができます。特にパフォーマンスの観点では、以下のような効果があります。
- ネットワークレイテンシとサイト全体の読み込み時間の短縮
- Time To First Byte（TTFB）の短縮
- 最新キャッシュ技術の活用
- GZIPやBrotliのようなデータ圧縮、画像最適化によるページサイズの縮小
- 帯域幅費用の削減
- スケーラビリティの向上
- SEOの改善
KinstaのCDN
Kinstaのすべてのプランには、高性能CDNをはじめとするCloudflare統合がデフォルトで付帯します。これはプランを問わず、Cloudflareの企業向け機能を無料で利用できることを意味します。
Cloudflareの静的リソースキャッシュでは、ECサイトのパフォーマンスを劇的に改善することができ、特にターゲットオーディエンスが世界に分散している場合に特に有用です。
KinstaのCloudflare統合には、他にも以下のような機能があります。
エッジキャッシュおよびCDNキャッシュは、CloudflareのCDNを有効後、MyKinstaの「キャッシュ」画面で管理可能です。
「エッジキャッシュ」タブでは、モバイルキャッシュの利用（および無効化）、URLを指定したキャッシュのクリアなどを行うことができます。
「CDN」タブでは、キャッシュのクリア、画像最適化、特定のファイルの除外などの操作を行えます。
5. 画像最適化
画像の最適化は、ページ表示速度の高速化に欠かせません。複雑な作業ではありませんが、基本的な知識は必要になります。
画像最適化にはいくつか方法があり、まずは画像の特性に適した画像形式を特定します。主要なJPEG、PNG、GIFに加えて、 WebPやAvifなどのウェブに最適化された画像形式は、優れた画質を保ちながら高い圧縮率を実現することができます。WordPressはAvifおよびWebPのいずれもサポートしているため、ECサイトでの活用可能です。
適切な画像形式を選択したら、次のステップは圧縮です。画像の圧縮方式には、非可逆圧縮と可逆圧縮の2種類があります。前者はファイルサイズをより縮小することができますが、その分画質が損なわれます。
画質が重要になる場合は、可逆圧縮をおすすめします。画質を損なうことなく圧縮するには、FileOptimizerやImageOptim for WordPressのようなツール、またはPhotoshopなどの写真編集ソフトウェアを使用します。あるいは、GZIP圧縮を行う手もあります。
Kinstaの画像最適化
Cloudflare統合により、画像の最適化も追加料金なしで実行可能です。PNG、GIF、JPEG画像は自動的にWebPフォーマットに変換され、サードパーティプラグインを使用せずにサイトの速度とパフォーマンスが改善されます。
この機能は、MyKinstaの「キャッシュ」画面で「CDN」タブを開き、「画像最適化」セクションで設定可能です。
「設定」をクリックし、表示されるウィンドウで圧縮方式を選択します。
6. HTML、CSS、JavaScriptのサイズを縮小する
HTML、CSS、およびJavaScriptリソースの圧縮とキャッシュにより、ブラウザがページを表示するのにダウンロードするデータ量を抑えることができます。
コード圧縮とは、ソースコードから不要な文字を削除することを意味します。開発作業ではコメントや空白は役立ちますが、ブラウザがページをレンダリングする際には不要です。コード圧縮により、HTML、CSS、JavaScriptのサイズを50％以上削減することができます。
関連して、Cloudflareは最近、自動コード圧縮機能の廃止を発表しました（以下英文の日本語訳）。
（自動コード圧縮機能を）廃止する理由は多数ありますが、ページの軽量化を目的としたパフォーマンス機能として、当社が取り組んでいる他のプロジェクト（圧縮の改善など）ほど効率的でなかったという事実に集約されます
これに伴い、MyKinstaのコード圧縮機能も廃止される運びとなりました。しかし、圧縮により送信されるファイルのサイズを減らし、ページの表示速度を向上させ、使用する帯域幅を減らすことができます。GZIP圧縮は、データを損なうことなく、生のデータセットを圧縮することができます。ファイルの種類を問わず圧縮できますが、特にHTML、CSS、JavaScriptのようなテキストベースのリソースに適しています。BrotliはGZIPよりも新しく効果的で、すべての主要ブラウザでサポートされています。
Kinstaでのリソース圧縮
WordPressでBrotli圧縮を利用するにはいくつかの設定が必要になりますが、KinstaではCloudflare統合によりデフォルトで有効化されているため設定不要です。
圧縮方式はブラウザの検証ツールで確認可能です。「ネットワーク」タブで「すべて」を選択したまま、アセットを選んでcontent-encodingヘッダーを検索します。以下のスクリーンショットでは、brと表示されており、これはBrotli圧縮が行われていることがわかります。
7. レンダリングをブロックするリソースを排除する
<script>にasync、およびdefer属性を追加することで、レンダリングをブロックするJavaScriptを排除することができます。これはFirst Contentful Paint（FCP）の改善に役立ちます。
async属性を持つスクリプト─読み込まれるとすぐに非同期で実行され、スクリプトが読み込まれるとブラウザが一時停止し、HTMLを解析してスクリプトを実行。defer属性を持つスクリプト─ページの解析が完了してから実行。
また、レンダリングをブロックするCSSを排除するには、above-the-foldリソースを優先する、CSSをインラインで追加する、media属性を追加する、JavaScriptを使用して非同期に読み込む、またはCSSの読み込みを遅らせるなど、さまざまな方法があります。
フロントエンド開発の経験がない方にとっては高度な作業になるかもしれませんが、WordPressプラグインを使って作業を簡素化することができます。
WordPress 6.3以降は、スクリプトの登録時にasyncとdefer属性を追加できるようになり、WordPress 6.4以降は、WordPressコアと標準テーマのフロンドエンドスクリプトにこれらの属性が実装されています。
8. CSSを最適化する
スタイルシートは、ウェブページを大幅に重たくしてしまう可能性があります。
ブラウザが<link>にヒットすると、他のリソースのダウンロードとページの解析を中断し、CSSファイルのダウンロードを解析を行うため、ページの表示速度に影響を与える可能性があります。また、以下のようなスタイルシートの特殊性にも注意が必要です。
- 同じページに複数の外部スタイルシートをリンクすることができる
- 他のスタイルシートへのリンクは別のスタイルシートから来るため、HTMLコードでは見えない場合がある
- 適切に設計されていないスタイルシートには、サイトの全ページで必要のない記述が含まれている可能性がある（ファイルサイズの増大と処理時間の延長につながる）
- スタイルシートはキャッシュされるが、それでもしばらくの間はレンダリングがブロックされてしまう
このような点から、スタイルシートを最適化し、ChromeのLighthouseやPagespeed Insightsなどのブラウザの開発ツールで徹底した分析を行う必要があります。
分析を行ったら、スタイルシートがパフォーマンスに与える影響を軽減するための対策を講じましょう。圧縮に加えて、ExpiresやETagヘッダーの設定によるファイルのキャッシュ、テーマやプラグインの適切な選択、不要なCSSコードの削除、ウェブフォントの最適化など、CSSのパフォーマンスを最適化する方法は多数あります。
開発者は、常に最初からCSSのベストプラクティスに従ってスタイルを設計することが重要です。
9. HTTPリクエスト数を削減する
画像、スクリプト、スタイルシートはすべて、サイトにとって必要不可欠と言えますが、動画、マルチメディアコンテンツ、ウェブフォントなど、必須ではないが特定の目的に重要になるリソースもあります。各リソースは、ホストされるウェブサーバーへのHTTPリクエストを生成し、各リクエストには処理および応答時間が発生します。これにより、ページ全体の表示速度が低下することがあります。
したがって、サーバーへのHTTPリクエスト数を最小限に抑えることも重要です。
パフォーマンス分析ツールを使用すれば、HTTPリクエスト数を把握することができます。ブラウザの開発ツールやPingdom、 GTMetrixなどはパフォーマンスに関する問題の改善に有用です。
HTTPリクエスト数をの削減するのに最も効果的なのは、ページから不要なリソースを削除です。
WordPressサイトの場合は、厳密には必要でないプラグインをすべて削除するか、少なくともサイト全体では必要のないプラグインを選択的に読み込む必要があります。プラグインは信頼性が高く軽量なものを厳選して使用し、違法配布（Null）プラグインの使用は避けてください。
また、ひとつのスタイルシートにすべてのCSSファイルをまとめるのも一つの方法です。
HTTPリクエスト数の削減にできるその他の対策としては、リソースの遅延読み込み、できる限りシステムフォントを使用する、YouTube動画などのサードパーティからのリクエストを最小限に抑える、 アイコンやロゴにCSSスプライトを使用するなどが挙げられます。
10. APMツールでパフォーマンスを監視する
ECサイトでパフォーマンス監視ツールを使用することも忘れてはなりません。アプリケーションパフォーマンス監視（APM）ツールは、ワーカープロセス、データベースクエリ、AJAX呼び出しなど、サイト上のあらゆるプロセスの実行時間を測定できます。
ページの読み込みが1秒遅れるごとに売上が減少するのはもちろん、パフォーマンスの低下はブランドイメージを損なう可能性もあります。
買い物客にとって、スムーズに動作しないサイトでクレジットカード情報を入力することほど不安なことはありません。このため、APMツールの活用はビジネス成功の鍵を握ります。
New Relic、LogRocket、Dynatraceなど、APMツールは多数存在します。評価の高い選択肢をチェックし、コストや機能面を考慮して、要件に適したものを利用してください。
KinstaならAPMツールがデフォルトで付帯
MyKinsta組み込みのAPMツールにより、Kinstaのお客様はNew Relicのようなサードパーティの有料監視サービスを契約せずに、WordPressサイトのPHPパフォーマンスのボトルネックを特定することができます。APMツールはすべてのプランに追加料金なしで付帯しています。
APMツールを利用するには、MyKinstaの「WordPressサイト」画面から監視を行いたいサイトを選択し、左メニューから「APM」を開きます。
「APMを有効化」をクリックして、監視する期間を選択します。APMツールはサーバーリソースを消費し、サイトのパフォーマンスに影響を与える可能性があるため、必要時のみ有効にすることをおすすめします。
有効化すると、サイトのプロセスの監視が開始され、4つのタブに分類されたあらゆるデータを取得することができます。
「トランザクション」タブには、PHP、MySQL、Redis、および外部プロセスの合計トランザクション時間、最も遅いトランザクションの一覧が表示されます。特定のエントリを選択すると、トランザクションの詳細を確認できます。
「WordPress」タブには、「最も遅いWordPressプラグイン」と「最も遅いWordPressフック」セクションがあります。特定のエントリをクリックすると、トランザクションの詳細が表示されます。
「データベース」タブでは、最も遅いデータベースクエリを確認することができます。Redisアドオンを利用している場合は、このタブに最も遅いRedisキャッシュ一覧も表示されます。
「外部」タブには、最も遅い外部リクエストが一覧表示されます。
各エントリをクリックすると、「スパンの詳細」と「スタックトレース」を確認することができ、すべてのリクエストを深く掘り下げることができます。
これらのデータは、パフォーマンスに関するあらゆる問題のトラブルシューティング、速度とパフォーマンス最適化に大きく貢献してくれます。
KinstaのAPMツールの詳細は、以下でもご覧いただけます。
- 手間要らずのWordPress向けパフォーマンス監視
- KinstaのAPMを使ってWooCommerceのパフォーマンスの問題を解決する方法
- KinstaのAPMツール（ドキュメント）
- パフォーマンスのトラブルシューティング（ドキュメント）
まとめ
ECサイトのパフォーマンスを改善するためのベストプラクティスをご紹介しました。主にWordPressを利用したWooCommerceストア向けの内容でしたが、利用するプラットフォーム問わず実践できるはずです。
優れたホスティングサービスの選択はあらゆる最適化につながりますが、WordPressプラグインやサードパーティのサービスを利用してできることもあります。
Kinstaではキャッシュシステム、画像最適化、リソース圧縮、パフォーマンス監視などの機能を提供し、WordPressサイトおよびWooCommerceストアのパフォーマンスの最大化を後押ししています。
関連して、WordPressサイト高速化のヒントを網羅した無料の電子書籍もご用意していますので、ぜひダウンロードしてみてください。以下のリソースも役に立つはずです。
コメントを残す