紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

Javascriptを圧縮する方法【はてなブログOK】

f:id:slash1196:20210713203704j:plain

f:id:slash1196:20200520205950j:plain

サイトの表示速度改善をしたい人

Javascriptって圧縮とかってできるの?よくわからないから圧縮して動かなくなるのが怖いなあ。
でもできるなら教えてほしいな。

 

こんなお悩みにお答えします。

 

  この記事でわかること

  • Javascriptの圧縮をあきらめるのはもったいない
  • Javascriptの圧縮前に知っておきたい注意事項
  • Javascriptの圧縮方法
  • Javascript圧縮ツールは?
  • javascriptを圧縮した後にすること

 

こんにちわ、紅蓮です。

 

サイトの高速化の記事を読んでいると、「javascriptを圧縮する」というのが見られますよね。

 

知識がないからとあきらめてはいませんか?

 

今回はjavascriptを圧縮する方法についてです。

 

この記事を読むとブログで自分がカスタマイズのために加えたjavascriptのコードを圧縮する方法に加え、その際の注意事項やおすすめのツールや圧縮後に何をするかまでばっちりわかっちゃいます。

 

この記事を書く僕はブログ歴は3年目。今ではアフィリエイトからの収益が、月に3000円くらい入ってきます。

 

そんな僕もjavascriptを圧縮にはあきらめを感じていました。

理由は簡単で、知識がなかったから。

 

でもひょんな思い付きから「こうしたらいけんじゃね?」ってやってみて、「圧縮は簡単なんだ」ということがわかりました。

 

そんな僕がJavascriptを圧縮する方法について、知っているすべてをお話しします。

どうぞ最後までお読みくださいね。

 

では行ってみましょう。

Here We Go!!

 

 

Javascriptの圧縮をあきらめるのはもったいない!!

f:id:slash1196:20210713203943j:plain

Javascriptの圧縮って書いてあって、多いのは「知識がないのであきらめた」っていう文章をよく耳にします。

 

でもここであえて言っておきます。

超もったいない!!

 

というのも、Javascriptって結構コメントが多くて、改行部分も多いからです。

 

そのコメントや改行部分を減らせばデータ量も少なくて済むし、読み込み量も少なくなるから表示速度も速くなります。

 

読者にとってもSEO的にもいいから、いいこと尽くしです。

 

なのに「知識がないから」ってあきらめると、読み込み速度が遅いままだし、サイトのブラッシュアップにもなりません。

 

読者も離脱していく一方だし、順位も上がらなくなってしまいます。

 

非常にもったいないですよね。

 

Javascriptの圧縮前に知っておきたい注意事項

f:id:slash1196:20210503202125j:plain

ここではJavascriptの圧縮前に知っておきたい注意事項をお話ししていきましょう。

 

注意事項は以下の通り。

 

  • 注意事項①元のJavaScriptのコードをメモ帳などに張り付けてバックアップメモリを作っておくこと
  • 注意事項②ツールを過信しないこと
  • 注意事項③根気強くやること

 

では詳しく見ていきましょう。

 

注意事項①元のJavaScriptのコードをメモ帳などに張り付けてバックアップメモリを作っておくこと

Javascriptの圧縮前に知っておきたい注意事項の1つ目は、元のJavascriptのコードをメモ帳などに張り付けてバックアップを取っておくことです。

 

というのもJavascriptの圧縮をすると、往々にして動かないということが起こるんです。

 

その時にあなたに出される選択しは、以下の2つ。

 

  • 選択肢①元のコードに戻して、動く状態にする
  • 選択肢②元のコードと見比べて、あきらめずに根気強くやる

 

どっちにしても元のコードが必要になるために、必ず元のコードのバックアップは取っておくことにしましょう。

 

注意事項②ツールを過信しないこと

Javascriptの圧縮前に知っておきたい注意事項の2つ目は、ツールを過信しないことです。

 

ツールを使って圧縮しても、動かないことも往々にしてあります。

 

何かのはずみでうまくツールが作動しなかったりすることもありますから、ツールを過信するのはよくありません。

 

必ず自分の目で確かめるようにしましょう。

 

注意事項③根気強くやること

Javascriptの圧縮前に知っておきたい注意事項の3つ目は、根気強くやることです。

 

Javascriptの圧縮をして、うまくいかない場合には元のコードとの見比べに時間がかかります。

 

その時には、時間がかかることも往々にしてあります。

 

でもそれができると自信につながったり、読者の使い勝手がよくなったりします。

 

ですから根気強く腰を落ち着けて、ゆっくりとやりましょう。

 

Javascriptの圧縮方法

f:id:slash1196:20210713000628j:plain

ここではJavascriptの圧縮の方法をお話ししていきましょう。

 

手順は以下の通り。

 

手順①javascriptのコードをコピーする。

手順の1つ目は、javascriptコードをコピーすることですね。

 

自分のサイトの圧縮したい、Javascriptのコードをコピーしましょう。

 

  Javascriptのコードのコピーの際のポイント

Javascriptのコードのコピーの時のポイントは、<script>タグを除いた中だけをコピーすることです。

 

というのも<script>タグを入れてしまうと、基本的にコードが圧縮できないからです。

 

ですから書いた中身だけを、コピーするようにしましょう。

 

手順②コードをツールにコピペ。

手順の2つ目は、コードをツールにコピペすることですね。

 

ツールにコピペして、圧縮しましょう。

 

手順③ブログに貼り付け

3つ目の手順は、ブログに貼り付けですね。

 

