EC-cube軽量化 | WebデザイナーhiroのWeb集客のためのアレコレ

EC-cubeが重い・・・

お客様から売上をあげてくれとEC-cubeサイトのコンサルティングを任されてました。
売上を上げるにはどうしたら良いか・・・このサイトの場合はじめに気になったのはサイトの表示速度です。

お昼のアクセスの少ない時間はスムーズ（8秒前後）に表示されるが、夜中のアクセスが集中する時間は表示に10秒以上の時間がかかってしまいます。

表示に時間が掛かればかかるほど、ユーザーはストレスを感じ他のサイトに移ってしまいます。
そこで徹底的にEC-cubeサイトの表示速度の改善を試みました。

EC-cubeサイトのＴＯＰページを分析してみた結果、サーバーの処理時間が長いことがわかりました。
まぁページ分析をする前から分かっていたのですが、このクライアントはロリポップという格安のレンタルサーバーを使っています。

安いレンタルサーバーは他の人と共有でサーバーやデータベースを使っているので、処理に時間が掛かってしまいます。

ですので、性能の良いレンタルサーバーに引っ越すことが１番てっとり早い速度アップです。

EC-cubeと相性の良いレンタルサーバーは、
EC-cubeにオススメのレンタルサーバー
で紹介してますのでこちらの記事をご覧ください。

EC-cubeは「PostgreSQL」か「MYSQL」のどちらかのデータベースを使って動かすことができます。しかし、EC-cubeはもともとPostgreSQLで作るように開発されているので、PostgreSQLを使う方が相性が良いのです。というか、MYSQLの相性が悪い・・・。

データベースの詳しい説明も、
EC-cubeにオススメのレンタルサーバー
で紹介してますのでこちらの記事をご覧ください。

とここまで、今まで紹介してきたものでココからが本番です。
高性能のサーバーに引っ越しできれば良いですが、お客様の都合もあり現状のレンタルサーバーで表示速度の高速化をするしかありません。その方法をご説明します。

PostgreSQLが使えない場合はMYSQLのデータベースの設計を見直します。
私も下記のサイトを参考に施工をしたのでそちらを参考にしてください。

これはEC-cubeに限らず全てのウェブサイトで使える技です。
アイコンなどの複数の画像を一つの画像で読み込みＣＳＳのbackground-positionで任意の画像を背景イメージとして表示させる方法です。

画像の読み込み回数が減り、うまく画像を配置すれば容量も少なくすることができ表示速度を高速化することができます。

例えば、ＪＡＶＡスクリプトを読み込むのに3秒かかるとします。初期状態のEC-cubeではＪＡＶＡスクリプトはhead内記述されているので、ＪＡＶＡスクリプトが読み込まれる3秒間はページが表示されないことになります。
この３秒間はユーザーにとってストレスになります。

これをbodyタグの閉じる直前に書けば、表示が全て終わった後にＪＡＶＡスクリプトが読み込まれるのでユーザーはストレスなくサイトを閲覧できるということです。

どちらに記述してもページを読み込む最終時間は変わりませんが、記述位置を変えることでユーザーの表示体感時間は早くなります。

ちなみに、EC-cubeでは下記にＪＡＶＡスクリプトが記述されています。

data/Smarty/templates/default/site_frame.tpl
これのJAVAスクリプトの記述を、blog閉じタグの直前が記述されている
***/user_data/packages/default/footer.tpl
に貼り付ければＯＫです。

ＪＡＶＡスクリプトは位置や掲載の順番が変わると正しく処理されない場合があります。バックアップはしっかりとっておきましょう。