SANGOのページスピードってどうなん？
カンタンに早くできるの？
この記事ではおすすめのSANGO高速化設定をまとめていきます。
「モバイルサイトの読み込みに3秒以上かかると、訪問者の53％が離脱します」
“Top 12 marketing insights from 2017 to carry you into 2018”
Googleの2017年から2018年に調査した結果からもわかるように、ページスピードは非常に重要なポイントです。
SANGOテーマでは外部プラグインを入れずにキャッシュ機能やHTML、CSS圧縮機能などが使えるようになっています。
余計なプラグインをいれることなく簡単に高速化を図ることができます。
記事執筆時のバージョン：v3.3~
[広告]CSSの勉強におすすめ
大まかな流れ
SANGOの機能設定は左サイドバーにあるから設定していきます。
?高速化のタブを選択して設定していきましょう。
?SANGO独自の高速化設定
SANGOでは非常に多くの最適化機能が搭載されています。
バージョン3.0からはキャッシュ機能も追加されたため、外部のプラグインを入れる必要はありません。
キャッシュ機能はSANGO向けに最適化されているため、ほかのプラグインを使うより安定してキャッシュすることができます。
まずは高速化機能を一覧で見ていきます。
設定方法は下で解説していきます。
| 一度読み込んだページをキャッシュする | キャッシュ機能です。ページ読み込み速度、レスポンスを改善します。 | |
| HTMLを圧縮してキャッシュする | HTMLソースを圧縮して転送量を減らします。 | |
| SANGOテーマのCSSをインラインで読み込む | 転送ファイルを減らしインラインで読み込みます。 | |
| SANGOテーマのJavaScriptをインラインで読み込む | 転送ファイルを減らしインラインで読み込みます。 | |
| 圧縮されたCSSを読み込む | CSSソースを圧縮して転送量を減らします。 | |
| SANGOテーマの2系以前のCSSを読み込まない | 読み込みファイルを減らします。クラシックエディタで書いた記事がある場合はチェックしないことをおすすめします。 | |
| カスタムCSSのfooter出力を停止する | 重複するCSS記述を停止します。※外部のキャッシュプラグインを使う場合はチェックしないことをおすすめします。 | |
| jQueryを読み込まない | jQueryの読み込みを停止し転送量を減らします。 | |
| 絵文字用のJSを読み込まない | 絵文字を使うため読み込まれるJavascriptファイルを停止します。 | |
| Googleフォントを読み込まない | 容量の大きいフォントファイルの読み込みを停止します。 | |
| メインコンテンツ外の画像の遅延読み込み | ウィジェットや記事下の画像を遅延読み込みさせます。 | |
| 記事内のiframeやscriptの遅延読み込み | TwitterやYouTubeなどの埋め込みは重いため、遅延させることで読み込み速度を改善します。 | |
| スクリプトの遅延読み込み | 入力したURLやキーワードのスクリプトを遅延読み込みします。 |
設定項目が豊富ですね！ここからは詳しい機能説明や設定方法を見ていきます。
キャッシュ設定
ログインしていないユーザーにキャッシュされたページの情報を配信します。
毎回ページを生成する手順を省略することができるため、表示速度が改善されます。
基本的には有効化しておきましょう。
キャッシュを削除は投稿したりカスタマイズを変更するときに自動で削除されます。
キャッシュが消えないときは管理画面上部のボタンを押してキャッシュを手動削除しましょう。
- 投稿やカスタマイザー、ウィジェットを保存したタイミング
- 管理画面上部メニューからキャッシュ削除をクリックする
キャッシュが有効な際に、HTMLを圧縮してキャッシュします。
ファイル内の不要な改行や空白、コメントアウトを削除してくれます。これにより転送量が削減され高速化につながります。
基本的には有効化しておきましょう。
インライン設定
テーマのCSSを外部ファイルではなく直接読み込むことで、読み込むファイルを減らし高速化につながります。
基本的には有効化しておきましょう。
テーマのJavascriptを外部ファイルではなく直接読み込むことで、転送ファイルを減らし高速化につながります。
基本的には有効化しておきましょう。
アセットの読み込み設定
CSSソースを圧縮して転送量を減らします。ファイル内の不要な改行や空白、コメントアウトを削除してくれます。
これにより転送量が削減され高速化につながります。
基本的には有効化しておきましょう。
主にクラシックエディターなどの装飾用のCSSの読み込みを停止します。
クラシックエディターで書いた記事がない場合やリライトを終えた場合は有効化しておきましょう。
クラシックエディターで書いた記事が残っているとその記事のデザインが崩れてしまう恐れがあります。
古い記事がない場合はチェックするとよいでしょう。
外部キャッシュプラグイン対策で出力される、重複するCSS記述を停止します。
正常に動作しなくなる恐れがあるため、外部のキャッシュプラグインを使う場合はチェックしないことをおすすめします。
jQueryの読み込みを停止し転送量を減らします。
SANGO3.0ではjQueryは使われていませんが、外部プラグインがjQueryに依存していて必要な場合はチェックしないようにしましょう。
絵文字を使うため読み込まれるJavascriptファイルを停止します。
容量が少し大きいため停止すると高速化につながります。
容量の大きいフォントファイルの読み込みを停止します。
数字やタイトルなどに使われるQicksandというフォントの読み込みが停止されます。
さらに高速化したい方は有効化しておきます。
遅延読み込み及び先読み設定
サイドバーや記事下にある画像を遅延読み込みさせます。
すぐに表示される画像ではないので遅延させておきましょう。
TwitterやYouTubeなどの埋め込みは重いため、遅延させることで読み込み速度を改善します。
埋め込みを多く使っている場合は特に、オンにしておくと効果的です。
新機能で追加された、スクリプトを遅延して読み込む機能です。
[広告]CSSの勉強におすすめ
?その他やっておきたい高速化・最適化
- PHPなどのバージョンを最新にしておく
- 画像サイズを圧縮して最適化する
古いPHPバージョンを使っているとパフォーマンスが悪かったり、セキュリティ的に問題があったりする可能性があります。
安定している最新版を利用するよう心掛けましょう。
画像をそのままアップロードすると非常にサイズが大きく読み込み速度が低下することがあります。
特にスマホで撮った写真はサイズが大きいので圧縮しておきましょう。
EWWW Image OptimizerやTinyPNGというプラグインを使うことで簡単に画像を最適化することができます。
SANGO 3.0では、SANGO設定の✏カスタマイズからおすすめのプラグインを簡単にインストールすることができます。
インストールボタンを押し有効化を押すと簡単にインストールできます。
?高速化に関する注意
- 外部のプラグインと相性が悪い可能性があります。SANGO3.0からはテーマ側にキャッシュ機能があるため、そちらを利用しましょう
- Autoptimizeなどの高速化プラグインは機能がかぶるため不要になります。
- WP Super Cache や W3 Total Cache、LiteSpeed Cacheなどは機能が重複し、思わぬ不具合を起こす可能性が高いです。どちらか一つを使用しましょう。
[広告]CSSの勉強におすすめ
まとめ
ここまでSANGOテーマの高速化設定について解説しました。
SANGOは高速化設定が非常に充実しているため、いろいろなところで推奨されているキャッシュプラグインや最適化プラグインは不要になります。
プラグインを減らすことができ不具合も起きにくいため、ぜひSANGO標準機能の高速化機能を使うのがおすすめです。
ご質問・相談など
その他
SANGO FUNはWordPressテーマSANGOの魅力、使い方やカスタマイズを解説するサイトです。
この記事がお役に立ちましたら、ぜひほかのSANGOユーザーさんにも広めて頂けるととてもうれしいです。
Twitterでの拡散やフォローをお待ちしています！
めっちゃおすすめ
