に投稿 コメントを残す

【速いは正義】根本的にサイトの表示速度を改善する方法

サーバーの性能やプラグインにたよらず、根本的なサイトの表示速度を改善してみませんか?

一般的に作成したサイトの表示速度が遅い場合、

  • 画像のキャッシュ化
  • 不要なデータやプラグインの削除
  • サーバースペックのアップなどの処置

等を行うと思いますが、それでも改善されない場合、根本的なシステム構成の変更と設定の調整(チューニング)を行うことで改善できる可能性があります。

サイト速度が遅いと、ユーザーは直帰する

なかなかページを読み込まないサイトだったので見るのを諦めた経験はありませんか?
いくら優れたサイトでも、表示速度が遅ければユーザー直帰率は高くなります。

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

引用元:表示速度が1秒→7秒で直帰率は113%↑、モバイル向けサイトのUXはとにかくスピードが命 | 海外SEO情報ブログ

実際Googleが直帰率とコンバージョン率の関係についてディープラーニングを用いて予測しました。
このディープラーニングのシステムによる予測は、90%の正確性を誇るそうです。

結果が示す通り、サイトの表示速度は何よりも優先することの1つなのです。

表示速度が遅くなる原因

1.データが重い
表示させるページの情報が多かったり、取得する元のデータが多い(ECで言うなら顧客数や商品数が多い)と表示速度は遅くなります。とりわけ画像データが大きかったり多いと表示速度への影響が大きいです。

2.機能が重い
サイトには色々な機能が備わっています。例えばプラグインなどを使って問い合わせフォームの機能を付けたり、チャット機能を付けたりすることができます。当初は遅くなかったサイトが機能を追加するにつれて遅くなっていった場合、追加した機能(プラグイン)が重くしている可能性があります。

3.サーバーが重い
サイトを表示させるにはサーバーが必要ですが、そのサーバーの性能が不足している場合があります。サーバーにも用途によりDBサーバー・WEBサーバー・画像サーバーなど種類がありますが、どこかで性能が不足している場合サイトが重くなる可能性があります。

一般的な表示速度の改善方法

速度改善の方法をインターネットで検索すると

・表示させるデータを減らす
・表示のタイミングをズラす
・画像のキャッシュを行う(キャッシュプラグインを導入する)
・不要なプラグインを削除する
・サーバーのスペックを上げる

などの解決策がヒットしますが、実際にこれ以上削れないところまでデータを削り、画像キャッシュを行い、プラグインも外すと、後はサーバーのスペックで解決するしかなくなります。しかしこの方法ですと、問題になるたびに費用が高額になってしまいます。
また、既にハイスペックのサーバーを導入している状態で広告がヒットしたりTVでの紹介などがあると、表示事態に耐えられなくなる可能性があります。

速度を早くするプラグインも一定の効果はありますが、システムやサーバーが重い状態でその上で動いているプラグインを導入しても根本的な解決にはなりません。

システム屋が考えた根本的解決方法

今回、自社で一般的な手順でサイトを作成し、表示速度の問題をとことん分析し改善してみました。

結果として各種サーバーに導入されているシステム自体が重いことがわかり、システムの置き換えや設定を調整することで高速化ができました。
しかし、一般の方はそのシステムを構築したりサーバー設定の調整を行うことができません。

そこで、ワンクリックでAWSのサービスを組み合わせて環境を作り最適な設定に調整する仕組みを作りました。
これを使えば最短20分でWordpressの爆速環境を作ることができます。

以下のページがこの環境で作成したサイトになります。TOPページに画像を多く使い、商品をXXX万件登録したサイトです。

サンプルページ

ワンタッチで導入できる爆速環境

こちらのサンプルページをご確認いただき、興味があれば以下のサイトより導入をご検討ください。
ご不明な点がありましたら、問い合わせも受け付けております。

思ったら即行動です。速いは正義ですよ。

に投稿 コメントを残す

Woocommerceのプラグインを作ってみた

今回作るのは商品一覧の初期ソートを設定するプラグインです。通販サイトで商品一覧を見る時、大抵最初はおすすめ順とかになっていますが、あれって何を基準に並べてあるのか良く分かりません。店が売りたい順なのかなと疑いながら安い順などに並べ替えることになります。

Woocommerceでも初期ソートはデフォルト表示になっています。これは、商品登録をする際に高度な設定で表示順番を登録することができ、それを反映した並び順なのですが、お客さんにはなんのことやらさっぱりです。安い順や人気順、あるいは平均評価順など、お客さんにとって意味が分かりやすい順で並べたほうが使い勝手の良いサイトになるでしょう。

実のところ、この初期ソート自体は、追加のプラグインを入れなくても変更できます。外観のカスタマイズからWoocommerce > 商品カタログで、デフォルトの商品順を設定できます。そこで今回作るプラグインでは、商品詳細ページ、カートページ、マイアカウントページ、支払いページ、そしてその他のページそれぞれから飛んできた時の表示順を設定できるようにします。

まずは開発環境を整えます。XAMPPを使います。そこへWordPressを入れてWoocommerceを入れる訳ですが、先にWoocommerceがどのWordPressのバージョンまで対応しているか確認します。うかつに最新版のWordPressに飛びつくとやり直すはめになります(経験済み)。それから、php.iniを開いてmax_execution_timeに-1を設定しておきます。最初は30になっているので時間が足りずWoocommerceがインストールできない可能性があります(経験済み)。

