現在デフォルトスキンとして「Season (Autumn)」を適用中。

PWA設定を行ってモバイル環境の高速化を行う方法

テーマ設定
この記事は約4分で読めます。

Cocoonには以前から高速化設定はありました。

Cocoonおすすめのサイト高速化設定
Cocoonと相性の良いページの高速化設定方法の紹介です。Cocoonデフォルト機能だけでも十分にPageSpeed Insightsで高得点が狙えます。加えて、ページキャッシュプラグインや、画像最適化プラグインを利用すれば、より良い良いパフォーマンスを目指すことも可能かと思います。

上記の設定行って、テーマデフォルトの状態で、デベロッパーツールのLighthouse計測を行うとこんな感じ。

PWA無効状態

これまでPWAに対応していなかったので、「PWA(Progressive Web Apps)」のスコアは低いものでした。

ただ、せっかくここまで対応させたのだから、

PWA機能にも対応したい。

ということで、PWAに対応させました。

でスコアを計測してみたらビックリ。満点が取れました。

PWAで満点

Lighthouseテスト結果

プラグインや外部リソースを読み込んでいないデフォルトテーマ機能のみでの計測です。サーバーの状態や設定状態によってはスコアは前後します。

以下では、CocoonテーマをPWAに対応させる方法を紹介します。

PWA機能は現在β機能となっています。PWAはブラウザーなどキャッシュの扱いに影響が出ます。なので仮に問題があったとしてもキャッシュを操作して対応できる方はご利用ください。
現在のところ、しっかりと動作確認できる方のみの利用をおすすめします。利用するにしても、あまり収益とかに関係ないサブサイトとかでお試しください。
スポンサーリンク

PWAの対応方法

PWA(Progressive Web Apps)に対応させる方法は簡単です。

Cocoon設定の「PWA」タブから「PWAを有効化する 」を有効にして保存するだけです。

有効化することで、PWA機能が有効化されスマートフォンからサイトがアプリのように利用できます。

デフォルトでログインしている管理者には、PWAは適用されない仕様になっています。管理者にもPWAを適用するには「管理者ログイン時もPWAを有効にする」を有効にしてください。

その他の設定についても説明しておきます。

名前

PWAの名前設定

「アプリ名」にはWEBアプリとして表示される名前を入力します。

「短いアプリ名」にはホーム画面のアプリアイコンの下などに表示される「短縮名」を入力します。

「短いアプリ名」は仕様上、12文字しか表示されません。13文字以降は自動的に切り捨てられるので、必ず12文字以下の名前を設定してください。

説明文

アプリの説明文を入力してください。最大132文字まで。

アプリの説明文を入力します。

デフォルトでは、サイトのキャッチフレーズが採用されます。最大132文字までなので、長いキャッチフレーズを入力している場合は、短縮する必要があります。

アプリ配色

PWAの色の設定

アプリで表示する際の「テーマカラー」と「背景色」を設定することが可能です。

表示モードの設定

インターフェースの表示モードの設定です。

「表示モード」では以下のようにインターフェースを変更できます。

“fullscreen”
利用可能な表示エリアがすべて使用されます。

“standalone”
ブラウザの UI が非表示になるためネイティブアプリのように表示できます。

“minimal-ui”
standalone のような外観や操作感になりますが、ナビゲーション制御のために最小限の UI を表示します。どの UI が表示されるかは、ブラウザによって異なります。

“browser”
ブラウザの UI がそのまま表示されるため、ブラウザで通常のページを開いているような外観や操作感になります。

引用 Progressive Web App を始めよう | murashun.jp

画面の向き

画面の縦方向、横方向の向きを設定します。

スマホで表示する際の画面の向きを設定します。

通常は回転を許可するanyで良いでしょう。

動作確認

各種評価ツールのスコアはこちら(テーマデフォルト)。

PageSpeed Insights

モバイルでもパソコンでも90点以上はコンスタントに取れるかと思います。

PageSpeed Insightsモバイル

PageSpeed Insightsパソコン

モバイルサイト速度チェック

モバイルサイト速度も「特に良好」です。

モバイルサイト速度チェック

Lighthouse

Lighthouseの結果。PWAにチェックマークがつきます。

Lighthouse

Chromeのデベロッパーツールのもの。サーバーの状態がよければオール100点満点も出ました。

PWAに対応を後

GTmetrix

GTmetrixも双方A評価。

GTmetrix(PWA)

WEPPAGETEST

WEPPAGETESTもCDN以外はA評価(※CDNは設定してないので)。

WEPPAGETEST

注意

上記の計測結果は、テーマのデフォルト状態で、外部リソースやプラグイン等を利用していない状態での計測です(高速化設定のみ適用)。

実使用環境になると、広告やアクセス解析、SNSフォローボタン等のタグがあるのでもっと点数は下がると思います。

サイトアイコンはPNG画像を設定してください

PWAのアイコンはPNG画像が推奨されています。

ですので、WordPressのサイトアイコン設定でJPEG画像が設定されている場合は、以下のようなエラーが出ます。

PWAのアイコンエラー

サイトアイコンの設定方法は、以下を参照してください。

サイトアイコンを設定する方法(ファビコン、アップルタッチアイコン等の設定)
テーマ用のファビコン、アップルタッチアイコン、マイクロソフトメトロスタイルの、タイル表示に使用するアイコンの設定です。

まとめ

こんな感じで、それなりに高いスコアは出るかと思います。

ただ残念なことに、こういった計測ツールで高スコアであろうとも、SEO的にほぼほぼ影響はないと思います(よっぽど表示が遅くない限りは)。

やはり、Google等に評価されるのは、内容。つまりコンテンツです。

いくらサイトスピードが速かろうが、「良いコンテンツ」以上のSEO効果なんてありません。

検索順位などは「いかに検索ユーザーの需要を満たす記事が書けているか」に尽きると思います。

ページ表示が高速になったからといって、コンテンツに対する価値が上がるわけではないので、無理に機能を利用する必要はないと思います。

テーマ設定
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:11ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント テーマの質問はフォーラムへ

タイトルとURLをコピーしました