Szybka efektywna optymalizacja plików

Minifikacja plików CSS/JS/HTML

PageSpeed Insight, a także inne narzędzia do badania prędkości stron internetowych sprawdzają, czy pliki CSS, JavaScript oraz HTML zostały zminifikowane. Jeśli tak się nie stało, wyświetlane jest zalecenie, aby tę czynność przeprowadzić. Dlaczego twórcy PageSpeed czy GTmetrix nakłaniają do minifikacji?

Page Speed Insights

Czego dowiesz się z PageSpeed Insights?

PageSpeed Insights wyświetla szeroki wachlarz informacji związanych z prędkością witryny. Warto pamiętać, że są to dane istotne zarówno ze względu na wygodę użytkowników, jak i pozycjonowanie strony. Czego dokładnie możesz się dowiedzieć?

Czas odpowiedzi serwera

Czas odpowiedzi serwera

Jedną z ważnych informacji, jakie możesz uzyskać w testach szybkości strony, takich jak PageSpeed Insights, jest czas odpowiedzi serwera.

Minifikacja plików CSS/JS/HTML

Minifikacja plików CSS/JS/HTML

PageSpeed Insight, a także inne narzędzia do badania prędkości stron internetowych sprawdzają, czy pliki CSS, JavaScript oraz HTML zostały zminifikowane.

Pamięć podręczna przeglądarki

Pamięć podręczna przeglądarki

Każda strona internetowa zawiera wiele statycznych elementów, czyli takich, które nie są na bieżąco generowane – po prostu „leżą” na serwerze i są wczytywane, kiedy witryna tego wymaga.

Optymalizacja obrazów do formatu WebP

Optymalizacja obrazów do formatu WebP

Obrazy na Twojej stronie internetowej mogą mieć różne formaty. W sieci często wykorzystuje się JPEG (lub JPG) oraz PNG.

Jak sama nazwa wskazuje, proces ten polega na zmniejszaniu plików CSS, JS oraz HTML. Nie jest to jednak standardowa kompresja, ale usuwanie tzw. białych znaków (spacji, tabulatorów itp.) oraz komentarzy z plików. Innymi słowy, minifikacja wyrzuca wszystko to, co nie jest czystym kodem. W efekcie plik ma mniejszą objętość, co w pewnym stopniu wpływa na prędkość wczytywania się strony, jej pozycjonowanie oraz UX. Pliki zminifikowane można łatwo rozpoznać po rozszerzeniu *.min, które dodawane jest do standardowego rozszerzenia pliku.

Jak minifikować pliki?

Minifikacja nie jest trudna i można ją wykonać na wiele sposobów. Samo PageSpeed Insights, tak jak inne narzędzia tego typu, serwuje zminifikowane wersje plików po zbadaniu strony. Do zmniejszenia objętości CSS, JS i HTML można też wykorzystać specjalne narzędzia dostępne online lub po prostu skorzystać z odpowiedniej opcji w używanym edytorze kodu. Minifikacje mogą też wykonywać wtyczki do popularnych systemów CMS oraz narzędzi deweloperskich, takich jak task runner Gulp.

Czy powinieneś minifikować swoje pliki CSS, JS i HTML?

Minifikacja właściwie stała się standardem, a w dodatku proces ten zajmuje tylko chwilę, więc zdecydowanie warto zmniejszać objętość plików w ten sposób. Metoda ta nie sprawi, że nagle pozycjonowanie strony będzie o połowę łatwiejsze, a konwersja skoczy w górę o 30%. Niemniej jednak, jest to jedna ze składowych dobrze przygotowanej strony internetowej. Oszczędzanie kilobajtów oraz mocy obliczeniowej w wielu różnych miejscach pozwala na przygotowanie szybszej i lepiej działającej witryny.

Przykładowy kod CSS przed minifikacją


    .header
    {
     background:color:#000000;
     color:#ffffff;
    }

    .box
    {
     background-color:#EEEEEE; 
     color:#000000;
     border: 1px solid #000000;
    }
  

Przykładowy kod CSS po minifikacji


  .header{background:color:#000000;color:#ffffff;}.box{background-color:#EEEEEE; color:#000000;border: 1px solid #000000;}