tekitoumemo’s diary

思ったことを書くだけ。長文版Twitter

運営してるサービスのパフォーマンス改善をしました

こんにちは。

みんなの洋楽ランキングでパフォーマンス改善をした結果、かなり速度が改善されたのでやったことを記載します。

まずは結果から

計測はPageSpeed Insightsで行っています。この結果はモバイルのみであり、デスクトップの結果は面倒なので載せません(計測したら95でした)

改善前

f:id:tekitoumemo:20191007023730p:plain
そもそもドメインが違っていてすみません。改善前のキャプチャを撮るのを忘れてしまったので違うドメインで作り直しました。これも改善後なので実際は35とかだった気がします。

改善後

f:id:tekitoumemo:20191007021415p:plain
結構改善されてますね。まだまだ伸ばしたかったのですが、大幅な構造変更が必要だったため、ここらへんで落とし所を付けました。

まずはどこまで改善できるか知る

まずはどこまで改善できるのか知る必要があります。普通に考えて100点は不可能なので、自分のサイトでどれだけの速度が出せるのか限界値を知り、その数字を目標に改善していくのが良いと思います。利用規約は画像も処理もないので限界値を知る良い指標になるかと思います。
f:id:tekitoumemo:20191007030140p:plain

最高で71点まで伸ばせることがわかりました。

なにをやったか

いろいろやりましたが、うまく行ったところと効果が薄かった改善があります。結果としてやってよかったことばかりなのでどちらも記載していきます。

サーバーサイドリファクタ(効果無)

ここではn+1、不要なインスタンスが生成されてないかなど中心に見ていきました。もともとデータアクセス周りの設計はちゃんとやっていたこともあり、パフォーマンスとは関係ないリファクタを中心にやりました。
f:id:tekitoumemo:20191007032621p:plain

WEBパフォーマンスはほとんどフロントにあると思うので、サーバーの改善はあまり効果が出ない可能性がありコスパ悪いです。

不要なスタイル、JSを削除する(効果少)

みんなの洋楽ランキングはとあるHTMLテンプレートをベースに作ったので、不要なスタイルやJSが大量にありました。明らかに使ってないファイルが大量にあったので削除→確認→削除のループでひたすら消していきました。とんでもない量の不要なファイルがありました。。
f:id:tekitoumemo:20191007031440p:plain

こちらは1~3点ぐらいしか変わらず、労力の割には効果が得られる結果になりませんでした。でもこれがあとに効いてくるんです!

画像を圧縮する(効果中)

PageSpeed Insightsは画像に関してはかなり辛めです。改善前はこんな感じです。
f:id:tekitoumemo:20191007180443p:plain
画像はImageOptimを使っていて、かなり厳しい圧縮をしているのですがまだ減らせと言うてきます。
f:id:tekitoumemo:20191007180746p:plain
限界まで圧縮してんの204 KB→147 KBとか無理やろ。とか思いながら調べたら表示しているサイズに対して画像がでかすぎることが原因でした。こちらは画像をリサイズして圧縮したら改善されました。やはり画像はでかいのでポイントはちょっと上がります。5~8点ぐらい変わったかな?

テキスト圧縮の有効化(効果大)

テキストが未圧縮のままだったのでgzip形式に圧縮しました。PageSpeed Insightsでも一番影響がある部分と示されてました。
f:id:tekitoumemo:20191007181933p:plain
.Net Coreでのgzip化は以下の通りです。

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    ...
    // Configure Compression level
    services.Configure<GzipCompressionProviderOptions>(options => options.Level = CompressionLevel.Fastest);

    // Add Response compression services
    services.AddResponseCompression(options =>
    {
        options.Providers.Add<GzipCompressionProvider>();
        options.EnableForHttps = true;
    })
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseResponseCompression();
}

詳しくはこちら

静的ファイルのキャッシュ(効果大)

なんとなくキャッシュの影響が大きい気がしてた(調べるのサボってた)ので実施していませんでしたが、この機会に導入しました。
f:id:tekitoumemo:20191007185125p:plain
ほとんど画像がかわることがないことに加えてasp-append-version="true"を導入しているので2週間に設定しました。5点ぐらい上がった気がします。

AMP化(失敗)

そもそもAMPとは?

AMP(Accelerated Mobile Pages)とはGoogleTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。

画像のLazy Loadをするためにamp-imgを使いたかったのですが、みんなの洋楽ランキングでは失敗しました。失敗した理由としては、とあるHTMLテンプレートで開発した背景があり、Masonryというライブラリを使っています。これが悪さをして、画像がロードしたあとに実行されます。そうするとこんな感じになってしまい、うまく機能しませんでした。デザインを大幅に変更したい気持ちはあるのですが、効果に対して労力が大きすぎます。今の所、そこまで困ってないのでこれは諦めました。HTMLテンプレート使う場合は、可能な限りライブラリを使ってないやつを選びましょう。。
f:id:tekitoumemo:20191007183659p:plain
毒吐きまくってます笑

PageSpeed Insightsでは、AMP化してもhttps://cdn.ampproject.org/v0.jsが大きすぎて数値が変わらないという結果になりました。でもasyncで読み込んでるし結果として導入したほうが絶対よいです。

やってないこと
  • 使ってないCSS、JSを削除
  • 画面デザイン変更

まず、CSS、JSの削除は画面に必要なもののみ読み込まなきゃいけないので割にあわないです。数十キロバイト程度なのでここは諦めても良いかなぁと思ってます。画面デザインの変更は、突き詰めればやったほうが良いですがページ速度はほとんど関係がないのでここも諦めました

感想

パフォーマンスはSEOに影響があると言われてますが、上位に来るサイトはあまり点数が良くないので実は関係ないんじゃないか?と思ってます。Speed Updateとか言ってるけどほんとに?って感じです。SEO対策としてパフォーマンスを上げるのは効率が悪いと思うのでここはUXの向上やリファクタリングと組み合わせて実施する方が気持ち的にも楽かなと思います。ちなみにアマゾンはモバイル60点台のPC100点なのでここら辺を維持出来たら完璧かと思います。

アマゾンマジすげーや