パフォーマンスはウェブサイトの死活問題となります。表示スピードが早ければ早いほど、離脱率が低くなるでしょう。もちろんAMPの対応するウェブページを作ったほうが一番ですが、レガシーのウェブサイトをなかなか簡単にAMP化できないのは現実です。なので、パフォーマンスの改善をまずやりましょう。
注意点
- レガシーのウェブサイトはtree-shakingなどの機能を利用できないため、改善しても限界がある。参照するライブラリが多ければ多いほどローディングスピードが遅い。
- Asp.netを例として行う。
- パフォーマンスの測定：https://web.devを利用して測る。
改善点
画像のLazyLoad
ユーザの見えない画像にブロックされたらかなり残念なことなので、まずヘッダーの画像以外全部LazyLoadしましょう。
DRY原則により、既存のライブラリを利用しましょう。https://github.com/aFarkas/lazysizes。使い方は結構シンプルで助かりますね。
target=_blankの改善
セキュリティの問題ですが、target="_blank"のタグにrel="noreferrer"が必要となります。理由についてはGoogle先生に聞いてください。
<!-- ☔☔Bad☔☔ -→
<form action="https://google.co.jp/maps" method="get" target="_blank">
<!-- 🌟🌟Good🌟🌟 -→
<form action="https://google.co.jp/maps" method="get" target="_blank" rel="noopener" rel="noreferrer">画像の圧縮およびレスポンシブサイズの対応
LazyLoadを導入したとしても、ヘッダーなどにローディングしなければいけない画像があるかもしれません。その場合、画像を圧縮およびサイズ変更し、デバイスのスクーリングのサイズに合わせて動的に必要な画像を表示させるのがモバイルフレンドリーともいえ、SEO効果が期待できるでしょう。
圧縮、サイズ変更について、このサイトでできます。 https://squoosh.app/
サーバ側のキャッシュと圧縮を有効へ
各サーバの設定方法が異なるが、今回asp.net (.Net Core 3.1)のプログラミングで実装する方法を紹介します。下記のソースコードを追加するだけで有効になります。
using Microsoft.Net.Http.Headers;
.
.
.
public void ConfigureServices(IServiceCollection services)
{
services.AddResponseCaching();
services.AddResponseCompression();
.
.
.
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
.
.
.
// compress response
app.UseResponseCompression();
app.UseStaticFiles(new StaticFileOptions {
OnPrepareResponse = ctx =>
{
// cache 365 days
const int durationInSeconds = 60 * 60 * 24 * 365;
ctx.Context.Response.Headers[HeaderNames.CacheControl] = "public,max-age=" + durationInSeconds;
}
});
app.UseRouting();
app.UseResponseCaching();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}GoogleMapのLazyLoad
Googleマップをトップに表示するケースは相当稀です。一般的には会社住所などの表示によく使われます。なので、LazyLoadしても問題ありません。 では、この記事を確認しましょう。
GoogleAdsのLazyLoad
Googleマップと同じように、広告のLazyLoadも考えられるでしょう。方法はGoogleMapのLazyLoadと同じなので、ここで割愛します。
cssのPreload
cssのPreload（先読み）はページのレンダリングを結構早めます。具体的にこの文章を参考にしましょう。
簡単に言うと、Preloadは、ページの読み込みを開始する前に、ページに含まれるすべてのリソースを読み込むことを意味します。
<!-- ☔☔Bad☔☔ -→
<link rel="stylesheet" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha256-PZLhE6wwMbg4AB3d35ZdBF9HD/dI/y4RazA3iRDurss=" />
<!-- 🌟🌟Good🌟🌟 -→
<link rel="preload" as="style" onload="this.rel='stylesheet'" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha256-PZLhE6wwMbg4AB3d35ZdBF9HD/dI/y4RazA3iRDurss=" />このようにrelのところ入れ替えるだけでOkです。
完了
上記の方法で既存のシステムを大幅に改修しなくてもパフォーマンスを改善できるでしょう。特に画像のサイズ、画質およびレスポンシブの対応とGoogleMapのLazyLoadで効果的です。ぜひ取り込んでみましょう。
