サイト速度を改善する軽量化・最適化のグラフィック制作

グラフィック作成時から、画像の軽量化・最適化を意識したグラフィックを作る

このサイトのようなWordpressベースの場合、できるだけ稼働プラグイン数を抑えた方が軽く動きます。
そのため、画像やcss, jsファイルを最適化するのはプラグインに任せるより、最初から最適化済のファイルをアップします。

サイト速度を改善する軽量化・最適化のグラフィック制作

前回グラフィックの質向上のために背景にこだわるテクに話が及びましたが、

今回もその続きで、グラフィック制作当初から画像の軽量化・最適化を意識したグラフィックを作る話も加えます。

グラフィックの質を向上させる「背景」に作業比重をおくという考え方

こちらは単なる背景です。ざっと見わかりませんが、かなり手を加えて作っています。

どんな手を加えてここまでできているのかは、このレイヤープロセスでざっとですがわかります。

ここまで背景に手を入れると、前面にどんなコンテンツを入れ込んでも遜色ないグラフィックができます。例えば

(画像はぼかして掲載しています)

上は各商品とその下のテキストにコーディングでリンクを入れています。

このグラフィック作成する時から軽量化・最適化を意識する意味

膨大な商品のECサイトを構築する時に画像の量も容量が多くなりじわじわと速度に影響してきます。

サイト全体の速度改善は作成時から意識し、軽量化を行ってからアップロードします。

グラフィック作成 → ページごとに軽量化する → まとめてアップロードする → コンテンツを作る
ような手順で行っています。ページごとでなくてもカテゴリーごととかでもいいわけです。

ただアップしてから修正もあったり実際します。

どうしてこの時点で手間をかけて軽量化するかというと、一度アップしてからの軽量化は確認作業も含めると

二度手間になってしまうからです。

パフォーマンス改善のための診断ツールを用いる

ここまでの間に、サイト速度を改善する画像の軽量化を実施し、上の画像はすべて、

わずか60KB程度の容量です。前面にコンテンツを入れ込み

各リンクをコーディングしても軽量化を実現したグラフィックとなりました。

こういうサイトの軽量化・最適化には、Google PageSpeed Insights 等という診断ツールを使い

パフォーマンス改善の検証テストを随時行いながら、つまり

設計・制作過程のいずれかにスケジュール化して進捗を勧めていきます。

制作アップロード時のみならず、パフォーマンスの継続的監視のためにも、

パーフォーマンスモニタリングサービスなどを駆使してフロントエンドが潤滑に回すのが、

フロントエンドエンジニアの仕事です。

最終的な最適化がすむとこうなりました。

その他の施策もあわえ、サイト速度を半分までに劇的に改善する事ができたメンズアパレルECの事例でした。

ピックアップ記事

  1. ・ Wixの有料プランはコンボプランを契約しました ・ コンボプランの管理メニューはこ…
  2. これが実際のWixテンプレートです。キャプチャー撮っておきましたWixのテンプレートって、本当…
  3. ・ どうしてホームページ作成用のプラットフォームを使うのか ・ Wix,Jimdo,G…
PAGE TOP