Optymalizacja zasobów: kompresja, minifikacja, konwersja

W znaczeniu ogólnym optymalizacja to organizowanie działań lub procesów w taki sposób, aby dały jak największe efekty przy jak najmniejszych nakładach. W przypadku witryn i aplikacji internetowych optymalizację można wykonać w obrębie witryny lub aplikacji (tzw. optymalizacja onsite) oraz w ich otoczeniu (tzw. optymalizacja offsite). W takim rozumieniu optymalizacja składa się z przetwarzania wstępnego oraz zabiegów optymalizacyjnych (zależnych od kontekstu) [Grigorik 2021].

Działania optymalizacyjne w otoczeniu witryny mogą dotyczyć np. odpowiedniej konfiguracji serwera hostingowego. Z kolei optymalizacja onsite obejmuje np. modyfikowanie ustawień systemu zarządzania treścią CMS, optymalizację skryptów i żądań sieciowych, usunięcie nieużywanego kodu, buforowanie kodu, a także minifikację kodu czy też kompresję i konwersję multimediów.

Kompresja, minifikacja, konwersja

Kompresja to proces, którego celem jest zmniejszenie wielkości lub objętości danego obiektu. Istnieje wiele technik i algorytmów kompresji, jednak najlepsze rezultaty można uzyskać stosując różne techniki kompresji. Redukcja rozmiaru danych jest znana jako „kompresja danych”. Jest to proces, którego celem jest zmniejszenie rozmiaru jednego lub większej liczby plików. Skompresowane pliki zajmują mniej miejsca na nośniku danych i można je szybciej pobrać, odczytać itp. Dlatego kompresja jest często stosowana w celu zaoszczędzenia miejsca i skrócenia czasu potrzebnego do przesyłania plików przez Internet. W skompresowanym archiwum mogą znaleźć się wszystkie typy danych. Aby uzyskać oryginalne pliki należy najpierw zdekompresować archiwum za pomocą stosownego narzędzia. Z kolei kompresja multimediów służy do pozyskiwania plików multimedialnych o mniejszym rozmiarze, np. plików graficznych, audio lub wideo. Takimi plikami są np. obrazy JPEG, pliki audio MP3 oraz pliki wideo MPEG [Christensson 2011].

Kompresja plików (tzw. pakowanie plików) jest przeważnie wykonywana przy użyciu bezstratnego algorytmu kompresji. Oznacza to, że podczas procesu kompresji żadne informacje nie są tracone. Dlatego skompresowane pliki można przywrócić do oryginalnej wersji. Natomiast większość plików multimedialnych jest kompresowana przy użyciu kompresji stratnej. Oznacza to, że podczas kompresji pliku następuje utrata jego oryginalnej jakości, chociaż straty te można ograniczyć [Christensson 2011].

W zakresie poprawy jakości witryn i aplikacji internetowych kompresja oznacza najczęściej zmniejszenie rozmiaru plików składających się na witrynę lub aplikację. Kompresja to proces kodowania informacji, w wyniku którego zajmują one mniej miejsca. Ma to na celu zwiększyć szybkość wczytywania się witryny w oknie przeglądarki internetowej oraz zmniejszyć transfer zasobów [Grigorik 2021].

Kompresja to zmniejszenie łącznego rozmiaru zasobów niezbędnych do pobrania, po uprzednim wyeliminowaniu wszystkich zbędnych zasobów.

