:2018-04-23ごきげんよう。このブログを公開後、構造化データのエラー対応など、バリデーションに四苦八苦しております。その作業がようやく一段落しました。その過程で覚えたワザを紹介します。近年はスマートフォンやiPhoneの普及が進み、モバイル端末でネットサーフィンする方が非常に増えていますよね。そのような背景から、デスクトップとモバイル、両方に対応したサイト作りが不可欠ですが、モバイル端末のスペック上、ページの表示速度はデスクトップに比べて劣るため、重点的に対策が必要です。ホームページの表示速度を改善する方法はいくつかあるようですが、その中の一つとして、コードの圧縮によるダイエットは非常に簡単に行えるのでおすすめです。この記事ではHTMLとCSS、JavaScriptコードの圧縮方法を紹介します。Insightsで表示速度を確認するまず最初に、作成したホームページの表示速度を確認します。Insights」で調べてみましょう。Insightsを開いたら下のような画面がでるので、調査したいURLを入れて分析ボタンを押します。スコアとともに修正すべき点がリストアップされます。「修正を考慮」の欄にHTML、CSSを縮小するとあります。表示」をクリックすると、Googleが提案する圧縮方法についての説明文が読めます。Compressorによる圧縮を試みました。圧縮の仕組みコーディングのとき、読みやすいように字下げをしたり、コメントを入れることが多々ありますよね。そのコメントや字下げによる空欄がコードサイズを大きくしてしまいます。アップロードする際にそれらの余分な箇所を削除します。字下げによる空欄やコメントがサイズを大きくする。脂肪を削ぎ落とすがごとく削除すべし。いっても、手動で削除していくのは大変なので、ツールを使います。私が使ったコンプレッサーツールはこちらです。テキストエリアにコードをコピーして貼り付け、テキストエリア右上にある、対応したコードのボタンをクリックします。自動でキュンキュンに圧縮されたコードが出力されるので、それをコピーして使います。圧縮されたコードのサイズがテキストエリアの右下でチェックできます。gzipボタンを押すと、.gz形式に圧縮されたファイルをダウンロードできます。圧縮されたコードはサイズが小さくなりますが、可読性が著しく悪化します。後から自由に編集できるよう、オリジナルのデータはバックアップ保管をしましょう。自動で圧縮しくれるプラグイン「Autoptimize」WordPressなら、コードを自動で圧縮してくれる便利なプラグインが使えます。WordPress管理画面、ダッシュボードの「プラグイン」から「新規追加」を選択、「Autoptimize」を検索し、インストールします。HTML、JavaScript、CSSの各オプションにチェックを入れ、下にあるセーブボタンをクリックして保存します。comments?」にチェックを入れます。圧縮して可読性が下がったコードにコメントを残しておくメリットはあまりないので、ここのチェックは外すのがよいでしょう。圧縮後の表示速度の結果HTMLとCSSの圧縮結果です。無事、Google先生の合格をいただきました。表示速度のスコアは圧縮前と変わらず、残念でした。次はレンダリングをブロックしいるコードを特定し、対策を打とうと思います。CompressorとAutoptimizeによるコードの圧縮方法をまとめました。コードのデータ容量を大幅に削減しつつ、簡単に行えるのでおすすめです。私のサイトの場合、表示速度のスコアは改善しませんでしたが、この対策で効果がでている人も多いようです。あなたも是非、試してください。コメントをキャンセルメールアドレスが公開されることはありません。url次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。meHodaエンジニア。フロントからインフラまで広く浅く。至らない点は多いですがなんとかやっています。