.htaccessに追記で圧縮を有効にする【PageSpeed Insights】

      2017/02/15

 前回はモバイルファースト導入に向けて、サイトのユーザエクスペリエンス向上するためPageSpeed Insightsでサイトのチェックを行いました。

検索表示が激変!モバイルフレンドリーテストでモバイルファーストに備える
 自サイトをいろいろチェックしていたら、検索結果に「ページがモバイルフレンドリーではありません」と表

今回は、早速その検査結果で「修正が必要」と出てきた項目の中の「圧縮を有効にする」をテーマに、Wordpressで圧縮を有効にし、サイトの高速化方法をまとめておきます。

Sponsored Link

「圧縮を有効にする」とは何なのか?

圧縮を有効にする
gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。

PageSpeed Insightsでチェックすると、「圧縮を有効にする」という部分にこのように書かれています。

リソースとは
コンピュータで、動作の実行に必要な処理システムの要素や機器。

という事は、サーバーでリソース(HTML、CSS、JavaScript、XML、WEBフォントファイル等)をgzipやdeflateという形式で圧縮して送信することで通信速度が上がり、結果サイトの高速化、表示速度が上がるよーって事です。

.htaccessで「圧縮を有効にする」方法

WordPressの場合、「WP HTTP Compression」というプラグインでも圧縮は可能なのですが、プラグイン数が増えると読み込み速度に影響するので、本末転倒になります。極力プラグインなしで圧縮する方法を導入した方が良いでしょう。

gzip化の確認

まず確認してみましょう。

▶️GIDnetwork

URLを入れてチェックをクリック

Web page compressed?(圧縮されたウェブページ?)が「No」になってます。

下記のコードをコピーして.htaccessに追記していきます。

今回はエックスサーバーでの場合の説明をしていきます。

ファイルマネージャーにログインします。

自分のサイトURLのファイルをクリック

Public html ファイル内の「.htaccess」にチェックを入れ「編集」をクリック。

先ほどのコードをペースト追記して、保存文字コードを「UTF-8」にし、編集をクリック。これで完成です。

念のため圧縮が出来ているか再起程のサイトで確認します。

▶️GIDnetwork

Web page compressed? が「yes」になっていれば完了です。

PageSpeed Insightで確認する

▶️PageSpeed Insights

修正前は55/100だったのが

 

修正後は70/100と15も改善されました。

サイトの高速化は大変重要な要素なので、しっかり改善していきましょう。

次は、写真の最適化について説明していきます。

画像を一発で圧縮してサイトを高速化!EWWW Image Optimizerの設定と使い方
前回からサイトの最適化についてブログを書いていますが、今回はアップロード済みの画像を圧縮し、最適化す

 - SEO対策, WordPress, プラグイン