環境が整ったらいよいよ作成です。プラグインと言っても基本はただのPHPです。先頭に規定のコメントを書くとプラグインとして認識されます。

バックエンドの作成にはadmin_menuのアクションフックを使いadd_menu_page()で呼び出す関数でページを表示させます。今回のプラグインでは、商品一覧へ辿り着くリファラ毎に、表示順のセレクトボックスが並ぶ画面にします。表示順のセレクトボックスはどこで設定されているのでしょうか?

見つけました。woocommerce/includes/wc-template-functions.phpのwoocommerce_catalog_ordering()で設定されています。それをそのまま持ってきます。submitボタンを付け、update_option()で設定の更新、get_option()で設定を取得できるようにして、描写の際に反映させればバックエンドの基本の動きは完成です。

リファラの情報も取得する必要があります。商品詳細以外はwp_postsテーブルにあります。そこへデフォルトと商品詳細の情報を合わせ、その数だけセレクトボックスを出します。デザインも整えたいところですが、後回しです。

次は設定をフロントエンドへ反映させる処理です。商品一覧を表示させるタイミングで、セレクトボックスのselectedを変更できれば良いはずなのですが……。

商品一覧で表示順のセレクトボックスを出すテンプレートがwoocommerce/templates/loop/orderby.phpであることは分かりました。そしてそこへ値を渡しているのは前述のwoocommerce_catalog_ordering()です。

woocommerce_catalog_ordering()が値を渡した後、セレクトボックスが描写される前に割り込めれば良いのですが、値を渡す時点で描写も完了してしまうようです。試しに値を渡すために使われてるwc_get_template()を使うとセレクトボックスが二つ出来ます。この動きは求めていない。

ではwoocommerce_catalog_ordering()が受け取る値を変えるしかありません。引数はないので、内部で取得している値、すなわちwoocommerce_default_catalog_orderbyです。

これは、前述の外観のカスタマイズからの設定を収めている場所です。これをwoocommerce_catalog_ordering()が呼び出される毎に、先んじて変えてやれば、こちらの設定を優先させることができます。

woocommerce_catalog_ordering()はwoocommerce_before_shop_loopのフックで呼び出されていますが、優先順位は低いです。そこで同じフックにこちらのフロントエンド用関数を登録します。そして設定した値を取得し、その中からリファラに合わせた値を選び、それをwoocommerce_default_catalog_orderbyへ上書きします。

さてどうだ……上手く行きました。裏では呼び出す度にDBへ書き込みが行われている訳ですが、表向きは意図どおりの動きです。この仕様はDBのパフォーマンスにはよろしくないかもしれません。しかし、まずはそのパフォーマンスが気になるほどお客さんを集めるほうが先決でしょうね。

に投稿 コメントを残す

WooCommerseと7人のEC事業者

この世のどこかにはEC問題を7つを集めると、伝説のカートシステムが現れ願いを叶えてくれるという。

そしてここにも悩めるEC事業者が一人…。

「はぁ。売上に関係なく費用がかからないカートがないかなぁ」
【ポイント①】WooCommerseは販売手数料は一切かかりません。最低限の費用のみで運用が可能となります。
 
 
さらにここにも悩めるEC事業者が一人…。
 
「はぁ。アイディアはあるのになぁ。自由にカスタマイズできるカートないかなぁ」
【ポイント②】 WooCommerseはオープンソースのWordPressプラグインです。自由にカスタマイズが可能です。
 
 
さらにさらに都合上、悩めるEC事業者がもうあと五人…。
 
「はぁ。新しい決済サービスやポイント・クーポンとかにも素早く対応できるカートないかなぁ」
【ポイント③】WooCommerseは新しい決済サービスにも随時対応可能です。ポイントやクーポン機能もついてます。
 
 
「はぁ。専門店化をすすめたいんだけど、そんなことができるカートがないかなぁ」
【ポイント④】WooCommerseは専門店化のための複数店舗も低コストで量産が可能となります。
 
 
「はぁ。安くもの売りたいんだよなぁ。そんなことができるカートがないかなぁ」
【ポイント⑤】WooCommerseは固定費を徹底的に安くできるので、商品価格に反映できます。
 

「はぁ。WordPressしか触れないよ…。これにカート機能ついたりしないかなぁ」
【ポイント⑥】WooCommerseはWordPressがベースなので、ブログやSEOの相乗効果だけでなくよりユーザーとの接点を持てるプラットフォームが完成します。
 
 
「はぁ。デザインや機能をバンバン変えていきたいんだけど。そんなカートがないかなぁ」
【ポイント⑦】WooCommerseは英語圏利用率No1の実績。世界中で商材に合ったオシャレなテーマや、誰が使うのかと思うほどのニッチな機能のプラグインなどがザクザクあります。
 
 
 
一同:「はぁ。そんなカートシステムないかなぁ」(×7)
 
そんな7人の悩める事業者が、奇跡的にばったりと出会った。大阪で。
 
 
 

ゴロゴロゴロゴロ・・・・ドカーン!

 
 
 
 
 
 
Woocommerceさん:呼んだ?
 
 
 
一同:きたぁぁぁぁぁあ

~完~