注目キーワード
  1. Photoshop
  2. Python
  3. Raspberry Pi
  4. Arduino

簡単にできるWebページ高速化~Javascript、CSS最適化方法

ブログを始めたばかりで、まだパソコンについても詳しくないけどWebページの高速化はしたい!

そんな方に向けて簡単にできるWebページ高速化方法を紹介します。

 

Webページの高速化とは

このページ開くの遅いなと思ったことありませんか?

私たちは、検索をする上でページの開きが遅いとイライラしてしまうものです。

 

そこで、リンクをクリックしてから表示されるまでのWebページの速さを上げることで、自分のWebページを気持ちよく見てもらいましょう

ということです。

 

このWebページ高速化についてですが

Googleでもどのようにモバイルサイトのスピードを速くするのかが

5つ紹介されています。

5 ways to optimize your mobile site speed

1. Assess your mobile site speed

2. Reduce page weight

3. Remove automatic image carousels

4. Optimize search

5. Speed up check out process

以下省略

(引用:Think with Google

 

簡単に訳すと

1. モバイルサイトの速度を評価してね

2. ページを軽くしてね

3. 自動回転(カルーセル)をなくしてね

4. 検索を最適化してね

5. チェックアウトの課程を速くしようね

です。

 

2.のページ軽くしてね については統計データも出ており英訳すると

カナダの平均モバイルサイトは3000KBです。

ですが79%のWebサイトでは1MB越えをしており、その内の53%は2MBを超えています。

さらにその23%は4MBを超えていますよ。

と言っています。

 

これらを解決するためにGoogleの英文を読んでも構いませんが

手間もかかるということで今回は簡単に高速化できる方法を紹介していきたいと思います。

 

Webページの画像圧縮

これは一番簡単に容量除去効果を実感することができます。

使う画像の特徴にあったファイル形式を選び大容量のファイル容量をは減らしてしましましょう。

各画像ファイルを「JPEG」、「PNG」、「GIF」に変えることで容量が減らせます。

 

詳しくは当サイトで紹介しているので気になる方はこちらも合わせてご覧ください。

Webページ画像サイズの最適化方法と基礎まとめ[JPEG , PNG , GIF]

 

 

Javascriptの最適化

javascript

これも体感的にWebページが速く感じさせるテクニックになります。

Webページのテーマで使われているJavascriptに

少しプログラムを加えるだけで高速化できるので簡単でオススメです。

 

僕がこれを実行したところ、ページスピードが10%」も改善したので紹介します。(それでもまだ遅い方です)

 

まずはWebページのテーマで使用しているプログラムを準備します。

「FileZila」などのFTPソフトからパソコン上に落とすことができます。

 

テーマのプログラミングファイルを「TeraPad」などでソースコードを開き

Javascriptの読み込み部分に

defer属性」またはasync(エイシンク)属性」

を書き足すだけです。

 

TeraPadの使い方については当サイトでも紹介しているので、知りたい方は合わせてご覧ください。

メモ帳でプログラミング:オススメ[TeraPad最強です]

 

Javascriptの読み込み部分は

<script src =”js/abc.js”></src>

のような記述になっています。

 

この記述に

「 <script src =”js/abc.js”defer ></src> 」

「 <script src =”js/abc.js”async ></src>  」

として完了です。

 

ちなみにdefer属性とasync属性の違いですが

defer属性はコンテンツがすべて読み込まれるのを待ってからJavascriptを実行します。

この属性のメリットは

HTMLに記述されている「順番通り」に読み込みを行うため

「重たいJavascriptを読み込む」ときに効果を発揮します。

 

一方async属性は非同期読み込みで、読み込む順番はバラバラです。

そのため、「軽いJavascriptを読み込む」のに適していますが

JQueryなどのライブラリを使う場合は避けましょう。

 

CSSの最適化

css

Webページは基本的にすべてのCSSファイルを読み込んでからコンテンツを表示します。

そのため、CSSを「非同期」にして読み込むことでWebページの表示速度を速くすることが可能です。

 

ただし、すべてのCSSを非同期にすると

画面が表示されて初めに見える場所(ファーストビュー)のレイアウトまで

なくなってしまうので非同期にするCSSはファーストビュー以降のものにする必要があります。

 

では実際に非同期設定を見ていきましょう。

この際に使うのが「preload(プリロード)属性」と呼ばれるものです。

これを使うと、レンダリングブロックをせずにCSSを読み込むことができるようになります。

 

実際のプログラムを見てみましょう。

 

< link rel = “stylesheet” href =”css/style.css”>

 

このCSS読み込みプログラムに対して

 

< link rel =”preload” href =” css/style.css” as = “style”>

 

とすれば完了です。

 

ただしこのpreload属性を使えるブラウザも限られているので、注意しましょう。

 

以上「簡単にできるWebページ高速化~Javascript、CSS最適化まとめ」でした。

FTPソフトでJavascriptやCSSファイルを探して、各記述を書き足すだけなので簡単に速度を上げることができます。

まだWebページ表示速度は改善余地があるので、解決でき次第更新していきたいと思います。

お疲れ様でした。

speed
学びに関する情報をチェック!