【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【HTML/CSS/JavaScript】リソースを圧縮して速度改善。概要と便利なツールの使用手順

【HTML/CSS/JavaScript】リソースを圧縮して速度改善。概要と便利なツールの使用手順

Google PageSpeed Insightsより
リソースを圧縮して表示速度を改善する方法

今回は、PageSpeed Insightsの速度に関するルールから、「リソースの圧縮をする」をテーマに取り上げます。

「リソースを圧縮する」に関しての内容
  • ソースの中の不要な部分を除いてコードを圧縮
  • 圧縮することでページスピードが上がる
  • CSS、JavaScriptは変数名を変更することで更にファイルサイズを削減できる

リソース(HTML、CSS、JavaScript)を圧縮する – PageSpeed Insights — Google Developers

至極単純です。とにかく無駄な部分を省き、速度改善を目指します。

推奨される解決方法

リソースの圧縮に関して、下記で紹介されているツールを使用することが推奨されています。

    • HTMLの圧縮
      PageSpeed Insights の Chrome 拡張機能を使って、HTMLコードの最適化されたバージョンを生成できます。
    • CSSの圧縮
      YUI Compressorとcss.min.jsを使用できます。
    • JavaScriptの圧縮
      Closure Compiler、JSMin、YUI Compressorを使用できます。

それでは各ファイルについて、圧縮するツールの使用手順を記載していきます。
参考となるサイトURLも記載しておりますので、併せてご参照下さい。
いずれも非常にわかりやすくまとめられております。

 

【HTML】PageSpeed InsightsのChrome拡張機能の使い方

まずChromeで拡張機能をインストールします。
下記のダウンロードページからインストール可能です。

PageSpeed Insights for Google Chrome

手順
  • 調べたいWEBページをChromeで開く
  • 右上にある「≡」マークをクリック→[その他ツール]→[デベロッパーツール]
  • ブラウザの下方にデベロッパーツールが開くので、その上部の「PageSpeed」をクリックし、続けて「分析を開始」ボタンをクリック
  • 「提案の概要」が表示されるので、各修正箇所に対する提案に従い、改善

Web Labs / PageSpeed InsightsのChrome拡張機能の使い方について

 

【CSS・JavaScript】Online JavaScript/CSS Compressorの使い方

CSS、JavaScriptのフォルダをペーストするだけで自動で圧縮してくれるツールです。
ここではOnline JavaScript/CSS Compressorの使い方を記載します。

Refresh-SF – Online JavaScript and CSS Compressor

手順
  • Refresh-SF – Online JavaScript and CSS Compressorにアクセス
  • 「Input」の部分にCSS or JavaScriptのファイルをペースト
  • 圧縮する対象のファイルに応じて右上のJavaScript/CSSをクリック
  • 圧縮コードが生成される

JavaScript_CSS_Compressor【Before】
JavaScript_CSS_Compressor2【After】

※圧縮すると後から編集しにくくなるので、バックアップはお忘れなく。

 

【JavaScript】Closure Compilerの使い方

通常のコード圧縮に加えて、2つのJavaScriptを1つのJavaScriptにまとめることも
できる優れものです。ここでは後者の手順を紹介します。

※Javaがインストールされていない場合、別途インストールが必要です。

2つのJavaScriptファイルの連結の手順
  • 次の引数で実行します。
    java -jar compiler.jar --js=in1.js --js=in2.js ... --js_output_file=out.js
    

    –js= で入力ファイルを指定し、 –js_output_file= に出力ファイルを記入

  • 2つのJavaScriptファイルが1つにまとめられ、out.jsとして出力されます。

強火で進め / ■[JavaScript]Closure Compilerの使い方

 

まとめ

リソースの圧縮は、ツールを使用することで手軽に行うことができる、ページ速度改善の手法の一つです。
速度改善をコツコツと積み重ねていきましょう。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+