Compression Ostatnio zacząłem się zastanawiać co mogę ulepszyć na swoim blogu. Pomyślałem od razu o SEO, czyli o pozycjonowaniu strony. Stworzyłem konto na serwisie skanującym mojego bloga i poza znanymi radami znalazłem fakt, że mój blog nie kompresuje jakichś danych.
Okazuję się, że od jakiegoś czasu przeglądarki wspierają kompresję danych przy każdym zapytaniu HTTP. Przeglądarki wysyłają pytanie do serwera czy dane mogą być skompresowane. Ty to przechwytujesz i wysyłasz spakowane dane.
Kompresja działa tak dobrze, że możesz obniżyć wielkość przesłanych danych do przeglądarki aż o 70%.
To jest MEGA CUDOWNA zmiana, która nie tylko pomoże SEO twojej strony, ale także przyspieszy jej działanie dla użytkowników.
Pomyślałem sobie : "ja też tak chce". Dobra wiadomość jest tak, że blog działa obecnie na ASP.NET CORE 3.2, a on oczywiście wspiera kompresie danych. Nie trzeba grzebać w IIS czy web.configu zrobisz to na poziomie kodu. Nie musisz też kombinować coś ze swoim dostawcą serwerowym.
Tylko ASP.NET CORE i C#. A tak ogóle masz do wyboru 3 style kompresji :
- Z ASP.NET CORE. Czyli to co zrobimy
- Bawić się ustawieniami serwera w tym wypadku IIS
- Skompresować wszystkie statyczne pliki
Do testowania kompresji skorzystałem ze strony : https://www.giftofspeed.com/gzip-test/
Możesz sprawdzać nagłówki HTTP, jakie zwracasz by sprawdzać czy kompresja działa, ale jest z tym za dużo roboty.
Zacznijmy od kompresji gzip
Najpierw musisz do swojego projektu ściągnąć paczkę NuGet https://www.nuget.org/packages/Microsoft.AspNetCore.ResponseCompression/
W klasie startup do metody ConfigureServices() dodaj następujący kod:
services.Configure<GzipCompressionProviderOptions>(options =>
{
options.Level = CompressionLevel.Optimal;
});
services.AddResponseCompression(options =>
{
options.EnableForHttps = true;
options.Providers.Add<GzipCompressionProvider>();
});Nie zapomnij włączyć kompresje dla HTTPS. Teraz wszystko jest pod HTTPS ze względu na przeglądarka Google, która lubi pokazywać, że strony mogą być niebezpieczne.
Istnieją 3 poziomy kompresji:
- NoCompression : Brak kompresji
- Optimal : Najlepszy wybór pomiędzy poziomem kompresji a poziomem pracy serwera
- Fastes : Kompresujesz byle szybciej nie patrząc na jakość
Następnie musisz określić w Pipeline, że kompresja wystąpi.
app.UseStaticFiles();
// Enable compression
app.UseResponseCompression();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});..i tutaj uwaga kolejność ma znaczenie. Musisz włączyć kompresje przed obsługą plików statycznych. Poprawiamy więc kod
// Enable compression
app.UseResponseCompression();
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});Pozostało już tylko sprawdzić czy kompresja działa na blogu:
Brotil
Brotil jest nowym algorytmem kompresji i jest wspierany przez prawie każdą przeglądarkę. Wyjątkiem jest oczywiście IE i Opera Mini. Pora może wybrać lepszy algorytm.
https://www.caniuse.com/#feat=brotli
Aby uruchomić ten styl kompresji nie musisz dużo zmieniać w kodzie.
services.Configure<BrotliCompressionProviderOptions>(options =>
{
options.Level = CompressionLevel.Optimal;
});
services.AddResponseCompression(options =>
{
options.EnableForHttps = true;
options.Providers.Add<BrotliCompressionProvider>();
});Na koniec jeszcze powiem, że możesz kontrolować jakie pliki mają być kompresowane, ale domyślne wartości są ustawione w porządku.
services.AddResponseCompression(options =>
{
IEnumerable<string> MimeTypes = new[]
{
// General
"text/plain",
"text/html",
"text/css",
"font/woff2",
"application/javascript",
"image/x-icon",
"image/png"
};
options.EnableForHttps = true;
options.MimeTypes = MimeTypes;
options.Providers.Add<GzipCompressionProvider>();
options.Providers.Add<BrotliCompressionProvider>();
});Podsumowując kompresja potrafi naprawdę obniżyć ilość danych wysłanych do przeglądarki. Możemy wybrać poziom kompresji, jak i określić jakie typy MIME mają być kompresowane. Jeżeli możesz wybierz też kompresje Brotil.
