Tistory 基本スキンのパフォーマンステスト

Tistory の無料スキンを試しに適用してみましたが、今回は自分でスキンを作ってみることにしました。

スキンを制作する過程で Google の PageSpeed Insights でスコアをテストし続けましたが、どうしてもスコアが 50 点を超えるのが難しかったです。

最初から最適化されているスキンを選び、そのスキンの CSS を修正する方が簡単そうだと考えて、基本スキンの性能をテストしてみることにしました。

1. テスト環境

テスト環境が一定である必要があるため、新しいブログを作成しました。

該当ポストには中間にいくつかの文章、10 枚の写真、1 つの地図が含まれています。

使用するプラグインは YouTube、レスポンシブウェブスキンイメージ最小化、以前の発行記事追加、カテゴリー別記事の閲覧で、合計 4 つです。

テストは Google の PageSpeed Insights を使用しました。

該当アドレスの性能、検索指標などのさまざまな内容を確認できます。

2. Hello World

スキンの HTML と CSS を除去し、基本サーバーの応答時間をテストしたくなりました。

いくらスキンを最適化しても、基本的にサーバーからの応答時間が遅ければどうしようもありません。

そこでスキンエディタで全ての HTML、CSS を削除し、タグが <h1> の Hello World のみを出力してみることにしました。

以下のように....

これを行い、該当アドレスにアクセスすると何も表示されずに Hello World! が表示されることが確認できます。

そしてこのアドレスを PageSpeed Insights に入れてみました。

1) モバイル環境

モバイル環境での性能スコアは 78 点でした。

問題はこのページが単純に h1 タグの Hello World! しか出力しないことです。

これは、いくらサイトを最適化しても Tistory サーバーを利用する限り、モバイル環境で 78 点を超えることは不可能であることを意味します。

以下は測定項目の詳細内容です。

最初のコンテンツが描画されるまでと最後のコンテンツが描画されるまでに 3.3〜4.2 秒かかりました。

単純にサーバーから CSS、min.js などの JavaScript を呼び出すのに 1.7 秒、単に Hello World を表示するだけで 4.1 秒です。

モバイルでの最適化は一手間省くしかなさそうです。

2) デスクトップ環境

デスクトップではほぼ 100 点に近いスコアが出ました。

多分ヘッダー値がモバイルの場合、モバイル環境を提供するためにより多くの JavaScript を送信しているのではないかと思いました。

具体的なことは特に知りたくないため、スルーしました。

それではスキンを一つずつテストしてスコアを見ることにしましょう。

注意すべき点は、以下のスコアは絶対的な数値ではないこと。

テスト当時のサーバー環境、ネットワーク環境によりスコアが変動する可能性があります。

3. スキン別テスト

1) Letter

2) Magazin

3) Book Club

4) #1

5) #2

6) Odyssey

7) Poster

8) Portfolio

9) Square

10) Whatever

4. 結果整理

1) スキン別 単純スコア比較

モバイルおよびデスクトップでスコアが最も高かったのは Square でした。

多分基本スキンの中で最もシンプルだからだと思われます。

2) モバイル詳細スコア項目

3) デスクトップ詳細スコア項目

13. 結果分析および結論

結論として、Tistory の基本スキンの性能は概して同程度でした。

性能スコアが高い Square は、逆にアクセシビリティと推奨事項でやや低いスコアを示し、アクセシビリティと推奨事項では #1 スキンが最も高いスコアを得ました。検索エンジン最適化はほとんどの場合、画像の alt 値の欠如で 92 点となりました。

自分がフロントエンドについて理解がある場合は、基本スキンの中の Square を改変して、アクセシビリティおよび推奨事項を修正するのが良いでしょう。それ以外の場合は、他のスキンの中から何を選んでも性能の限界はほぼ同様でしょう。

モバイル最適化の目標は 78〜50 点の間、デスクトップ最適化の目標は 70〜90 の間で設定するのが適切と思われます。

それでは、成功を祈ります。