今月は夢の叶え方特集!
AutoptimizeでカンタンにWordPressを最適化!
The following two tabs change content below.
ソルティー

塩畑 貴志(ソルティー)ともうします。

中学の頃、完全に記憶喪失になり、普通のレールに乗ることが夢に。しかし、社会人になってからADHDと分かり、組織にうまく染まれず、行き着いたのがフリーランスという道でした。

ブログで大事にしてることは『ブログ』を一つの作品として発信し、どんなに辛いことがあっても見本になれる生き方を見せることです。

SEOを考えるならページの高速化はやっておきたい重要な項目。

ページ表示速度高速化、第一弾と第二弾取り組んでいただけましたか?

前回までの記事はこちら

第一弾Gzipの設定
⇒Gzipで圧縮を行い、最適化を行います。

第二弾ブラウザキャッシュの設定
⇒インターネットを閲覧するブラウザのキャッシュを有効化して高速化を行います。

 

実はまだまだページ表示速度の高速化ができる点が残っています。

それがHTMLや、CSSのコード最適化!

 

「え、それってどういうこと?めっちゃ難しいんじゃない…?」

って思うかもしれません。

 

そうなんです。普通にやると難しいんです。

しかし、今回はWordPressのプラグインを使って、ものすごくカンタンにコードの最適化を行ってみましょう!

 

ページの表示速度を早くするにはページのデータを少なくする

ウェブページを閲覧する際、必ずページデータのダウンロードが行われます。

WordPressとAutoptimizeプラグイン:ページダウンロードの仕組み

 

ダウンロードと言うと、アプリケーションをインストールするイメージが強いかもしれません。

でも、実はウェブページを閲覧する時にもダウンロードが毎回行われているのです。

 

そのため、ダウンロードするデータ量が多ければ多いほどページの表示速度は遅くなります。表示が遅いと離脱率が増えてしまうため、SEO的にも良くないですし、ユーザーにも優しくありません。

だから速化したいのであれば、ダウンロードするページのデータ(転送量)を少なくする必要があるのです。

 

ページのデータ(転送量)を少なくするには

WordPressとAutoptimizeプラグイン:HTML、CSS、PHPなどのコード

