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点の間に設定するのが妥当と思われる。

では、健闘を祈る。