ブログの元あった場所にはり付けるようにしましょう。

 

Javascript圧縮ツールのおすすめ3選

f:id:slash1196:20210602211806j:plain

ここでは、Javascriptのコードを圧縮するツールのおすすめをご紹介します。

 

おすすめの圧縮ツールは、以下の3つ。

 

  • ツール①JS Minifier (JavaScriptの圧縮)
  • ツール②JavaScript / Css 圧縮・軽量化(Minify)
  • ツール③Coding.Tools

 

では詳しく見ていきましょう。

 

ツール①JS Minifier (JavaScriptの圧縮)

f:id:slash1196:20210713202128j:plain

Javascript圧縮ツールの1つ目は、JS Minifierですね。

 

これはSyncer製のものですね。

 

当ブログでも、クリックだけでOKのCSS圧縮ツールおすすめ5選【初心者向け】にてお話ししたCSS Minifierの姉妹サイトだったりしますね。

 

使い方は、縮小前のコードの欄にコードを貼り付けて、縮小するボタンをクリックするだけ。

 

すると縮小後のコードの欄に、圧縮されたコードが表示されます。

 

ただJavascriptのコードとの相性がありものによっては、できないものもあります。

 

サブで使うことを、おすすめですね。

JS Minifier (JavaScriptの圧縮)へのアクセスは、こちら

 

ツール②JavaScript / Css 圧縮・軽量化(Minify)

f:id:slash1196:20210713202146j:plain

Javascript圧縮ツールの2つ目は、Javascript/CSS圧縮・軽量化(Minify)です。

 

こちらはブログのキーワードツールで有名なラッコキーワードの派生ツールですね。

 

このツールのいいところは、Javascriptのコードを選ばないところです。

 

使い方は、Javascriptを選び上段の欄にコピーしたコードを貼り付けて、圧縮ボタンをクリックするだけですね。

 

日本人向けに作られているので使いやすいと思います。

JavaScript / Css 圧縮・軽量化(Minify)へのアクセスは、こちら

 

ツール③Coding.Tools

f:id:slash1196:20210713202202j:plain

Javascript圧縮ツールの3つ目は、Coding.Toolsです。

 

このツールのいいところは、以下の通り。

 

  • 一つのファイルにまとめて確立する必要があるHTTPSの数を減らしてくれる。
  • CDNを使用して、同じJavascriptファイルに対する重複したHTTPS要求を回避してくれる。

 

ところですね。

 

使い方は簡単で、上段に圧縮したいJavascriptのコードを貼り付けて、Javascriptを圧縮ボタンをクリックするだけ。

 

下の段に圧縮されたコードが表示されます。

 

コードをコピーする場合には、コピー結果ボタンをクリックすると、一括コピーができますね。

 Coding.Toolsへのアクセスは、こちら

 

 

Javascriptを圧縮した後にすること

f:id:slash1196:20210506030023j:plain

次に、Javascriptの圧縮した後にすることをお話ししましょう。

 

やるべきことは、以下の通り。

 

  • すること①動作確認をする
  • すること②腰を落ち着けて、動かないことと向き合う

 

では詳しく見ていきましょう。

 

すること①動作確認をする

することの1つ目は、動作確認をすることです。

というのもせっかく圧縮しても、うまく動かないことがあるからです。

 

動かなかったら困りますよね。

ですから、必ず動作確認を行いましょう。

 

すること②腰を落ち着けて、動かないことと向き合う

することの2つ目は、腰を落ち着けて、動かない理由を探すことです。

 

結構多いのがうまく動かない理由をわからずに、元に戻すということですね。

 

でも実際には;マークがなかったとか、()マークが閉じられていなかったとかってことがほとんどだったりします。

 

そのためには、元の書かれたコードと比較検証が必要です。

 

ですからあわてずにゆっくりと見直す必要がありますね。

 

まとめ|Javascriptを圧縮して表示速度をアップしよう

お疲れさまでした。

ここまでJavascriptを圧縮する方法をお話してきました。

 

まとめると、以下のようになります。

 

まとめ
  • 知識がないからと言って、Javascriptのコードを圧縮するのをあきらめるのはもったいない。
  • Javascriptのコードを圧縮する前に知っておきたい注意点は以下の通り。
    • 注意事項①元のJavaScriptのコードをメモ帳などに張り付けてバックアップメモリを作っておくこと
    • 注意事項②ツールを過信しないこと
    • 注意事項③根気強くやること
  • Javascriptの圧縮ツールは、以下の通り
    • ツール①JS Minifier (JavaScriptの圧縮)
    • ツール②JavaScript / Css 圧縮・軽量化(Minify)
    • ツール③Coding.Tools
  • Javascriptを圧縮した後にすること
    • すること①動作確認をする
    • すること②腰を落ち着けて、動かないことと向き合う

 Javascriptのコードを圧縮すると、けっこう表示速度がアップします。

 

以下は当ブログで圧縮した証拠の写真です。

f:id:slash1196:20210713200317j:plain

グローバルナビゲーションのJavascript(左:0.410KB 右:0.354KB 14%減 )

 

f:id:slash1196:20210713200607j:plain

ヒートマップのJavascript(左:0.538KB 右:0.437KB 35.5%減)



f:id:slash1196:20210713200833j:plain

更新日時のjavascript(左:1.117KB 右:0.817KB 26.8%減)

全部足すと、圧縮率が約3割くらいになるんです。

 

ですからやり方を覚えてやったほうがいいです。

ぜひやってみましょう。

 

ってことで今回はこのへんで。

また次回に。