革新的な表示速度を謳ったWordPressテーマ「Godios.」

WordPressのテーマ「Godios.」は、当サイトでも利用させていただいております。

Godios.のデザインは非常にシンプルで洗練した美しさがあります。100%レスポンシブで作られており、小さい端末でも綺麗に閲覧できるように設計されています。また、デザインもさることながら一番の売りは、「革新的な表示速度」とサイト表示速度を謳うだけあり、素晴らしい恐ろしくページ表示速度が速いです。ページ表示速度が速いということは、検索エンジンの評価も得られ、UX的にも評価が高くなることは言うまでもありません。

通常ページの表示速度は、サーバーのスペックやサイトの作りが絡み合うものですが、Godios.はサイトの作りが通常とは一味違います。

高速の仕組み(1)ヘッダーなどの共通要素の読み込みを一回に

通常Webページにアクセスした際は上からしたまで、ソースに書かれている要素をすべて読み込んでから表示されます。

しかしGodios.は、ヘッダー、フッダー、サイドバーなどの共通要素を一度読み込んだらキャッシュし、別ページに飛んだ際に再度読み込まないようにしています。内容の違うコンテンツのみ非同期で切り替えているイメージです。大規模なPjaxの非同期切り替えのようなものを想像すればよいと思います。

ページ遷移しても拘束に表示されるのでキャプチャを撮るのに苦労しましたが、上記のようにページ遷移をした時にコンテンツ部分のみローディングが出て読み込んているのがわかると思います。

Godモードの有効方法

ちなみにこの機能の名前が「Godモード」と言います。Godモードはデフォルトではオフになっているので是非オンにしましょう。このテーマのメイン機能といっても過言ではありません。

Godモードの有効方法は公式サイトに以下のように記載があります。

管理画面の「外観」→「カスタマイズ」→「Godモード(非同期画面遷移)」に進み、「有効にする」にチェックをし、保存してください。

お好みで「ローディングインジケーターを表示する」にチェックを入れてください。
これでGodモードが有効になります。

Godモードの注意点

Godモードはその非同期でコンテンツを切り替えている特性上、Godios.側で用意していないJavaScriptが動かない恐れがあります

そのため広告のタグなどは、Godios.側で用意しているウィジェットやクイックタグを使用する必要があります。また、任意のJavaScriptに関しては、公式サイトに以下のように記載があります。

Godモードでは通常、メインコンテンツ(Godモードでコンテンツが入れ替わる部分)内に適用された、または書かれたJavaScriptは実行されません。

そのため、メインコンテンツ内に適用、または書かれたJavaScriptをGodモードで動作させるには遷移後に再実行してあげる必要があります。(スライダー(Swiper)、Twitter・Instagram埋め込み、アドセンス、アナリティクスの処理はデフォルトで対応済み)

遷移後に実行したい処理があれば子テーマファイルの/js/god-dispatcher.jsを開き、godDispatcher関数内に処理をお書きください。

Diosモード

プラグインをページ内で動作したい、自作のJavaScriptをページ内で使用したい方はDiosモードにしましょう。Diosモードは非同期遷移はせずに後述のプリフェッチ(事前読込み)のみ動作するモードです。

Diosモードの有効方法は公式サイトに以下のように記載があります。

 

管理画面の「外観」→「カスタマイズ」→「Diosモード」に進み、「有効にする」にチェックをし、保存してください。

これでDiosモードが有効になります。
Diosモードを有効にする場合、必ずGodモードはOFFにしてください。正常に動作しない可能性があります。

高速の仕組み(2)ページ遷移前にリンク先のプリフェッチ(事前読込み)

通常ページ遷移時の読み込みは、リンクをクリックしてから始まります。その点でもGodios.は高速化の仕組みを取り入れています。それが「プリフェッチ(事前読込み)」です。

プリフェッチについては公式サイトに下記の通り記載があります。

PCではリンクをマウスホバーした時、タッチデバイスではリンクをタッチした時にリンク先を読込み、よりタイムラグの少ない遷移を可能にします。

また,WordPressメニューの「外観>カスタマイズ>Godモード(非同期通信)>プリフェッチを有効にする」には、こうも書かれています。

タッチスタート(スマホ)時にリンク先を先読みします。

つまり、リンクを押そうとする動作をするだけでページの先読みを行っているのです。ページが切り替わる前からリンク先のページを内部的に読み込んでおくため、リンクを押したときには既にページデータの取得が完了もしくは進行していて爆速で表示することが可能になるわけです。

高速の仕組み(3)画像などに対してLazy Load(遅延読み込み)機能

Godios.には、画像やiframeなどで重い読み込みが行われる要素にLazy Load(遅延読み込み)をする機能が備わっています。Lazy Loadはページをスクロールして、その要素がブラウザに表示されるときに読み込みを行います。つまりページ遷移時には読み込みを行わないので、ページ表示速度が高速になるというからくりです。

Lazy Loadの有効方法

Lazy Loadモードもデフォルトではオフになっています。有効方法は公式サイトに以下のように記載があります。

管理画面の「外観」→「カスタマイズ」→「Lazy Load(遅延読み込み)」に進み、「有効にする」にチェックをして保存してください。

Godios.に移行する際の注意点

ここまでGodios.の素晴らしいページ高速化について説明してきましたが、どんなテンプレートでもテーマを移行した際にはいくつか注意点があります。

Godios.をテーマを設定した際に筆者が出くわした注意点を紹介します。

WordPressテーマ「Godios.」に移行する際の注意点

Godios.ダウンロード

革新的な表示速度を実現可能にした無料WordpressテーマGodios.のダウンロードはこちらから

ダウンロード