表示速度がUP!HTMLとCSSを簡単に圧縮・縮小する方法

ごきげんよう。Hodaです。

このブログを公開後、構造化データのエラー対応など、バリデーションに四苦八苦しております。

その作業がようやく一段落しました。

せっかくなので、その過程で覚えたワザを紹介します。

 

近年はスマートフォンやiPhoneの普及が進み、モバイル端末でネットサーフィンする方が非常に増えていますよね。私もその一人です。

そのような背景から、デスクトップとモバイル、両方に対応したサイト作りが不可欠ですが、モバイル端末のスペック上、ページの表示速度はデスクトップに比べて劣るため、重点的に対策が必要です。

ホームページの表示速度を改善する方法はいくつかあるようですが、その中の一つとして、コードの圧縮によるダイエットは非常に簡単に行えるのでおすすめです。

この記事ではHTMLとCSS、JavaScriptコードの圧縮方法を紹介します。

 

PageSpeed Insightsで表示速度を確認する

まず最初に、作成したホームページの表示速度を確認します。

Googleが提供しているサービス「PageSpeed Insights」で調べてみましょう。

 

PageSpeed Insightsを開いたら下のような画面がでるので、調査したいURLを入れて分析ボタンを押します。

PageSpeed Insights使い方

 

スコアとともに修正すべき点がリストアップされます。「修正を考慮」の欄にHTML、CSSを縮小するとあります。

PageSpeed Insights 修正箇所のリストアップ

 

YUI Compressorを用いた圧縮方法

「修正方法を表示」をクリックすると、Googleが提案する圧縮方法についての説明文が読めます。

ここではYUI Compressorによる圧縮を試みました。

圧縮の仕組み

コーディングのとき、読みやすいように字下げをしたり、コメントを入れることが多々ありますよね。

そのコメントや字下げによる空欄がコードサイズを大きくしてしまいます。

なので、アップロードする際にそれらの余分な箇所を削除します。

コード圧縮の説明図

字下げによる空欄やコメントがサイズを大きくする。脂肪を削ぎ落とすがごとく削除すべし。

といっても、手動で削除していくのは大変なので、ツールを使います。

Online JavaScript/CSS/HTML Compressorの使い方

YUI Compressorの使い方私が使ったコンプレッサーツールはこちらです。

テキストエリアにコードをコピーして貼り付け、テキストエリア右上にある、対応したコードのボタンをクリックします。

自動でキュンキュンに圧縮されたコードが出力されるので、それをコピーして使います。

 

 

 

 

YUI Compressorの使い方圧縮データの確認圧縮されたコードのサイズがテキストエリアの右下でチェックできます。

さらにgzipボタンを押すと、.gz形式に圧縮されたファイルをダウンロードできます。

 

 

 

圧縮されたコードはサイズが小さくなりますが、可読性が著しく悪化します。後から自由に編集できるよう、オリジナルのデータはバックアップ保管をしましょう。

 

自動で圧縮しくれるプラグイン「Autoptimize」

WordPressなら、コードを自動で圧縮してくれる便利なプラグインが使えます。

WordPress管理画面、ダッシュボードの「プラグイン」から「新規追加」を選択、「Autoptimize」を検索し、インストールします。

Autoptimize使い方

HTML、JavaScript、CSSの各オプションにチェックを入れ、下にあるセーブボタンをクリックして保存します。

HTMLのコメントを残したい場合は、「Keep HTML comments?」にチェックを入れます。

圧縮して可読性が下がったコードにコメントを残しておくメリットはあまりないので、ここのチェックは外すのがよいでしょう。

 

 

 

圧縮後の表示速度の結果

HTMLとCSSの圧縮結果です。

無事、Google先生の合格をいただきました。

ただ、表示速度のスコアは圧縮前と変わらず、残念でした。

次はレンダリングをブロックしいるコードを特定し、対策を打とうと思います。

圧縮後の結果

 

まとめ

YUI CompressorとAutoptimizeによるコードの圧縮方法をまとめました。

コードのデータ容量を大幅に削減しつつ、簡単に行えるのでおすすめです。

私のサイトの場合、表示速度のスコアは改善しませんでしたが、この対策で効果がでている人も多いようです。

あなたも是非、試してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください