タグ別アーカイブ: EC-cube軽量化

EC-cubeを高速化

EC-cubeが重い!表示速度を早くする方法(2.4系)


EC-cubeが重い・・・

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

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

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

サーバーの見直し

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

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

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

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

データベースの見直し

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

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

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

MYSQLのデータベースを見直す【EC-cube 2.4系】

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

【EC-CUBE 2.4.4】高速化のチューニング (その3)MySQL

CSS Spritesを使う

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

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

JAVAスクリプトの記述位置を変える

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

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

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

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

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

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