ホームページの表示を高速化・最適化に取り組んでみました
2015年9月13日
ここのところ、ホームページの表示を高速化・最適化に取り組んでます。っていうか、
色々な方法があり過ぎて、ど壷にはまりまくってます。まずはブログ（ワードプレス）
から取り組み、以前に記事りましたが、ある程度プラグイン使えば簡単にやっつけられ
ました。で、今回はホームページ(html)を手掛けてみました。
高速化・最適化の必須ツールとして、
PageSpeed Insights
を参考にやっつける。 備忘録です。
ブラウザのキャッシュの設定
圧縮を有効にする
画像の圧縮（ロスレス圧縮：可逆圧縮）
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
JavaScript を縮小する・CSSを縮小する
HTML を縮小する
サーバーの応答時間を短縮する
■ 圧縮を有効にする
下記を「 .htaccess 」に記述。
AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript
■ 画像の圧縮（ロスレス圧縮：可逆圧縮）
ロスレス圧縮とは？データの欠落がまったく起こらない圧縮方式。圧縮された画像は、
圧縮前のデータを完全に復元できる。
利用ツール ： kraken.io (https://kraken.io/web-interface)
ウェブ上で圧縮・ダウンロードする。jpg/gif/pin 圧縮可
■ スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
「レンダリングを妨げる JavaScript を削除する」の対処
head内「 <head> ～ </head>」の JavaScript を </body> の直上に移動させる。
「CSS の配信を最適化する」の対処
複数のcssを出来るだけ少数にまとめる。
■ JavaScript を縮小する・CSSを縮小する
PageSpeed Insights で分析した結果には、最適化された画像、JavaScript、CSS リソース
がダウンロード出来る。それをサーバーにアップするだけ。
■ HTML を縮小する
PageSpeed Insights では、最適化された「HTML」は作ってくれない。ケチッ
色々ググッみたけどヨサゲなものがない。いつも使っているホームページ制作ソフト
Dreamweaver（ドリームウェーバー）CS3
で簡単にやっつけられた。
ツールバーのコマンド → ソースフォーマットの適用 →
Ctrl+Ａ（全てを選択） → Shift+Tab（左揃え）
※ ソースコードをキレイに並べ替え、左側の余白をなくす。
無料のホームページ制作ソフト「 Expression Web 4 」でも同じようなことができるので、
ツール → HTMLの最適化
お試しあれ。
■ サーバーの応答時間を短縮する
Google 詳細
Google のテストでは、お使いのサーバーは 1.6 秒で応答しました。サーバーの応答時間が遅くなる要因はたくさんあります。サーバーが多くの時間を費やしている箇所を監視し、測定する方法については・・・
日によってサーバーエラーが連発することが。
当方が利用するXREAサーバーの回線が込み合うと、消化不良的な症状になる。
思い切って別サーバーに越してみたら、エラーなくなりサクサク。
XREA内でのサーバー移動・移行の手順 備忘録
しまい
コメントを残す