Now Loading...
menu
  • すべて
  • web制作
  • 写真を楽しむ
  • カメラで遊ぶ
  • モノ
  • 旅
  • おすすめツール

サイトの表示速度を落とさないための、日々のちょっとした工夫。

サイトの表示速度を落とさないための、日々のちょっとした工夫。

サイトの表示がもっさりしてしまう要因は様々。
しかしどんな原因であれ、表示速度が遅いと見てる側がストレスになることには違いありません。

WEBサーバーをハイスペックにしてみる、WEBフォントの読み込みをやめてみる…などなど、速度改善に有効な手段は他にもありますが、今回は「日々の作業の中で実践できるちょっとしたこと」に焦点を当てます。

 

写真保存はJPEGで!

デジタルカメラで撮ってそのままだと、写真のサイズ大きすぎ!

サイトの表示スピードが遅くなってしまうので、1MB以下を目安に圧縮。

投稿する記事の写真はもちろん、背景やスライドなどサイト内で使う画像も圧縮してからアップするようにしています。

 

JPEGが表現できる色は1670万色。特に、写真やグラデーションなど、色調の変化を自然に表現できるのがJPEGの強みです。

写真をPNGで保存した場合、同じ大きさでも容量は膨大に・・!

 


PNGの方が良いケースもある

しかしこのようなケースではPNG形式で保存する方が○。

・直線、塗りつぶし、文字やイラストが入っているもの

・画像内で使われている色数が多い場合

・画像が複雑

これらをJPEGで保存すると、汚く見えてしまうことが。

 

表現したい内容によって、適切な保存形式を選びましょう!

 


javascriptはbody閉じタグ付近で読み込むのがベストなの?

javascriptを読み込んでいる間、htmlファイルの読み込みはブロックされて止まります。

htmlファイル(=ページの内容)の読み込みが止まると、画面は真っ白に。

 

ブラウザに描画されるまでの流れ。フレームと呼ばれています↓

・・というわけで、javascriptはheadタグ内に記述するのではなく、bodyの閉じタグ直前に記述。

htmlファイルの読み込みが完了してからjavascriptを読み込もう、というものです。

 

このサイトではスクロールするとコンテンツ表示がスタートする、ということをしているので、javascriptの記述すべての読み込みを後回しにすると、コンテンツが表示されないという現象が・・。

そこで、どうしても最初に読み込みたいjavascriptはhead内に書く。onloadで実行するスクリプトはbody閉じタグ直前で読み込む、というような切り分けにトライしてみました。

 
今までは、ただ作るのが好きというだけでコーディングしていた!反省。

技術書をポチりました。知ることで見えてくる世界も変わる・・。

 


意外と見落としがち。整理整頓って大事

制作するときに留意すべき点・・ではありますが、サイトを公開してからいろいろと試行錯誤して変更を繰り返していくうちに、コードもすごいことになっていた!

 

コードだけでなく画像も、それから、下書きにしている記事もそう。

整理整頓。不必要なものは捨てる!は大事です。

 


jsとcss。触る頻度が低いコードは圧縮

プラグインなどで使っているjsやcssは、圧縮してあるもの(min.js/min.css)を利用。

滅多に編集しないものは圧縮する、というルールにしました。

布団圧縮袋みたい。実家の押入れを思い出します。

 


ブラウザキャッシュを効かせてみる

htaccessに記述します。

 

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault  "access plus 1 month"

# CSS
ExpiresByType text/css  "access plus 1 month"

# RSS
ExpiresByType application/atom+xml  "access plus 1 hour"
ExpiresByType application/rdf+xml   "access plus 1 hour"
ExpiresByType application/rss+xml   "access plus 1 hour"

# データはキャッシュさせない
ExpiresByType application/xml   "access plus 0 seconds"
ExpiresByType text/xml  "access plus 0 seconds"

# Favicon
ExpiresByType image/vnd.microsoft.icon  "access plus 1 week"
ExpiresByType image/x-icon  "access plus 1 week"

# HTML
ExpiresByType text/html "access plus 0 seconds"

# JavaScript
ExpiresByType application/javascript"access plus 1 month"
ExpiresByType application/x-javascript  "access plus 1 month"
ExpiresByType text/javascript   "access plus 1 month"

# IMAGES
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg"access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"

# WebFONT
# Embedded OpenType (EOT)
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType font/eot  "access plus 1 month"
# OpenType
ExpiresByType font/opentype "access plus 1 month"
# TrueType
ExpiresByType application/x-font-ttf"access plus 1 month"
# Web Open Font Format (WOFF) 1.0
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/x-font-woff   "access plus 1 month"
ExpiresByType font/woff "access plus 1 month"
# Web Open Font Format (WOFF) 2.0
ExpiresByType application/font-woff2"access plus 1 month"

# Other
ExpiresByType text/x-cross-domain-policy"access plus 1 week"
</IfModule>

 

このサイトはレイアウトを変えたり、画像を変えてみたり、ちまちまっと変更し続けており、キャッシュが効いていると確認しづらいので外しました。

 

リピーターさんが何度も訪れるようなサイトでは、キャッシュは有効かも。

ただ、これは根本的な解決になってるのかな?ちょっと疑問。

 


表示スピードはこれでチェック!

Googleが提供しているテストツール。

「Test My Site」はモバイル版専用。

https://testmysite.withgoogle.com/intl/ja-jp

 

「PageSpeed Insights」はPCサイトとモバイルサイトの両方をチェックできます。

https://developers.google.com/speed/pagespeed/insights/

 

その他に「GTmetrix」

https://gtmetrix.com/

こちらは英語・・ですが、PageSpeed Insightsにない情報も教えてくれます。

 


テストでの速度は若干上がりました・・が、これはあくまでGoogle様のテスト。

もっさりして重たいなあと体感してしまうレベルでなければ、そこまで神経質にならなくても良さそう。

 

読み込み完了までの待ち時間を楽しく過ごしてもらおう!という、ローディングアニメーションを入れてみるのも◎。意外と簡単なのでぜひ!

ページ読み込み中。ローディングアニメーションを入れてみよう。

 

share on

TIPS&NOTE TOPへ