ページのデータ量を少なくするには下記の2つのデータを小さくすればOKです。
  • コード(HTML、CSS、Java、PHPなど)
  • 画像

     

    画像はリサイズをしたり、解像度を下げるなどパソコンにそんなに詳しくない初心者の方でもできるかもしれません。

    しかし、コードの場合、無闇に削除して画面表示が崩れたり、最悪、表示されない状態になってしまったりするかも…。

    そのため、初心者では中々いじることができないのです。

     

    そこで使いたいのがAutoptimizeというプラグインです。

     

    Autoptimizeの使い方

    Autoptimizeというプラグインは、チェックを入れるだけでカンタンにコードを圧縮・縮小できます。

    ぜひやってみましょう!

     

    プラグインのインストール

    プラグインの追加で「Autoptimize」と検索すれば出てきます。

    インストールして有効化し、設定画面へ行きましょう。

    WordPressとAutoptimizeプラグイン:Autoptimizeの検索

     

    ちなみに設定時は必ずAdvanced Settingで設定しましょう。

    WordPressとAutoptimizeプラグイン:Advanced Settingは右上

     

    Autoptimizeの設定

    Autoptimizeは有効化すればOKというワケではありません。

    また、自分のウェブサイトの状態によって最適な設定は変わります。

     

    全ての画像に説明文を入れておきましたので、参考にしてチェック入れてみてくださいね!

     

     テーマや、サーバによって最適な項目が変わる

    サイトによって、最適な項目が変わるようです。一つひとつチェックを入れてGoogle pagespeedの点数が上がるか下がるかを確かめるようにしましょう!

     

    HTMLの設定

    HTMLとはウェブページの根本となる言語です。こちらを縮小することで少しページ表示速度を早くできます。

    WordPressとAutoptimizeプラグイン:HTML Optionsの設定

     

    Optimize HTML Code? HTMLを縮小するかの設定。

    基本的にチェックを入れます。

    Keep HTML comments?  <!-- ◯◯ -->のようなHTML内のコメントを消すかどうか。

    チェック入れても入れなくてもOK。

     

    JavaScriptの設定

    JavaScriptは動きのあるページを作る時に使ったりします。記述場所によっては動作が遅くなりますので、こちらも最適化するようにしましょう。

    ただし、「チェックを入れたら動きがなくなってしまった!」ということもあるかもしれません。その時は原因となっている項目のチェックを外しましょう。

    WordPressとAutoptimizeプラグイン:JavaScript Optionsの設定

     

    Optimize JavaScript Code? JavaScriptを縮小するか。

    基本的にチェック入れます。

    Force JavaScript in <head>? JavaScriptをheadに移動するか。

    もし、JSファイルのエラーがあったら、
    このチェック入れて試してみてよ
    ってことらしい。

    Also aggregate inline JS? HTML内のJSファイルも対象にするか。

    Force JavaScript in <head>に
    チェックが入っていないなら、チェックします。

    Exclude scripts from Autoptimize: 縮小化しないファイルを指定する。

    基本的に無視です。

    Add try-catch wrapping? try-catchを追加できる。

    もしJSエラーが出ていたらチェックを入れよう。

     

    CSSの設定

    CSSはスタイルシートといって、文字の大きさや、色、Webフォントの設定をしています。

    特にGoogleフォントは読み込みに時間がかかるようなので、特殊な文字を使っていない場合は読み込まないようにしておくと高速化が期待できます。

    WordPressとAutoptimizeプラグイン:CSS Optionsの設定

     

    Optimize CSS Code? CSSを縮小するか。

    基本的にチェックを入れます。

    Generate data: URIs for images? CSS内の画像URLはデータスキーマURIにするか。

    基本的にチェックを入れます。

    Remove Google Fonts? Googleフォントを読み込まない設定にするか。

    ウェブフォントを使っていない方は
    チェックを入れます。

    チェックを入れるだけでかなり高速化できます。

    Also aggregate inline CSS? HTMLのCSSも対象にするか。

    チェックを入れて早くなるようならチェックしましょう。

    Inline and Defer CSS? AutoptimizeのCSSを遅延読み込みさせるか。

    チェックを入れて早くなるようならチェックしましょう。

    Inline all CSS? CSSはすべてインライン化するか。

    基本的にチェックを入れます。

    Exclude CSS from Autoptimize: 縮小化の対象外にするCSSを指定。

    基本的には無視でOK。

     

    CDNの設定

    WordPressとAutoptimizeプラグイン:CDN Optionsの設定

     

    CDNは画像の読み込みを、他のサーバーで読み込みさせ、負荷を分散させる方法。

    もし、CDNの設定の仕方を知っているならURLを指定しましょう。

    CDNって何?って方はこちらをどうぞ
    詳しくはこちらCDN(コンテンツ・デリバリ・ネットワーク)とは
    ⇒言ってることは初心者には分かりにくいかもしれませんが、図解されていてイメージはしやすいです。

     

    キャッシュの設定

    キャッシュとはページデータをサーバー内に残しておき、読み込みする時間を無くす方法です。

    こちらはサーバーキャッシュ。

    WordPressとAutoptimizeプラグイン:cache infoの設定

     

    キャッシュの情報が表示されます。

    最後のチェックを付けるとキャッシュを保存し続けるみたいですが、ONにすることで他の設定のチェックが外れたりするので、あとで見直しを必ず行いましょう。

     

    Autoptimizeの効果

    うまく設定することによって、Google PageSpeedのスコアを大幅に上げることができます。

    私の場合、なんと23点アップ!

     ※2017年の頃の話です。今でも点数を大きく上げる可能性がありますが、AutOptimizeのファイルのいくつかがGoogle PageSpeedの指摘に引っかかるので、100点は狙えません…。残念。

     

    Google PageSpeedのスコア

    WordPressとAutoptimizeプラグイン:GooglePageSpeedのビフォー

    AutOptimize導入前

     

    悲惨な結果から…。

     

    WordPressとAutoptimizeプラグイン:GooglePageSpeedのアフター

    AutOptimize導入後

     

    中々高得点に近づきました!

     

    Gtmetrixのスコア

    ページの表示速度をかなり詳細に分析できるGtmetrixでもやってみました。

    こちらも高速化ではお世話になるサイトです。

     

    こちらでは26点アップ!

    WordPressとAutoptimizeプラグイン:GTmetrixのビフォー

    GTmetrixでAutOptimize導入前

     

    WordPressとAutoptimizeプラグイン:GTmetrixのアフター

    GTmetrixでAutOptimize導入後

     

    これはかなりの高得点!

     

    AutOptimizeは最適化がよく分からない人でもお手軽に設定できるのが魅力

    やってみたら分かるのですが、全然コードに詳しくない方でもとりあえず設定できちゃうのがAutoptimizeのスゴさ!

    高速化は目に見えない部分で、忘れがちですが、ユーザーにとても優しいサイトになるので、ぜひ設定していきましょう!

     

    次はページキャッシュの導入です!

    次の高速化設定をしよう
    続けて読んでほしいページキャッシュの導入
    ⇒WP Fastest Cacheで、ものすごい高速化できます。

    この記事が気に入ったら
    フォローしよう

    最新情報をお届けします

    Twitterでフォローしよう