に投稿 コメントを残す

Woocommerceの高速化のための4つのポイントとプラグイン6選

俳優の阿部寛さんの公式サイトをご存知でしょうか?
巷では「雰囲気が一世代前だけど表示速度が爆速で笑ってしまう」と評判となったサイトです。
阿部 寛のホームページ】http://abehiroshi.la.coocan.jp/

WEBサイトの表示速度は時に内容やコンテンツ以上に重要な役割を持ちます
今回は、Woocommerceを高速化するための4つのポイントと、6個のプラグインを紹介したいと思います。

既に高速化のプラグインを導入しているがサイトの表示が重い・遅い方は、サーバー会社を変えるか一つ上のサーバープランに変更することをお勧めしております

お勧め高速サーバー

【wpxサーバー】https://www.wpx.ne.jp/server/

【Conohawing】https://www.conoha.jp/wing/

それでも改善しない方には、当サイトでご案内しているWordpress爆速化サービスの「爆速研究所」のご利用もお勧めです。
「爆速研究所」では、現在の運用されているサイトの内容そのままに、スピードだけ爆速に改善する環境構築サービスです。
Woocommerceで作られたECサイトなどデータや動的コンテンツが多いサイトでも、サーバー側にキャッシュを自動で生成しておくことで爆速化が実現できます。

現在は、ご指定のサイト※を爆速環境で構築して30日間体験できる「爆速体験」が無料ですので、こちらのフォームからお問合せをしてみてください。
※原則ご自分で管理・運用されているWordpressのサイトに限ります

1.表示速度が遅いとどのような影響があるのか

Googleが発表した有名な表示速度と直帰率の調査によると、

    • 表示速度が1秒から3秒に落ちると、直帰率は32%上昇
    • 表示速度が1秒から5秒に落ちると、直帰率は90%上昇
    • 表示速度が1秒から6秒に落ちると、直帰率は106%上昇
    • 表示速度が1秒から7秒に落ちると、直帰率は113%上昇
    • 表示速度が1秒から10秒に落ちると、直帰率は123%上昇
    • ページの要素(テキストやタイトル、画像など)の数が400個から600個に増えると、コンバージョン率は95%下がる

という結果が出ています。
この情報以外にも、表示に3秒以上かかるサイトは53%のユーザーがページを離れる調査結果には書かれてかれています。

どれだけ良いブログ記事や良い商品を掲載していても、表示が遅いとそれだけで訪問者は離れていってしまいます。
スマートフォンがこれだけ普及した世の中で、手軽に情報を得るための表示スピードはとても重要な要素なのです

また、サイトの表示速度は検索のSEOにも影響があります
グーグルが「ページの表示速度をモバイル検索のランキング要素として組み込むこと」をアナウンスした記事です。

表示を速くすればSEOも上がり、ユーザーも嬉しい。良いことづくめですね。

2.Woocommerceの高速化するための4つのポイント

本当はもっと多いのですが、シンプルに4つのポイントとそれを解決するためのプラグインを紹介します。
まずは、4つのポイントです。

  1. 画像を圧縮する
  2. 画像を遅延読込させる
  3. CSS/JavaScriptを最適化させる
  4. データベースの最適化させる

もし対策を全くしていないのであれば、これらのプラグインを入れることで確実に表示は速くなります

それぞれの説明とお勧めのプラグインを紹介していきます。

1.画像を圧縮する

サイト上で表示される画像のサイズは、表示速度に大きな影響を与えます。
そこまで大きなサイズの画像はWEBサイト上では必要ありませんので、画像圧縮プラグインで圧縮を行いましょう。
(商品詳細画面などで画像を拡大する場合は低画質だと、質感などが伝わりにくくなる可能性があります)

日本では、以下の2つが画像圧縮で有名プラグインになります。

EWWW Image Optimizer利用者の多い画像圧縮プラグイン:プラグインがインストールされているサーバー上で圧縮が行われる(サイトに負荷がかかる)

Compress JPEG & PNG images

1ヵ月500ファイルまでの制限あり(それ以上は有料):開発元のサーバーで圧縮が行われる(サイトに負荷がかからない)

特徴を見ていただけたら分かるように、処理ファイル数と負荷のメリットデメリットがあります。
どちらの圧縮率もそこまで変わりませんので、場合によって使い分けるのが良いかと思います。

2.画像を遅延読込させる

画像は読み込みに時間がかかりますので、画面上の可視領域についてのみ画像を読み込み、
下部にスクロールするたびに画像を動的に読みこんでいく形にすることで、画面の表示速度を速くすることができます。

Lazy Load

当方でもLazy Loadを利用中。問題なく稼働

BJ Lazy Load

有効インストール数・★5評価多い

どちらも大きく違いはないかと思います。
③のLazy Loadを使っていますが、他のサイトでは④のBJ Lazy Loadをご利用している方も多いようです。
導入後の動きなどを見てご判断いただければと思います。

