WordPressならAutoptimizeプラグインでHTML,JavaScriptの圧縮をするべき

AutoptimizeでカンタンにWordPressを最適化!
The following two tabs change content below.
塩畑 貴志
フリーランスパソコンファシリテーターの塩畑 貴志(ソルティー)ともうします。フリーランスの起業に必要な知識、パソコンの使い方、ブログ・SNSを活用したアクセスアップ方法を教えています。ネットだけでなく、アナログまで幅広く考え、一番効果的な方法を一緒に見つけます。「とりあえずやってみる」がモットー。困っている人は放っておけないタイプ。カラオケ好きのネコ派です。

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

 

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

第一弾

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

キャッシュの設定

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

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

あわせて読みたい

【Webキャッシュサーバー】

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のスゴさ!

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

この記事はぐにらぼで掲載していた記事を移転し、Pasolack用に加筆・修正したものです

 







AutoptimizeでカンタンにWordPressを最適化!

\ ワークシート 無料配布中 /

ネットマーケティングを加速する!
やりたいことを実現する超実践的ワークシート

私のノウハウを目一杯つぎ込んだ、ネットマーケティングを加速する!やりたいことを実現する超実践的ワークシートを無料でなんと3冊配布することにしました。

①ブログの目的と内容を明確化する!ワークシート

②誰に向けて事業をするのか?ペルソナ設定ワークシート

③狙えニッチなキーワード!キーワード設定ワークシート

これは実際に事業で使っている実例のあるワークシートです。

あなたの事業に役立てられるよう今のうちにゲットしてください。

ABOUTこの記事をかいた人

塩畑 貴志

フリーランスパソコンファシリテーターの塩畑 貴志(ソルティー)ともうします。フリーランスの起業に必要な知識、パソコンの使い方、ブログ・SNSを活用したアクセスアップ方法を教えています。ネットだけでなく、アナログまで幅広く考え、一番効果的な方法を一緒に見つけます。「とりあえずやってみる」がモットー。困っている人は放っておけないタイプ。カラオケ好きのネコ派です。