BLOG運営 カテゴリー

WP Autoptimizeの使い方と設定方法【サイト表示速度改善】

サイトの速度が上がらない

HTML.CSSとかは苦手

そんな人の悩みを解決します!

 

簡単にクリックだけでサイト表示速度改善に効果的なAutoptimizeの使い方を紹介します。

CSSやJSなどのリソースを軽量・最適化してくれるプラグイン

「レンダリングを妨げるリソースの除外」の部分の改善を図るプラグインとなります。

 

誰でも簡単にできて作業時間は5分程度です。

※WP使用者向けの記事になります。

 

効果としては

PC表示が70台→90台

モバイル表示が40台→80台

まで改善できました。

 

 

 

 

 

 

 

 

先ずは自分のサイト表示速度を測定してみましょう! 

pagespeedinsights(測定サイト)

Autoptimize導入方法

 

 

 

 

 

Autoptimizeを新規プラグインからダウンロード→有効化しましょう。

 

Autoptimize設定方法

JavaScript オプション

 

 

 

これは上2つをチェックをしといて下さい。

インラインのJS 自分はサイトの構造的にしてますが基本は入れなくて問題ないです!


JSなどが動かなくなったりした場合のみ

<head> 内へ JavaScript を強制

try-catch の折り返しを追加

にチェックを入れましょう。

 

CSS オプション

 

 

 

 

CSS コードを最適化

Aggregate CSS-files?

インラインの CSS を連結

にチェックを入れときましょう。

 

HTML オプション

 

 

 

HTML コードを最適化だけにチェックを入れときましょう。

 

その他

 

 

 

連結されたスクリプト / CSS を静的ファイルとして保存

にチェック入れとけばOK!

上記が終わったら「変更を保存してキャッシュを削除」します。

 

追加タブ

 

 

 

webfont.js で非同期にフォントを結合して読み込む

絵文字を削除

も設定しとくと良いです。

 

Autoptimize使用上の注意

同時に違う圧縮系のプラグインを使わない

作業前に必ずバックアップする

 

他の圧縮プラグインと合わせて使うとエラーが発生する場合がありますので注意して下さい。

またデザインが崩れたりする場合があります。

必ずバックアップを取っとくいいです。

 

不安な人は1つの項目毎にサイトの状態を確認しながら作業を進めるとストレスフリーになります。

まとめ

「レンダリングを妨げるリソースの除外」に対策を施す事でサイトの表示速度は大きく改善される場合が多いです。

是非試していない人は試して下さい。

合わせてやっとくと効果的な事

キャシュ系のプラグインを使用

画像の圧縮

 

  • この記事を書いた人

ATSUSHI

大学中退し29歳まで音楽活動をしながらバイトで生活したものの危機感を覚え29歳にして初めて就職活動。バンド活動で培ったマインドや行動力やノウハウを活かして会社員をしながらブログ運営と独学でプログラミング学習。 自分自身で生きる力をつけれるような情報を随時発信。

-BLOG運営, カテゴリー

Copyright© A.S.L Blog , 2020 All Rights Reserved Powered by AFFINGER5.