3.CSS/JavaScriptを最適化する

WordPressのHTMLソースコードやCSS、JSファイルを最適化することにより表示速度を速くすることができます。
ただ、中々各ファイルの最適化というのは知識がないと難しいものです。以下のプラグインは有効化することにより最適化を自動で行ってくれます。

Autoptimize

日本語化がされている。別ファイルで作成されるので、無効化すれば元通りになる。

Head Cleanerという有名なプラグインもあるのですが、作られるキャッシュファイルがサーバーの容量を圧迫するという報告がされております。
Autoptimizeをお勧めします。

4.データベースの最適化させる

WordPressの記事や投稿にはリビジョンという機能があります。過去に編集した記事の状態がリビジョンとして保存されており、選択することでその状態に戻すことができます。
しかしリビジョンは、蓄積し続けるとWordPressの動作を遅延させる要因にもなり得ます。
データベースの最適化のプラグインを使い、不要なリビジョンを削除することで画面の表示速度を速くすることができます。

Optimize Database after Deleting Revisions

指定した日付よりも前のリビジョン情報を消すことができる

自動最適化のスケジュールも設定できるので、適切な設定を行い不要なデータを消していきましょう。

3.キャッシュプラグインは入れるべきか?

キャッシュとは、サイトのページの表示の際に生成したページデータを保存し再利用する仕組みです
Woocommerceの場合、ブログやコーポレートサイトとは違い、ユーザーによって動的にコンテンツの内容が変わります。
一部の画像キャッシュは有効かもしれませんが、キャッシュプラグインを入れることによって情報の不整合が発生する可能性が高いです
キャッシュプラグインはデータベースやPHPの処理を省略でき、効果は高いのでWordpressの静的サイトであれば大いに入れていただいたほうがいいかと思います。

4.まとめ

以上、4つのポイントと6個のプラグインになります。

何も対策をしていないのであれば、これらのプラグインを入れるだけでも速度の効果は実感できると思います。
ただし、サイトやサーバーとの相性は確実にあるので注意が必要です。

導入後はしっかりとサイトを確認し、快適になった表示速度を感じてニヤニヤしましょう。

また、上記でも述べた通りWoocommerceなどのECサイトなどでは、効果が出やすいキャッシュ系のプラグインの利用はお勧めできません。
場合によっては、カートへの数量や商品の価格などの整合性が取れないことがあります。

Woocommerce(Wordpress)で構築したサイトが「遅い」「重い」、または「遅くはないがもっと早くしたい」というご要望は、
サイトを爆速にする環境構築サービス「爆速研究所」で解決できます。
今なら、指定のサイトを爆速環境で構築して30日間体験できる「爆速体験」が無料ですので、速度の問題が解決できない場合は一度試しに依頼してみましょう。

 

に投稿 コメントを残す

【Woocommerce開発秘話】Woocommerce開発秘話。その前に…。【第1話】

はじめまして。横山と申します。あなたはどなたでしょうか?
約12年、エンジニアをやっております。

今日から「Woocommerce開発物語」と題してブログを発信していきたいと思います。

私が所属している会社では、現在もWordpressにEC機能を追加できる「Woocommerce」のカスタマイズ開発を行っておりますが、今までにも大変な苦労がありました。

忘備録ではないですが、こんなことあったな。苦労したな。でもできたな。よかったな。やっぱりすごいな。
ってことを、記録として残していきたいと思います。

最初なので固い口調で書いておりますが、
基本的に不真面目ですので面白おかしく書いていければと思っております。

この記録が誰かの役に立つことを祈って。

に投稿 コメントを残す

WooCommerceとshopifyの徹底比較まとめ

WooCommerceとshopifyを比較してみた

項目 shopify basic shopfiy standard とことん月額を下げるプラン
初期費用 無料 無料 無料
月額利用料 $29 米ドル $79 米ドル Conoha vps 4G Plan ¥3,240円
ブログ
プラグイン、アプリによる機能拡張
複雑なカスタマイズ ★一部不可 ★一部不可
商品登録数の上限 無制限 無制限 無制限
SKU登録数の上限 100(※1) 100(※1) 無制限
スタッフアカウント数 2 5 無制限
24時間体制のサポート コミュニティ,Twitter,メール コミュニティ,Twitter,メール ★就業時間中の電話、メール
手動注文作成
サーバー
スケールアップ/ダウン
サーバー仕様不明 サーバー仕様不明
決済手数料(※2) クレジットカード shopifyペイメント
3.4%
shopifyペイメント
3.3%
PAY.JP
2.59%
(月額1万円/無料なら3%)
その他の決済 2%
shopifyペイメント利用時は取引手数料無料
1%
shopifyペイメント利用時は取引手数料無料
無料