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

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

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

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

どうも、ソルティーです!

 

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

詳しくはこちら

第一弾: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を指定しましょう。

 

キャッシュの設定

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

こちらはサーバーキャッシュ。詳しくはこちらを見ると何となく分かるよ!

 

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

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

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

 

Autoptimizeの効果

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

ぐにらぼの場合、なんと23点アップ!

 

Google PageSpeedのスコア

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

GooglePageSpeedのビフォー

悲惨な結果から…。

 

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

GooglePageSpeedのアフター

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

 

Gtmetrixのスコア

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

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

 

こちらでは26点アップ!

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

GTmetrixのビフォー

 

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

GTmetrixのアフター

これはかなりの高得点!

 

まとめ:よく分からない人でもお手軽に設定できるのが魅力

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

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

 

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

詳しくはこちら
ページキャッシュの導入
⇒WP Fastest Cacheでものすごい高速化できます。

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

最新情報をお届けします

Twitterでフォローしよう