【WordPress】AutoOptimizeプラグインでHTMLや、CSSを縮小してウェブサイト高速化

↓役だったらシェアしていただけると嬉しいです!

HTMLやCSSを縮小して、ウェブサイトを高速化!
この記事の所要時間: 644
社長
む〜、まだまだサイト表示高速化には遠いわ……
ぐに
社長、珍しく本気で取り組んでますね
社長
これだけ頑張ってるのに低い点数ってのが悔しいのよ!
ぐに
じゃあ、次はコードの縮小をして高速化を狙ってみましょう!
スポンサーリンク

高速化にはページのデータを少なくする

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

ダウンロードと言うと、アプリケーションをインストールする際のイメージが強いですが、実はウェブページを閲覧する際にもダウンロードが毎回行われているのです。

そのため、ダウンロードするデータが多ければ多いほど高速化が遠のいてしまいます。

高速化するにはダウンロードするページのデータ(転送量)を少なくする必要があるのです。

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

ページのデータを少なくするには下記の2つのデータを少なくすればOKです。

  • コード(HTML、CSS、Java、PHPなど)
  • 画像

画像は単純にサイズを変えるなど、カンタンにデータを小さくできます。

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

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

AutoOptimizeでコードを縮小しよう

コードを削除したり、短縮することは難しいのは分かったと思います。

しかし、WordPressをお使いの方であれば、AutoOptimizeというプラグインを使って、カンタンにコードを縮小できます。

AutoOptimizeの効果

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

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

Google PageSpeedのスコア

Gtmetrixのスコア

GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable ...

こちらも高速化の参考になるサイトです。こちらでは26点アップ!

AutoOptimizeの設定

AutoOptimizeは有効にすればOKというワケではありません。自分のウェブサイトの状態によって最適な設定は変わります。

そのため、一つひとつチェックを入れて点数が上がるか下がるかを確かめるようにしましょう!

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

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

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

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

HTMLの設定

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

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

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

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

JavaScriptの設定

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の設定

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?AutoOptimizeのCSSを遅延読み込みさせるか。
Inline all CSS?CSSはすべてインライン化するか。
Exclude CSS from Autoptimize:縮小化の対象外にするCSSを指定。

CDNの設定

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

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

▼CDNについて▼

画像、動画、アプリなど大容量ファイルの高速配信、海外向けウェブサイトの高速化、ウェブアプリケーションの高速化、DDoS攻撃対策やWAFなどをクラウド型で提供するCDN(コンテンツ・デリバリ・ネットワーク)について図表を交えて解説

キャッシュの設定

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

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

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

社長
すごい!めっちゃ点数上がったわ!
ぐに
良かったですね
社長
これって縮小されたものを元に戻せるの?
ぐに
チェックを外したり、プラグインを無効化すれば元通りですので気軽に試してみてくださいな
The following two tabs change content below.

ぐに

社長の隣Pasolack
“できないをできるに変える” ってことをやってます。ぐにらぼもその一環。 FMラヂオのパーソナリティーやったり、大学でICTの講義したり、いろいろと飛び回ってます(^^) 夢は “学校の先生の負担を軽減して、子供たちと接する時間を増やす取り組みを増やす” こと。
スポンサーリンク

↓役だったらシェアしていただけると嬉しいです!

↓更新情報を取得できます

目安箱

目安箱

ぐにらぼではできないという声を集めています。今の困り事などをお送りすると記事になるかもしれません。

返信が欲しい場合は、お問い合わせ

名前 (ニックネーム可)

メッセージ本文

ぐにらぼメルマガ登録

無料で集客方法が学べる!ぐにらぼメールマガジン

Webライティング・マーケティングのノウハウが学べるコンテンツを、ぐにらぼオススメ記事とともに月一回無料でお届けします。