Optymalizacja kodu html przy pomocy HTML Tidy


(Loobieto) #1

Czyszczenie kodu html programem HTML Tidy

czyli jak skutecznie zmniejszyć objętość stron internetowych, poprawiając przy tym automatycznie błędy składni i struktury

Odwiedzający Twoją stronę marudzą, że nie mogą jej czytać, bo rozjeżdża się w ich przeglądarkach? Może jesteś średnio–zaawansowanym koderem HTML i prowadzisz bałaganiarski styl pisania witryn? Często zdarza Ci się zgubić w gąszczu niezbyt dobrze umieszczonych tagów? Być może szlag Cię trafia gdy walidator znów niejasno informuje cię o znalezionych błędach… Chcąc uczynić źródło bardziej czytelnym i łatwym do edycji skorzystaj z open-source'owej aplikacji HTML Tidy.

Ale o sso chodzi?

Domyślnie program sprawdza czy dokument napisany w języku HTML i XHTML jest zgodny z zaleceniami organizacji W3C. Po co nam one? Otóż zapewniają nas, że strony tworzone zgodnie ze specyfikacją zostaną poprawnie wyświetlone przez wszystkie przeglądarki dbające o standardy. Odnajdując i krótko opisując problem, program pomaga nam dbać o ich poprawność. Więcej informacji na kursie browsehappy.

Poprawność składni

• np. odpowiednie otwieranie i zamykanie tagów, atrybutów, oraz kodowanie znaków

• niezbędne do wyświetlenia dokumentu

Poprawność struktury

• odpowiednia budowa dokumentu — np. umieszczanie elementów liniowych w blokowych, nie odwrotnie

• uniemożliwia błędne zachowanie przeglądarek

Nie można by tak szybciej?

Ustawiając odpowiednie parametry, Tidy sam poprawi pliki .html dając na wyjściu poprawny, odchudzony dokument. Staraj się używać go zawsze gdy pracujesz z programami WYSIWYG które generują nadmiarowy kod.

Dobra, dawaj go…

  1. Archiwum .zip wypakuj najpierw do osobnego folderu. Znajdziesz tam dwa pliki.

htmltidyiskrypt.th.png

  1. Zainstaluj program: tidy-install.exe.

  2. Umieść skrypt skrypt-tidy.bat w tym samym katalogu co pliki .htm i .html.

plikihtmlrazemzeskrypte.th.png

  1. Uruchom skrypt. HTML Tidy wysprząta strony ze zbędnych tagów; osadzając style CSS zamiast przestarzałych tagów , konwertując backslashe () na slashe (/) itp.

htmltidywkonsoli.th.png

  1. W przykładzie strony zrobione w Wordzie wyraźnie zmniejszyły się. W innym przypadku zmienią się nieznacznie.

wynikoweplikihtml.th.png

Jak działa to twoje maleństwo!?

Utworzony instalator to nic innego jak zbiór plików dostępnych powszechnie w internecie. Składa się na niego:

plik wykonywalny .exe razem z dynamiczną biblioteką .dll

• plik konfiguracyjny .txt, utworzyłem go samodzielnie

Uruchamiając skrypt wykonuje się polecenie wsadowe „każące” przerabiać wszystkie pliki w języku HTML, konsolowym programem tidy.exe który jest już zainstalowany. Powiesz że można go w takim razie uruchomić ręcznie — tak, poleceniem:

tidy -config [ścieżka-konfiguracji.txt] [plik.html]

Cały sekret nie polega na dopisywaniu parametrów do komendy, lecz utworzeniu odpowiedniego pliku z konfiguracją takich parametrów, które chcemy uzyskać. W pakiecie ustawienia są następujące:

anchor-as-name: no

bare: no

clean: yes

doctype: transitional

drop-empty-paras: yes

drop-proprietary-attributes: yes

enclose-text: yes

fix-backslash: yes

fix-bad-comments: no

fix-uri: yes

hide-comments: yes

join-styles: yes

join-classes: yes

lower-literals: yes

merge-divs: auto

merge-spans: auto

ncr: yes

output-html: yes

preserve-entities: yes

quote-ampersand: yes

quote-nbsp: yes

repeated-attributes: keep-last

word-2000: yes

indent: no

indent-spaces: 0

markup: yes

sort-attributes: alpha

wrap: 0

char-encoding: raw

force-output: yes

tidy-mark: no

write-back: yes

Co to ma wszystko znaczyć?

Postaram się wytłumaczyć większość z nich.

Usuwa istniejący, niepotrzebny atrybut name="…" gdy element posiada atrybut id="…"; gdy go nie posiada, atrybut jest konwertowany: name="…" → id="…".

Nie usuwa HTML'owych „dodatków” MS Worda w stylu

czy

— mogłoby to całkowicie „rozjechać” stronę.

„Rozbiera” zdeprecjonowane elementy i atrubuty, w zamian umieszczając styl CSS w nagłówku.

Stosuje przejściową deklarację dokumentu, możesz użyć: strict.

Usuwa puste akapity.

Usuwa znaczniki których zawartości nie widać w przeglądarce, a zawierające informacje o właścicielu pliku (Word).

Poprawia backslashe na slashe.

Usuwa wszystkie komentarze .

Łączy wartości atrybutów style="…" jeśli wykryto takie same.

Zamienia na .

Zapisuje na wyjściu dokument HTML. Można użyć output-xhtml, żeby został wygenerowany kod zgodny z XML.

Zamienia „” na „”.

Zachowuje ostatni atrybut znacznika, jeśli wykryto takie same.

Radzi sobie ze stronami z Worda zapisanymi jako „strona html”. Zapisuj witryny jako „strona html, przefiltrowana”, lub użyj przyzwoitego edytora HTML.

Gdy indent: yes, ustawia ilość spacji jako wcięcia.

HTML Tidy nie będzie dzielił linii (gdy za długa) np. na 68 znaku.

Pozostawia kodowanie znaków nietknięte.

Wyświetla wynik na wyjściu nawet, gdy są błędy których nie może poprawić.

Program nie dopisuje się w .

Nadpisuje pierwotne pliki. Pamiętaj o kopii!

Co z Linuksem?

Program ten dostępny jest również na Linuksie — gotowe paczki znajdziesz w większości depozytorii. Przystosuj tylko plik z ustawieniami.

Wszystko wiem, idę pisać moją stronę…

Internet jest dla ludzi — pisz sensownie o swoich zainteresowaniach, pasji życiowej. Nie musisz znać języka html by tworzyć strony. Używaj Worda, czegokolwiek, pamiętając o tym, by odwiedzający mieli możliwość przeglądania twojej witryny bez nerwów.

Dbaj o wagę plików — im cięższe, tym dłużej czeka się na wczytanie. Zainstaluj Firefoksa, a z nim dodatki: Firebug i Page Speed. Ostatnim add-on'em sprawdzaj objętość gotowych stron. Kompresuj grafikę. Gdy tylko możesz stosuj nie pseudo– ale standardy internetowe; nie polegaj na IE.

Licencja CC.