Optymalizacja kodu html
10 marca 2011
Strony internetowe tworzone są przez koderów, którzy do tego celu wykorzystują specyficzny język opisu struktury dokumentu, mianowicie HTML. „Język”, jak niekiedy określa się HTML, polega na umieszczaniu w odpowiednim porządku i kolejności tak zwanych „tagów”, znaczników, które opisują strukturę dokumentu (np. nagłówki, bloki tekstowe, obrazy etc.). Wielu webmasterów nie stosuje żadnej optymalizacji kodu HTML, nierzadko jest to błąd, o czym więcej za chwilę. Głównie dzieje się tak z powodu lenistwa lub po prostu niewiedzy. Sposobów na optymalizację kodu HTML (czyli jego skurczenie, czy też upakowanie) jest całkiem sporo. Zacznijmy od najprostszego, usunięcia zbędnych odstępów, znaków nowej linii, tabulacji. W końcu gotowy kod będzie działał również bez nich, a tymczasem zajmują one niepotrzebnie kilka bajtów (w przypadku większych witryn jest to o wiele więcej). Kiedy już pozbędziemy się zbędnych odstępów, warto spojrzeć na deklaracje „style”, warto przenieść je do plików CSS, w końcu tam powinny się znaleźć. Innym ciekawym sposobem jest skrócenie wartości parametrów takich jak „id”, czy też „class”. Coraz więcej stron zyskuje miano „dynamicznych” i „interaktywnych”, zwykle dzięki implementacji kodu JavaScript lub AJAX (technologia asynchronicznych połączeń z serwerem oparta i współpracująca bezpośrednio właśnie z JavaScriptem). Niekiedy kod JS jest naprawdę długi i zajmuje całkiem sporo bajtów. Istnieje kilka sposobów na jego optymalizację i nie trzeba jej wcale robić ręcznie, albowiem w sieci znajduje się wiele kompresorów, które zrobią to za nas. Zdarzają się również takie, które podpowiedzą nam w której linijce kody istnieją ewentualne błędy składni języka. Sama optymalizacja kodu, a właściwie jego kompresja polega na usunięciu zbędnych „białych znaków”. Czym są „białe znaki”? To znaki takie jak spacja, tabulacja, znak nowej linii, słowem wszystkie znaki, które tworzą odstępy. Ponadto kompresory kodu JavaScript posiadają możliwość „hashowania”. W procesie tym kod JS ulega całkowitej metamorfozie, jego deklaracje, właściwości, słowem cały kod ulega zmianie. Zwykle kompresor przepisuje wówczas nazwy zmiennych i funkcji, wprowadza również funkcje eval do kodu. Często kod po optymalizacji takim kompresorem działa o wiele szybciej, więc zyskuje nie tylko sama „waga” strony internetowej. Wiele osób zastanawia się czy istnieje możliwość kompresji, czy tez upakowania plików CSS (przeznaczonych do deklaracji wyglądu witryny). Jaki jest w ogóle sens tego typu kompresji? Tutaj wkracza teoria przeglądarki internetowej oraz sama zasada jej działania. Przeglądarka posiada tak zwane CACHE, czyli pamięć podręczną, w której przechowuje pewne dane, zwykle powtarzalne, które nie muszą być ładowane za każdym razem na nowo. Za taki element przeglądarka uważa właśnie arkusze CSS. Przy pierwszym wejściu na stronie, arkusze definiujące jej wygląd lądują właśnie w CACHE przeglądarki, przez co nie muszą być wielokrotnie ładowane. Właśnie tutaj leży sens ich optymalizacji, albowiem przyspieszy to jeszcze cały proces zapisywania i odczytywania z CACHE. Jakie są zaś same sposoby optymalizacji? Przede wszystkim usunięcie zbędnych znaków odstępów (tabulacji, spacji, nowych linii). Istnieją nawet do tego specjalne kompresory CSS, dostępne w sieci za darmo. Innym sposobem jest skrócenie deklaracji kolorów (HEX), usunięcie powtarzających się lub po prostu niepotrzebnych deklaracji.
» Kategorie: Internet | » Tagi: CSS, deklaracja, dokument, gotowy, html, kod, leń, powód, struktura, style, upakowanie