【SANGO高速化】表示スピードを改善する簡単な方法

おとこのこ
おとこのこ

SANGOのページスピードってどうなん?

カンタンに早くできるの?

この記事ではおすすめのSANGO高速化設定をまとめていきます。

「モバイルサイトの読み込みに3秒以上かかると、訪問者の53%が離脱します」

“Top 12 marketing insights from 2017 to carry you into 2018”

Googleの2017年から2018年に調査した結果からもわかるように、ページスピードは非常に重要なポイントです。

SANGOテーマでは外部プラグインを入れずにキャッシュ機能やHTML、CSS圧縮機能などが使えるようになっています。
余計なプラグインをいれることなく簡単に高速化を図ることができます。

記事執筆時のバージョン:v3.3~

大まかな流れ

SANGOの機能設定は左サイドバーにある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やキーワードのスクリプトを遅延読み込みします。 必須
のじはた
のじはた

設定項目が豊富ですね!ここからは詳しい機能説明や設定方法を見ていきます。

キャッシュ設定

一度読み込んだページをキャッシュする 重要

ログインしていないユーザーにキャッシュされたページの情報を配信します。

毎回ページを生成する手順を省略することができるため、表示速度が改善されます。

基本的には有効化しておきましょう。

キャッシュを削除する

キャッシュを削除は投稿したりカスタマイズを変更するときに自動で削除されます。
キャッシュが消えないときは管理画面上部のボタンを押してキャッシュを手動削除しましょう。

  1. 投稿やカスタマイザー、ウィジェットを保存したタイミング
  2. 管理画面上部メニューからキャッシュ削除をクリックする

HTMLを圧縮してキャッシュする重要

キャッシュが有効な際に、HTMLを圧縮してキャッシュします。
ファイル内の不要な改行や空白、コメントアウトを削除してくれます。これにより転送量が削減され高速化につながります。

基本的には有効化しておきましょう。

インライン設定

SANGOテーマのCSSをインラインで読み込む 重要

テーマのCSSを外部ファイルではなく直接読み込むことで、読み込むファイルを減らし高速化につながります。

基本的には有効化しておきましょう。

SANGOテーマのJavaScriptをインラインで読み込む 重要

テーマのJavascriptを外部ファイルではなく直接読み込むことで、転送ファイルを減らし高速化につながります。

基本的には有効化しておきましょう。

アセットの読み込み設定

 圧縮されたCSSを読み込む 重要

CSSソースを圧縮して転送量を減らします。ファイル内の不要な改行や空白、コメントアウトを削除してくれます。

これにより転送量が削減され高速化につながります。

基本的には有効化しておきましょう。

SANGOテーマの2系以前のCSSを読み込まない 推奨

主にクラシックエディターなどの装飾用のCSSの読み込みを停止します。

クラシックエディターで書いた記事がない場合やリライトを終えた場合は有効化しておきましょう。

クラシックエディターで書いた記事が残っているとその記事のデザインが崩れてしまう恐れがあります。

古い記事がない場合はチェックするとよいでしょう。

カスタムCSSのfooter出力を停止する

外部キャッシュプラグイン対策で出力される、重複するCSS記述を停止します。

正常に動作しなくなる恐れがあるため、外部のキャッシュプラグインを使う場合はチェックしないことをおすすめします。

jQueryを読み込まない

jQueryの読み込みを停止し転送量を減らします。

SANGO3.0ではjQueryは使われていませんが、外部プラグインがjQueryに依存していて必要な場合はチェックしないようにしましょう。

絵文字用のJSを読み込まない

絵文字を使うため読み込まれるJavascriptファイルを停止します。
容量が少し大きいため停止すると高速化につながります。

 Googleフォントを読み込まない

容量の大きいフォントファイルの読み込みを停止します。

数字やタイトルなどに使われるQicksandというフォントの読み込みが停止されます。
さらに高速化したい方は有効化しておきます。

遅延読み込み及び先読み設定

メインコンテンツ外の画像の遅延読み込み

サイドバーや記事下にある画像を遅延読み込みさせます。

すぐに表示される画像ではないので遅延させておきましょう。

記事内のiframeやscriptの遅延読み込み

TwitterやYouTubeなどの埋め込みは重いため、遅延させることで読み込み速度を改善します。

埋め込みを多く使っている場合は特に、オンにしておくと効果的です。

スクリプトの遅延読み込み

新機能で追加された、スクリプトを遅延して読み込む機能です。

🚀その他やっておきたい高速化・最適化

  • PHPなどのバージョンを最新にしておく
  • 画像サイズを圧縮して最適化する

PHPなどのバージョンを最新にしておく

古いPHPバージョンを使っているとパフォーマンスが悪かったり、セキュリティ的に問題があったりする可能性があります。

安定している最新版を利用するよう心掛けましょう。

画像サイズを圧縮して最適化する

画像をそのままアップロードすると非常にサイズが大きく読み込み速度が低下することがあります。

特にスマホで撮った写真はサイズが大きいので圧縮しておきましょう。

EWWW Image OptimizerTinyPNGというプラグインを使うことで簡単に画像を最適化することができます。

SANGO 3.0では、SANGO設定の✏カスタマイズからおすすめのプラグインを簡単にインストールすることができます。

インストールボタンを押し有効化を押すと簡単にインストールできます。

🚀高速化に関する注意

  • 外部のプラグインと相性が悪い可能性があります。SANGO3.0からはテーマ側にキャッシュ機能があるため、そちらを利用しましょう
  • Autoptimizeなどの高速化プラグインは機能がかぶるため不要になります。
  • WP Super Cache や W3 Total Cache、LiteSpeed Cacheなどは機能が重複し、思わぬ不具合を起こす可能性が高いです。どちらか一つを使用しましょう。

まとめ

ここまでSANGOテーマの高速化設定について解説しました。

SANGOは高速化設定が非常に充実しているため、いろいろなところで推奨されているキャッシュプラグインや最適化プラグインは不要になります。

プラグインを減らすことができ不具合も起きにくいため、ぜひSANGO標準機能の高速化機能を使うのがおすすめです。

コメントを残す

コメント欄は記事内容の質問などにご活用ください。すべての質問にはお答えできませんので予めご了承ください。
テーマのリクエストや機能の質問はSANGOフォーラムに直接ご質問ください。