Webサイト高速化【実践編】

前回に引き続き今回はどのようにサイトの高速化をしているのかを
復習も兼ねてまとめていきたいと思います。

1.現状の把握

まずは現状を知るために下記サイトで診断をします。
(ビフォーを残しておくと最後に達成感を味わえます!)
Google PageSpeed Insights
モバイル速度テスト
GTmetrix

 

2.画像を最適化する

ホームページに表示する画像をそのまま使うと実は90%が無駄な容量だったりします。
その無駄な容量を以下のオンラインの画像圧縮ツールを使って画像を最適化することで改善できます。
ブログを書く人にもおすすめです。
Optimizilla
TinyPNG

 

3.JavaScript/CSS/HTML を縮小する

JavaScript/CSS/HTMLの縮小は、余分な改行やスペースなどの不要な部分を取り除いて、ファイル(プログラム箇所)の容量を小さくすることです。
縮小することで表示スピードは改善されますが、次回編集しようと思った時にものすごく読みにくくなります(作文のスペースや句読点を取り除いて詰める感じ)ので運用面を考慮して実施する必要があります。
▼縮小
Online JavaScript/CSS/HTML Compressor

▼縮小したファイルを元に戻すサイトもあります
Styleneat – CSS Organizer
prettydiff(Javascript用)

 

4.リンク先ページのリダイレクトを使用しない

・無意味なリダイレクトが行われていないかチェック!

 

5.スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

ファーストビュー(最初に見える画面)の表示スピードについての項目です。
「CSS」や「JavaScript」を全部読み込んでから表示すると遅くなるので、ファーストビューの表示に影響しないものに関しては最後に読み込みましょう。
ということなので、影響の出ない「CSS」や「JavaScript」の読み込み記述をbody最下部に移動させます。

 

6.ブラウザのキャッシュを活用する

サイトの情報を見ているブラウザ(Microsoft Edge・Internet Explorer・Safari・Firefox・Google Chrome等)にある変わらない情報を残すことで毎回、0から読み込むのを防ぎ、見ている方が快適にしよう!
ということで、Googleはキャッシュ期間を一週間以上設定することを推奨しています。

方法としては下記のように.htaccessファイルにキャッシュの設定を入れます。(一例)

1
2
3
4
5
6
7
8
9
10
11
12
13
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"
</ifModule>

ここで問題になるのが「Google Analytics」の存在・・・。
自身も諦めておりましたがこんな対処法がありました!
Google Analytics有でGooglePageSpeedを100点にする方法

 

7.サーバーの応答時間を短縮する

ホームページはサーバーにある情報読みに行って表示しているのですが、改善してより速くしよう!ということで下記などの見直しをします。

①不要なプラグインを停止、削除する
②PHPのバージョンを上げる
③「the_excerpt()」を「echo get_the_excerpt()」に変更する

 

まとめ

ざっくりWebサイト高速化について説明しましたが記載以外の方法も沢山あります。
またサイトの状況にあわせて様々な要因が絡んできます。
紹介した内容をもとに効果的な組み合わせなどオリジナルのレシピを作るのもオススメです。

HOMEへ戻る

関連記事

  1. オルトキッチンアンケート たった一つの質問アンケート!
  2. 名文への近道は・・・?
  3. 制作物のご紹介2
  4. Googleサムネイル 日常で使えるGoogleの便利機能
  5. ゆうかり学園 カレー教室 ゆうかり・カレー教室!
  6. 制作物ゆうかり学園bridge冊子 ゆうかり50周年記念誌
  7. かれんちゃんのお別れ会
  8. 春めいてきました

FACEBOOK

新着NEWS

カレンダー

2018年7月
« 6月 8月 »
 1
2345678
9101112131415
16171819202122
23242526272829
3031