Blog2016.09.12Sasaki手間なく簡単にウェブサイトの表示速度を改善して離脱率を低くしよう!Web制作HTML・CSSコーディングサーバApacheシェアTweetこんにちは、Maromaro佐々木です。ウェブサイトの表示速度が遅くて改善したい・・・と思っている方多いのではないでしょうか。今回は手間なくできるサイトの表示速度改善について書いていきます。画像を適切なサイズで切り出す画像を圧縮するJavascriptはbodyの最後に書くブラウザキャッシュを利用するCDNに置き換えるCSS,JSを圧縮するCSS/JSをなるべく1ファイルにまとめるDNSプリフェッチを使う画像を適切なサイズで切り出す大きな画像を小さく表示していたりすると、1ページあたりの通信量が増えてしまうので表示の遅延につながります。見かけるのが、デジカメで撮った写真そのままの画像を、imgタグで無理やり小さく表示しているサイトを見かけます。難しくとも過度に大きな画像とならないようにも気をつけたいですね。画像を圧縮する画像圧縮ですが、ついつい忘れてしまいがちですね。コーディング時にはJPGなどは80%~60%程度に圧縮したり、PNGなどはPN8とPNG24,32の使い分けを意識していきたいところです。ブラウザ上で圧縮できるツールでおなじみのTinyPNGなども有名ですよね。JPG版のTinyJPGなどもあります。Optimizer圧縮してないことは結構ありますので、ウェブサイトコンテンツの性質として圧縮をかけても問題ないもしくは表示速度の方が重要という事であれば、積極的に圧縮していきましょう。Javascriptはbodyの最後に書くheadタグの中にJavascriptを書くのが昔ながらのやり方ですが、scriptタグなどの読み込みが終わるまで画面は表示されないため、遅延の原因となります。Javascriptなどはbodyの最後に記述するのが現在のトレンドになっています。※ただし、Javascriptの設計によってはウェブサイトの作成時からでないと難しい場合もあります。ブラウザキャッシュを利用する初回の読み込みには影響がありませんが、回遊型のウェブサイト等では効果抜群です。Apacheサーバをつかっている場合は簡単です、基本的にhtaccessに書くだけです。下記の記事など参考に。キャッシュ設定でサイト表示を3倍速くする.htaccessの書き方CDNに置き換えるCDN(コンテンツデリバリーネットワーク)を利用する。jQueryの読み込みや、そのプラグインなどCDNに対応しているものは積極的に利用すると良いかもしれません。自サーバにリソースを置かないため、サーバの負荷を下げる事にもなりますし、PV数の多いウェブサイトでは有利な方法かと思います。CSS,JSを圧縮する初期化ファイルやJavascriptのプラグインなどは圧縮できるようでしたら圧縮しましょう。PV数の多いウェブサイトの場合には効果があるかと思います。更新の事を考えると、何がなんでもというのは難しいですが、可能な部分は圧縮しておくと良いと思います。ツールあるかと思いますが、ブラウザ上では下記サイトが参考になります。CompressorCSS/JSをなるべく1ファイルにまとめるCSS/JSの読み込みタグ(link,script)をたくさん書いてしまうと、都度通信が発生してしまい、遅延の原因になります。こちらも劇的な変化にはならない部分ですが、PV数の多いウェブサイト等では対策したい部分です。jQueryなど、全てのページで共通に読み込んでいるものはひとまとめにしてしまっても良いと思います。DNSプリフェッチを使うこちらも劇的変化ではない、サポートブラウザ等もありますが最新ブラウザではサポートされているので、積極的に使いたい機能です。Analyticsのタグなどの各種解析タグ、画像サーバが別など色々なドメインから読み込んだリソースを元にウェブサイトが構成されている場合に効果を発揮します。下記の記事など参考に。DNSプリフェッチでウェブページの読み込み速度をスピードアップいかがでしょうか、ウェブサイトの表示速度改善には色々な手法がありますが今回は簡単にできる手軽なものだけをピックアップしてみました。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。