Minifikacja plików JS, CSS i HTML

Minifikacja plików JS, CSS, HTML jest prawdopodobnie jedna z najpopularniejszych metod optymalizacja stron internetowych. Stosuję się ją w celu zmniejszenia rozmiaru plików za pomocą zmniejszenia ilości znaków, usunięcia zbędnych i usunięcia komentarzy. Minifikacja plików zmniejszy transfer plików o cenne kilobajty co przełoży się na szybsze ładowanie witryny internetowej.

Jak wygląda minifikacja plików w praktyce

Weźmy na przykład plik JavaScript bibliotekę JQuery w wersji 3.6.0. Jest to biblioteka wykorzystywana przez strony oparte o system WordPress. Załóżmy teraz na moment, że twórcy WordPress`a zapomnieli by zminimalizować bibliotekę JQuery. Rozmiar witryny wzrósł by o 213,4KB.  

Jeżeli procedura ta zostanie przeprowadzona na wszystkich plikach użytkownik odwiedzający stronę zaoszczędzi pobierania dodatkowego transferu.

Rozmiar JQuery przed minifikacja to 284KB

Wygląd części kod przed optymalizacją:

( function( global, factory ) {

  "use strict";

  if ( typeof module === "object" && typeof module.exports === "object" ) {

    // For CommonJS and CommonJS-like environments where a proper `window`
    // is present, execute the factory and get jQuery.
    // For environments that do not have a `window` with a `document`
    // (such as Node.js), expose a factory as module.exports.
    // This accentuates the need for the creation of a real `window`.
    // e.g. var jQuery = require("jquery")(window);
    // See ticket #14549 for more info.
    module.exports = global.document ?
      factory( global, true ) :
      function( w ) {
        if ( !w.document ) {
          throw new Error( "jQuery requires a window with a document" );
        }
        return factory( w );
      };
  } else {
    factory( global );
  }

// Pass this if window is not defined yet
}

Rozmiar JQuery po minifikacji to 70,6KB

Wygląd części kodu po optymalizacji:

!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}

Jak zmniejszyć rozmiar plików na całej stronie WordPress

Optymalizacją wszystkich plików na stronie zajmie się darmowa wtyczka WP-Optimize. O której jeszcze nie raz wspomnę na blogu. Zawiera ona mnóstwo przydatnych darmowych funkcji takich jak optymalizacja tabel w bazie danych, kompresja zdjęć i posiada wbudowany mechanizm pamięci podręcznej.

Instalacja i aktywacja wtyczki

1. Zainstaluj wtyczkę
   Wejdź do kokpitu na swojej stronie WordPress > Wtyczki > Dodaj nową > WP-Optimize – Clean, Compress, Cache

2. Aktywuj wtyczkę
   Wtyczki > WP-Optimize – Clean, Compress, Cache > Aktywuj

Konfiguracja wtyczki

1. Przejdź do ustawień wtyczki
   Kokpit > WP-Optimize > Minify

2. Zaznacz rekomendowane ustawienia
   Enable Minify – włącz
   Process HTML – włącz
   Process JavaScript files – włącz
   Process CSS files – włącz

3. Zapisz ustawienia

4. Sprawdź czy twoja strona ładuję się poprawnie

To wszystko

Jeżeli udało ci się zainstalować i skonfigurować wtyczkę to bardzo się cieszę. Możesz teraz sprawdzić w jaki sposób następujące zmiany wpłynęły na wydajność twojej witryny za pomocą bezpłatnego narzędzia PageSpeed.

Optymalizacja strony internetowej jest to wieloetapowy proces. Jeżeli twoja strona mimo starań nadal działa wolno to zachęcam do zainteresowania się innymi poradami na moim blogu.