こんにちは。
みんなの洋楽ランキングでパフォーマンス改善をした結果、かなり速度が改善されたのでやったことを記載します。
まずは結果から
計測はPageSpeed Insightsで行っています。この結果はモバイルのみであり、デスクトップの結果は面倒なので載せません(計測したら95でした)
改善後
結構改善されてますね。まだまだ伸ばしたかったのですが、大幅な構造変更が必要だったため、ここらへんで落とし所を付けました。
まずはどこまで改善できるか知る
まずはどこまで改善できるのか知る必要があります。普通に考えて100点は不可能なので、自分のサイトでどれだけの速度が出せるのか限界値を知り、その数字を目標に改善していくのが良いと思います。利用規約は画像も処理もないので限界値を知る良い指標になるかと思います。
最高で71点まで伸ばせることがわかりました。
なにをやったか
いろいろやりましたが、うまく行ったところと効果が薄かった改善があります。結果としてやってよかったことばかりなのでどちらも記載していきます。
サーバーサイドリファクタ(効果無)
ここではn+1、不要なインスタンスが生成されてないかなど中心に見ていきました。もともとデータアクセス周りの設計はちゃんとやっていたこともあり、パフォーマンスとは関係ないリファクタを中心にやりました。
WEBパフォーマンスはほとんどフロントにあると思うので、サーバーの改善はあまり効果が出ない可能性がありコスパ悪いです。
不要なスタイル、JSを削除する(効果少)
みんなの洋楽ランキングはとあるHTMLテンプレートをベースに作ったので、不要なスタイルやJSが大量にありました。明らかに使ってないファイルが大量にあったので削除→確認→削除のループでひたすら消していきました。とんでもない量の不要なファイルがありました。。
こちらは1~3点ぐらいしか変わらず、労力の割には効果が得られる結果になりませんでした。でもこれがあとに効いてくるんです!
画像を圧縮する(効果中)
PageSpeed Insightsは画像に関してはかなり辛めです。改善前はこんな感じです。
画像はImageOptimを使っていて、かなり厳しい圧縮をしているのですがまだ減らせと言うてきます。
限界まで圧縮してんの204 KB→147 KBとか無理やろ。とか思いながら調べたら表示しているサイズに対して画像がでかすぎることが原因でした。こちらは画像をリサイズして圧縮したら改善されました。やはり画像はでかいのでポイントはちょっと上がります。5~8点ぐらい変わったかな?
テキスト圧縮の有効化(効果大)
テキストが未圧縮のままだったのでgzip形式に圧縮しました。PageSpeed Insightsでも一番影響がある部分と示されてました。
.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(); }
詳しくはこちらへ
静的ファイルのキャッシュ(効果大)
なんとなくキャッシュの影響が大きい気がしてた(調べるのサボってた)ので実施していませんでしたが、この機会に導入しました。
ほとんど画像がかわることがないことに加えてasp-append-version="true"
を導入しているので2週間に設定しました。5点ぐらい上がった気がします。
AMP化(失敗)
そもそもAMPとは?
AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。
画像のLazy Loadをするためにamp-img
を使いたかったのですが、みんなの洋楽ランキングでは失敗しました。失敗した理由としては、とあるHTMLテンプレートで開発した背景があり、Masonryというライブラリを使っています。これが悪さをして、画像がロードしたあとに実行されます。そうするとこんな感じになってしまい、うまく機能しませんでした。デザインを大幅に変更したい気持ちはあるのですが、効果に対して労力が大きすぎます。今の所、そこまで困ってないのでこれは諦めました。HTMLテンプレート使う場合は、可能な限りライブラリを使ってないやつを選びましょう。。
毒吐きまくってます笑
PageSpeed Insightsでは、AMP化してもhttps://cdn.ampproject.org/v0.js
が大きすぎて数値が変わらないという結果になりました。でもasync
で読み込んでるし結果として導入したほうが絶対よいです。