Minifikacja to proces usuwania niepotrzebnych elementów kodu w celu zmniejszenia rozmiaru pliku. W przypadku witryn i aplikacji internetowych najczęściej minifikowane są pliki HTML, CSS i JavaScript. Zmniejszenie rozmiaru zasobów sieciowych umożliwia szybsze przesyłanie plików, dzięki czemu strony internetowe wczytują się szybciej. Minifikacja polega na usunięciu komentarzy, zbędnych spacji i znaków nowego wiersza. Znaki te sprawiają, że kod jest bardziej czytelny dla człowieka, jednak są ignorowane przez przeglądarki. Dlatego elementy te można bezpiecznie usunąć. Z kolei przy minifikowaniu kodu JavaScript długie nazwy zmiennych można zastąpić krótszymi [Christensson 2019]. Przykładowo rozmiar biblioteki jQuery z białymi znakami wynosi około 300 KB. Ten sam plik po minifikacji (usunięciu komentarzy itp.) ma prawie trzykrotnie mniejszy rozmiar, tj. ok. 100 KB [Grigorik 2021].

Minifikacja i kompresja zmniejszają rozmiar plików, jednak są to różne procesy. Minifikacja modyfikuje zawartość tekstową pliku (zmniejsza objętość treści), a w trakcie kompresji następuje całkowite przepisanie kodu binarnego. Skompresowany plik musi zostać zdekompresowany za pomocą narzędzia do dekompresji plików, aby można go było odczytać [Christensson 2019].

Z kolei konwersja to przekształcenie, transformacja. Konwersja danych to zmiana jednej formy danych cyfrowych w inną formę, tzn. zmiana informacji zapisanych w określonym formacie na inny. Konwersja pliku graficznego pozwala zachować użyteczność prezentacji danych przy najbardziej optymalnej wielkości pliku.

Studium przypadku: wpływ optymalizacji zasobów na jakość komponentu mapowego

Król, K. (2021). Code Minification and Raster File Compression as Performance Improvement Methods – a Case Study. Proceedings of the 37th International Business Information Management Association Conference (IBIMA), 1-2 April 2021, Cordoba, Spain, pp. 1150-1157. DOI: 10.6084/m9.figshare.14551080

Wzrost zaawansowania witryn i aplikacji internetowych sprawia, że ilość danych, które pobierają rośnie w stałym tempie. Dlatego na znaczeniu zyskuje optymalizacja ich wydajności. Celem pracy jest analiza wpływu optymalizacji elementów składowych komponentu mapowego na jego wydajność [Król 2021]. Badaniom poddano prototypową aplikację internetową typu „interaktywna soczewka”. Aplikację utworzono w trzech wariantach: 1) przed optymalizacją (wersja bazowa), 2) po kompresji pliku rastrowego, 3) po kompresji pliku rastrowego oraz po minifikacji kodu. Testy wydajności przeprowadzono przy pomocy aplikacji GTMetrix oraz Dareboost. Wydajność aplikacji zaprezentowano przy pomocy wybranych wskaźników jakości, w tym Performance Score, Largest Content Element (LCP), Total Blocking Time (TBT) oraz Speed Index (SI). Optymalizacja zasobów spowodowała dużą poprawę wydajności komponentu mapowego. Wartość wskaźnika LCP spadła z 2.1s do 1.6s. Kompresja rastra spowodowała spadek wartości SI z 1635 do 884 jednostek. W badaniach zwrócono uwagę na konsekwencje kompresji plików graficznych, która może pogorszyć ich jakość wizualną. Wyniki badań potwierdziły, że zmniejszenie wielkości plików, np. poprzez kompresję i/lub minifikację wpływa na wydajność aplikacji internetowej, co przekłada się na jej jakość użytkową.

Źródła

Christensson, P. (2011). Compression Definition. Retrieved 2021, Feb 10, from https://techterms.com
Christensson, P. (2019). Minification Definition. Retrieved 2021, Feb 10, from https://techterms.com
Grigorik, I. (2021). Optimizing Encoding and Transfer Size of Text-Based Assets. Google Developers. http://bit.ly/2LCph5j
Król, K. (2021). Code Minification and Raster File Compression as Performance Improvement Methods – a Case Study. Proceedings of the 37th International Business Information Management Association Conference (IBIMA), 1-2 April 2021, Cordoba, Spain, pp. 1150-1157. DOI: 10.6084/m9.figshare.14551080