ここのところ、ホームページの表示を高速化・最適化に取り組んでます。っていうか、
色々な方法があり過ぎて、ど壷にはまりまくってます。まずはブログ(ワードプレス)
から取り組み、以前に記事りましたが、ある程度プラグイン使えば簡単にやっつけられ
ました。で、今回はホームページ(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 を削除する」の対処
head内「 <head> ~ </head>」の JavaScript を </body> の直上に移動させる。
「CSS の配信を最適化する」の対処
複数のcssを出来るだけ少数にまとめる。
■ JavaScript を縮小する・CSSを縮小する
PageSpeed Insights で分析した結果には、最適化された画像、JavaScript、CSS リソース
がダウンロード出来る。それをサーバーにアップするだけ。
■ HTML を縮小する
PageSpeed Insights では、最適化された「HTML」は作ってくれない。ケチッ
色々ググッみたけどヨサゲなものがない。いつも使っているホームページ制作ソフト
Dreamweaver(ドリームウェーバー)CS3
で簡単にやっつけられた。
ツールバーのコマンド → ソースフォーマットの適用 →
Ctrl+A(全てを選択) → Shift+Tab(左揃え)
※ ソースコードをキレイに並べ替え、左側の余白をなくす。
無料のホームページ制作ソフト「 Expression Web 4 」でも同じようなことができるので、
ツール → HTMLの最適化
お試しあれ。
■ サーバーの応答時間を短縮する
Google 詳細
Google のテストでは、お使いのサーバーは 1.6 秒で応答しました。サーバーの応答時間が遅くなる要因はたくさんあります。サーバーが多くの時間を費やしている箇所を監視し、測定する方法については・・・
日によってサーバーエラーが連発することが。
当方が利用するXREAサーバーの回線が込み合うと、消化不良的な症状になる。
思い切って別サーバーに越してみたら、エラーなくなりサクサク。
しまい