どうも！
Ganapatiです。
はてなブログはとても素敵なブログサービスだと思うのですが、『自由にコンテンツを作りたい』と思うとやっぱり不便さが出てきてしまいます。
「不便さ＝シンプルさ」でもあるのですが、自分のスキルを磨くためにもWordpressにも挑戦してみることは決して無駄ではないと思うのです。
ようやくWordpressサイトが完成！
ちょっと前の投稿からすでに「Wordpressでサイトを作っています」的な案内はしていたのですが、ようやく完成しました。
とはいっても骨組みのみです。
コンテンツはこれから入れ込むところです。
とはいえ、あとは記事を書きながらカテゴリを増やしていくだけとも言えますので自分の承認欲求のためにあえて発表することにしました。
※【5月2日追記】以下のwebサイトですがプラグインにマルウェアが見つかったため閉鎖しています。復活したらまた公開します。
https://mtz.lifemake.design/mtz.lifemake.design
これから「稼ぐこと」をテーマにしていろいろ書いていく予定です。
なぜこのテーマにしたかといえば・・・昔から「稼ぐこと」が好きでいろいろチャレンジし失敗も成功もしてきた経験を形にしたいと思ったからです。また、これからますます「稼ぐ力」が大事になってくるからです。
そういえば2011年頃に「稼ぐこと」にこだわったコンテンツを作ろうとしたらいろいろ白い目で見られました。「儲けること」＝「悪」みたいな雰囲気がまだまだあったんですよね。
今は逆に政府が「稼ぐ力」をテーマに政策発表をするくらいです。いい世の中になったものです。。。
Wordpressサイト構築でこだわったところは爆速！
今回は中身よりもWordpressサイトの作り方そのものの話をさせてください。
今回、Wordpressサイトを作るにあたってこだわった1番のポイントは「爆速表示」です。
といっても、本当に爆速にするには静的コンテンツにしなければなりませんので動的コンテンツのWPでできるところまで・・・という感じです。
基準となるのは表示まで2秒以下。
配信データは２MB以下
これは私自身最近感じる「ストレスなく読めるサイトの最大値」です。
ちなみにAMPは1秒以下で表示されるので素敵ですよね。このブログもつい先日AMPに対応させました。AMPはデザインが崩れることが多いが欠点ですが。。。
何故爆速にこだわったのかといえば「コンバージョンが高くなるから」です。
新しいサイトで何かコンバージョンを目指すわけではありません。
しかし「コンバージョンが高い」=「見ているサイトを通じて問題を解決しようと思って行動した」ということです。
そして私はそういうサイトを作りたいのです。
爆速化の結果は・・・
ワードプレスを立ち上げて公開するまでの表示速度の変化を書いておきます。
なお、利用サーバーはエックスサーバーです。独自SSLを使用しています。一般的なサーバーですね。
Step1 WPを立ち上げテーマをあてた直後
テーマは海外テーマ「Typology」にしています。テーマ内の英語を日本語に置き換えるシステムが最初からあるので安心して使用できるテーマです。
この段階でのスコアですがPagespeedInsight（PI）とGTMetrix（GT)で計測したところ以下のようになりました。
| Mb(PI) | PC(PI) | PS(GT) | YS(GT) | 表示(秒) | Size |
|---|---|---|---|---|---|
| 72 | 91 | A | C | 1.4 | 221KB |
とまあ、悪くないスコアです。表示速度1.4秒という時点で相当速いですね。ただし、テーマだけではサイトの表現の幅が狭まります。そこでプラグインの出番です。
Step2 キャッシュ系以外のプラグインを設定した後
動的にコンテンツを配信するのにどの程度時間がかかるのか知りたいのでキャッシュ系プラグインを除く20個のプラグインを設定した後のスコアを計測しました。
| Mb(PI) | PC(PI) | PS(GT) | YS(GT) | 表示(秒) | Size |
|---|---|---|---|---|---|
| 73 | 79 | B | D | 1.8 | 325KB |
Googleのスコアはほとんど変わりませんが、GTMetixのスコアは明らかに悪くなりましたね。
表示速度も少し遅くなりました。
正直これで良いのでは？と思う所ですが、大事なGoogleAnalytics等の解析コードとGoogle翻訳系プラグイン（こっちは趣味です)をまだ充てていません。
Step3 解析コードと翻訳プラグインを設定した後
| Mb(PI) | PC(PI) | PS(GT) | YS(GT) | 表示(秒) | Size |
|---|---|---|---|---|---|
| 71 | 76 | C | E | 4.3 | 426KB |
だいぶスコアが悪くなりました。
やむなく好きだった解析サービス「JUICER」は断念。結構いろんなコードを読み込むのに時間がかかっていたためです。外した後はこんな感じ。
| Mb(PI) | PC(PI) | PS(GT) | YS(GT) | 表示(秒) | Size |
|---|---|---|---|---|---|
| 71 | 85 | B | D | 2.2 | 399KB |
ちなみにこの段階でリクエスト数は43。テーマをあてる前で20くらいなので倍くらいになっています。
Step4 キャッシュ系プラグインを設定した後
キャッシュ系プラグインですがいろいろ試した結果「Swift」を使うことにしました。モバイル系のスコアが最も跳ね上がる結果が出たからです。
| Mb(PI) | PC(PI) | PS(GT) | YS(GT) | 表示(秒) | Size |
|---|---|---|---|---|---|
| 99 | 98 | A | B | 1.6 | 483KB |
もうこれで十分なのですが、このあとAMPとPWAにも対応させたくなってプラグインを追加しました。また、やる必要性は今のところ全くないのですがCloudflareも導入しました。
Final 最終的にこうなった
最後位は画像を貼りつけておきます。
PagespeedInsight
TestMySite
GTMetrix
PingDomToolで分析してみた。
↑ほとんどがJSでサイズがとられています。
↑リクエスト数は画像が多い。
↑そしてロード完了1.65秒までのうちサーバー応答までの最初の時間が0.7秒もかかっている。海外からのアクセス解析だからやむなしかな・・・。
ライバルとの比較
爆速で名高いDev.to
さすがに早い。サーバーが近いのも影響しているけど、サイズが3.8MBあってもこの速度。
詳しく見ると、爆速CDNとして有名なFastlyとCloudinaryの合わせ技のようです。
日本最強の爆速テーマ「ルクセリタス」
さすが！モバイルもPCも100点です。
GTMetrixでは私のサイトがやや勝ちました。
PingDomToolでも勝った!
とはいえ、おそらくルクセリタスがSwiftキャッシュを使ったら負けそうです。。。
最後に
多数のプラグインを導入してもここまで来るのに、何が決め手かといえばキャッシュ系プラグインSwiftでした。それで十分なスコアが出ます。
とはいえ正直まだまだ爆速とは言えないかなと思っています。
実際にアクセスして爆速を体感するのは「2ページ目以降」つまり「回遊」するときのみです。
1ページ目から爆速を体感するにはやはりCDNであるFastlyが必須。
チャレンジしたのですがうまくいきませんでした。。。Cloudinaryはできたのですが。
誰か設定方法を教えてくれないかな・・・。
