AMPとPWAの設定
こんにちは！Jimmyです。
本日でTHE THOR（ザ・トール）導入3日目です。
備忘も兼ねて、このテーマの設定の記事を書いています。
大まかな設定は完了しましたが、今日は、よくわからず後回しにしていた箇所の設定をすることにしました。
まずは、AMPとPWAです。
今までに、聞いたことの無い言葉です。
テーマを選ぶ際に色々調べていましたら、比較サイトで、一覧表にPWAやAMPが○、×で示されていたことを思い出します。
選んだ当時は、デザインや値段、わかりやすさなどの評判に気を取られ、細かいことは気にしませんでした。
カスタマイズ画面から一つ一つ設定していたら、AMPとPWAの設定箇所に行き着きました。
そろそろ調べるか、、と思いようやく調べてみたのでした。
AMPの設定
Accelerated Mobile Pagesの略でアンプと読むそうです。
GoogleとTwitterが共同で策定したモバイルページの高速化プロジェクトで、言ってみればスマートフォンで見たときに高速表示される技術という理解でよいかと思います。
最近、世界的な企業でもAMPへの対応を表明している会社が増えており、この動きは加速していくだろうと予想されています。
ユーザーフレンドリーを意識した施策の一環のようですが、このAMP機能が、THE THORでは標準装備されており、簡単に設定が可能ということです。
メリットは何かあるのでしょうか。
どうやら以下のようなメリットがあるようです。
- 表示速度が上がり、ユーザーに見られやすくなる。
- Googleが推奨しているため、導入すると検索結果の上位表示が期待できるかもしれない。
- 検索結果のカルーセル表示（写真とテキスト）される（必ず表示されるわけではない）。
一方デメリットも指摘されています。
- デザインやコンテンツの表示が崩れる可能性がある。
- 広告を貼っている場合、一部の広告タグしか表示されなくなる。
- 発展途上の技術のため、色々な管理、更新に目を光らせる必要がある。
これらを考慮した結果、私はとりあえずAMP設定は保留としました。
よくわからない表示エラーが出ても、自分では対応できないと思ったからです。
もう少し事例を研究してから設定しようと思います。
追伸
その後、しばらくはAMP機能を利用しませんでしたが、Googleコンソールにて、サイトの表示スピード測定で低速（エラー）と表示されたのをきっかけに、高速化を検討することになりました。
高速化のためにはAMPが有効だということで、思い切ってAMPを導入してみました。
AMPでは適応していないコードが入っていてエラーが発生したり、画像のwidth、heightが指定されていないという理由でエラーが出たり、事前に調べた評判通り、面倒なエラーと作業が度々発生しました。
一方で、表示速度は上がりました。
エラーとの戦いはあるものの、速度アップやGoogle推奨に沿った運営をするのであれば、導入してみるのもよいかもしれません。
PWAの設定
次は、PWAです。
Progressive Web Appsの略で、これもモバイルユーザー向けの施策のようです。
Googleが中心になって策定されており、スマートフォンのホーム画面に追加することで、アプリのような挙動をすることができる仕組みということです。
スマートフォンのアプリのようにして使うことができるということです。
- 表示速度の向上。
- オフラインでもページ遷移できる。
- プッシュ通知利用可能。
この機能が、標準装備でTHE THORにはついているということです。
これは、特段デメリットはなさそうです。
設定することにしました。
とても簡単です。
１、設定画面で、PWAを「有効」にする。
２、タイトル（アイコンの下に表示される文字）を入力する。アプリ名のような感覚。
３、アイコンを設定する。
どれほどの効果があるかはわかりませんが、技術は日々進化していることがわかりました。
今後当たり前になってくるかもしれません。
標準装備されているテーマは、まだ少ないようです。
THE THORは、AMP、PWAともに標準で備わっており、ユーザーフレンドリーの意識の高さが伺えます。
追伸：更新結果が表示されない問題発生！（初心者だからわからないこと）
PWAを有効にすると、記事を投稿したり更新したりしてもなぜかサイトに表示、反映されないということが続くようになりました。
これは、表示速度を徹底的に追求した仕組みから由来するもので、キャッシュが残っているため更新後の状態が反映されないということがわかりました。
頻繁に更新する人にとっては面倒ですが、更新後の表示を確認したい場合は、一度キャッシュを消去する必要があります。
Chromを使っている人であれば、ブラウザ画面右上をクリック→履歴→閲覧履歴データの削除→キャッシュを選択して消去という流れですぐに消去できます。
Googleアナリティクスで自分とロボットのアクセスを除外
テーマをTHE THORに変更したことで、使わなくなったプラグインがあります。
「Jetpack」です。
ダッシュボードを見れば、その日のPV数や、閲覧されたページがすぐにわかるので重宝していました。
しかし、調べていると、THE THORと相性が悪いプラグインであることがわかったので、停止することにしました。
これからは、GoogleアナリティクスでPV数などを管理していくことにしました。
今までJetpackばかり見ていた理由は、ズバリ簡単だったからです。
Googleアナリティクスは、PV数や表示されたページの結果が不自然に感じられることが多くありました。
PV数やユーザー数が明らかに実態と違った形で急激に増えることがあったのです。
原因は、自分のアクセスとロボットのアクセスだろうと想像がつきました。
色々な設定が面倒であったため、Jetpackを愛用していたのですが、改めてアナリティクス を設定することにします。
まずはロボットの除外です。
アナリティクス の画面左下の管理画面をクリックし、下図の画面を開きます。右上のビューの設定を開きます。ボットのフィルタリングの欄にチェックを入れれば完了です。
次は、自分のアクセスの除外です。
はじめ、フィルタで自分のIPアドレスを除外しようと考えましたが、固定アドレスではないため無意味でした。
そこで、Googleのプラグインを導入することにしました。
Googleアナリティクス オプトアウトアドオン です。
これをダウンロードし、Chromに追加、拡張機能追加を順にクリックすれば設定完了です。
これで、自分のアクセスをカウントされることは無くなります。
注意事項としては、スマホやタブレットからのアクセスは除外できないことです。
Googleアナリティクスをよく見てみると、セッション数、表示数、ユーザー数など色々な情報が見れるようなので、今後はこれを使って分析していくことにします。
追伸：自分のスマホからのアクセスカウント除外
自分のスマホからのアクセスを除外する場合は、広告をブロックできるブラウザアプリをスマホでダウンロードすることで解決します。
iPhoneでもアンドロイド携帯でも、アプリ検索画面で、「ad block」などで検索すればいくつも出てきます。
このブラウザを利用してアクセスし、アナリティクスのリアルタイム機能で閲覧数がカウントされていなければ成功です。
THE THORに導入されている機能は、理解すれば、かなり重宝するものであることがわかってきました。
まだ3日目ですが、有料で買っただけの価値はあったのではないかと感じています。
THE THORはこちら
【圧倒的にSEOに強く・上位表示されやすいWordPressテーマ】 THE・THOR(ザ・トール)｜テーマ＆サポートプラン
以上、ここまで読んでいただいてありがとうございました。
あわせて読みたい
THE THOR導入1日目、テーマ変更前にやるべきことと購入手続
THE THOR導入2日目、エディターにラベルやマーカーが表示されない？
通常本ブログでは、「幸福感を持って自分の人生を生きる」ことをテーマに、仕事、人生における考え方を取り扱っています。興味のある方はぜひトップページへからご覧になってください。