navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。昨今のWebサイトではUX(ユーザーエクスペリエンス)や離脱率低減やのためにページ表示速度が重要視されています。サイト表示速度が遅いと顧客満足度は大幅に低下し、離脱してコンバージョンの機会が失われてしまいます。よってサイトの表示速度のいかに速くするか対策することは、デザインやコンテンツの充実化に優先して取り組まなければならないと言っても過言ではありません。画像圧縮からはじめようサイト表示速度を速くするための方法はいくつかありますが効果がでやすく方法も簡単な画像容量を小さくする「画像の圧縮」から始めるのがオススメです。1ページあたりの画像数が多かったり、1つ1つの画像サイズ(KB)が大きいとサーバーからの転送量が大きくなりブラウザでの読込時間が長くなります。画像圧縮により、ファイル容量を小さくするによって表示速度を速くすることができます。現在のパフォーマンスを把握する1【デベロッパーツールを活用】まずは自社のサイト表示速度がどの程度なのか知ることが重要です。画像の圧縮前・圧縮後のパフォーマンスをそれぞれ計測することでどれほど改善したかがわかります。サイト表示速度(読込時間)を把握するには、ブラウザのデベロッパー(開発者)ツールを利用するとよいでしょう。ChromeのデベロッパーツールではNetworkタブでコンテンツ(サーバー応答速度[TTFB]やHTML/CSS/Javascriptソース、画像)の読込時間を計測することができます。I」Windows「F12」デベロッパーツールを開いたら、Networkタブを開きスーパーリロード(ブラウザキャッシュを無視して、Web最新のデータを読み込む)して計測を開始します。スーパーリロードは次のショートカットキーで行います。読込が終わったら、各コンテンツの読込時間・容量を把握しましょう読込を完了したら各ファイル毎のSize(容量(KB))、Time(読込時間(s))を把握しましょう。これで容量が大きく、読込に時間がかかってる画像が分かります。現在のパフォーマンスを把握する2【PageSpeedInsightsを活用】Googleが提供するPageSpeedDinsightsでサイトを分析することで利用することでページ読込時間を短くするための方法を知ることができます。モバイル・PCそれぞれのデバイスでのパフォーマンスを100点満点のスコアで診断します。分析によってデバイスごとにスコアとスコア改善のための方法がわかります。「画像を最適化する」の提案では圧縮可能な画像ファイルをリストアップし、ファイル毎の圧縮可能容量が分かります。画像圧縮ツールを使って画像を圧縮するいよいよ本題です。現状のサイトパフォーマンスを把握して圧縮すべき画像が分かったら、ツールを使って画像圧縮を行います。画像の圧縮ツールには主にインストール型(ネットからダウンロードしてPC上で使用)とWebサービス型(オンライン上で使用)があります。BatchGOO!NEXTPCにインストールして利用します。フォルダ単位で一括で画像圧縮・リサイズすることができます。10/8/7)BatchGOO!NEXTをダウンロード縮小専用AIRWindows、MacOSに対応。複数の画像ファイルをドラッグ&ドロップして一括圧縮・リサイズ可能(フォルダ単位での圧縮は不可)。縮小専用AIRのダウンロードcompressor.io画像の圧縮率と画像品質のバランスのよいオンラインの画像圧縮ツールです。一度に圧縮できる画像数は1枚のみです。Lossy(ロス圧縮)とLossless(ロスレス圧縮)から圧縮形式を選べますが、容量削減の効果の大きいLossy圧縮がおすすめです。compressor.ioを使ってみる終わりにPageSpeedInsightsは、画像の最適化(画像の圧縮)以外にも、下記のようなパフォーマンス改善のためにサイト制作側で実施できる様々な方法を提案してくれます。縮小する今回は、画像圧縮の方法のみご紹介しましたが、他の改善方法も是非試していきましょう。PageSpeedInsightsサイト内でも各方法を詳しく解説しているのでそちらもご覧ください。”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。業務ソフトウェア会社にて営業職を担当。ソフトウェアを深く理解したい、サービス開発に自ら携わりたいという思いから開発職に転身。お客様の目線、ニーズをふまえた理想のサービスを提供できるよう日々、開発に取り組んでいます。2018.06.18みなさまはじめまして。6月よりセールス部に配属されました、新入社員の泉(いずみ)と申します。初投稿ですがよろしくお願い致します。miniが支給されました。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。