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
Kompresory
30 stycznia 2011
Wiele osób z pewnością chciałoby zoptymalizować swoją stronę i ułatwić dostęp do niej, niekiedy jednak odstrasza ich wizja spędzania nad jej kodem kolejnych godzin. Nie ma bowiem co ukrywać, iż optymalizacja to proces żmudny, zwłaszcza gdy wykonywany jest przez jedną osobą i to jeszcze do tego w pełni „ręcznie”. Wówczas to osoba za nią odpowiedzialna musi po raz kolejny (o ile wcześniej to ona kodowała stronę) czytać kod linijka po linijce, analizując go i szukając dróg do tego by zmniejszyć jego objętość lub by zwiększyć wydajność. Z pomocą przychodzą nam kompresory stron dostępne w sieci. Jeśli chcemy możemy znaleźć zarówno narzędzia dla HTML, JavaScript, czy też CSS. Warto zastosować je wszystkie, w końcu wówczas przyniesie to jeszcze większe korzyści, a nasza strona z pewnością straci na „wadze” i będzie o wiele łatwiej i szybciej dostępna. Warto jednak zasady optymalizacji poznać wpierw samemu, bo jak wiadomo maszyna (czy też może lepiej w tym wypadku powiedzieć – automat) potrafi się mylić, bo sama w sobie nie „myśli”, co oczywiście nie znaczy, że dostępne w internecie kompresory popełniają wiele błędów, chodzi raczej o fakt, iż nie zawsze „wyłapują” wszystkie drogi prowadzące do optymalizacji kodu. Użytkownicy kochają strony, które posiadają mnóstwo interesujących ich informacji, czy materiałów. Jednakże miłość ta nie jest bezwarunkowa, albowiem strona powinna ładować się możliwie jak najszybciej, po w końcu po co komu masa informacji, skoro nie może do nich dotrzeć w sensownym czasie (czyt. bardzo krótkim). Jeśli stworzyliśmy już naszą witrynę i chcemy poprawić szybkość jej działania, warto zabrać się właśnie za jej optymalizację. Ściślej mówiąc, za optymalizacje jej kodu (czy to HTML, CSS, czy JavaScript). Jakie otrzymamy korzyści? Przede wszystkim szybsze jej ładowanie, więc i szybszy dostęp do informacji. Aprobatę użytkowników, którzy z pewnością z większą chęcią powrócą na naszą witrynę. W końcu w sieci liczy się nie tylko ilość informacji, ale przede wszystkim prędkość jej przekazu (musi być bardzo wysoka). Zwykle proces optymalizacji sprawia, iż strona „waży” od 30 do nawet 60 % mniej. Dzięki temu ładuje się o wiele szybciej. Poza korzyścią dla samego użytkownika, warto wspomnieć, iż transfer danych (za który płacimy hostingodawcy) również jest wymiernie niższy.
» Kategorie: Technologia | » Tagi: analiza, czytanie, droga, kod, linijka, mylenie, objętość, szukanie, zmniejszenie