Optymalizacja strony: CSS i JS

W brew pozorom tak. I to dużo. Bardzo. Google w swojej filozofii próbuje od bardzo dawno wbić webmasterom do głowy, żeby nie patrzyli na strony tak jak robot. Czyli:

• czy jest odpowiednie natężenie słów kluczowych,
• jak wysoki jest PR,
• skąd jeszcze brać linki,
• czy linków wewnętrznych nie ma za dużo,
• czy nie przesadziłem z opisem i słowami kluczowymi w meta tagach,
• czy wszystkim linkom wychodzącym z mojej strony dać nofollow?

Te i wiele innych pytań zaczynają martwić każdego webmastera, który zaczyna zabawę z SEO a nawet starego wyjadacza (a spotkałem już takich kilku). I to jest błąd. Bo takie zbyt intensywne optymalizowanie prędzej czy później doprowadzi do przeoptymalizowania (over optimalisation) strony i cały nasz wysiłek pójdzie na marne.

Można się tutaj skupić tak na prawdę na dwóch rzeczach.

1. arkusze stylów,
2. skrypty JavaScript.

W obu przypadkach chodzi o zmniejszenie ich wagi (objętości). Zarówno pliki CSS i JS można bardzo fajnie kompresować. Dlaczego warto kompresować? Mniejszy czy lżejszy plik szybciej się wczyta użytkownikowi oraz zaoszczędzimy na transferze. Przy mniejszym ruchu nic nie odczujemy np. 100 wejść dziennie, ale już przy 10000 (i więcej) wejściach dziennie już będzie widać jak transfer się nam zmniejsza. Są compresory online plików JS i CSS, dzięki którym można zmniejszyć wagę pliku nawet o 30-40%.

Kolejna rzecz to ilość zapytań do naszej strony. Przeglądarki mają ustawione domyśle wartości maksymalnych odpytań, np. w Firefoxie jest to 6 zapytań dla domeny. Tak więc, jeżeli dołączamy dużo plików CSS i JS powoduje to, że strona się dłużej wczytuje. Bo przy zajętych wszystkich sześciu "kanałach" trzeba poczekać aż co najmniej jeden się "zwolni". Proponowanym tutaj rozwiązaniem jest scalanie (marge'owanie) plików w jeden. Ma to oczywiście swoje plusy i minusy.

Plusem i jednocześnie minusem jest to, że mamy jeden plik JS / CSS przez co użytkownik wysyła np. tylko jedno żądanie o plik a nie jak to bywa w bardziej rozbudowanych serwisach po kilka. Ten minus to fakt, że większy plik może wygenerować więcej transferu. Wszystko tak naprawdę zależy od skomplikowania serwisu i jego wielkości. W przypadku mniejszych serwisów sprawa jest dość prosta. W przypadku bardziej rozbudowanych dobrym zwyczajem jest stworzenie specjalnych subdomen, które będą magazynować pliki CSS i JavaScript. W przypadku mojego bloga mogłoby to być coś takiego: css.shpyo.net i js.shpyo.net. Dzięki temu zapytania rozkładają się o dodatkowe adresy i nie ma "zapychania" się "kanałów".

Pliki JS na sam dół kodu HTML. W przypadku tej "sztuczki" - wrzucanie plików JavaScript na sam dół - spotkałem się z opinią, że jest teraz na to moda. Nie będę mówił, którzy to specjaliści, ale podejrzewam, że modne jest (bardziej?) lenistwo. Ale do rzeczy. Dlaczego warto umieszczać skryptu JS na końcu kodu HTML - przed zamknięciem tagu body? Ano dlatego, że skrypt jest uruchamiany po załadowaniu się całej strony. A co to oznacza dla Internaty odwiedzającego Twoją stronę? To, że strona się szybko wczyta i nie będzie czekał aż JavaScripty skończą się wczytywać w różnych miejscach np. w headzie, w środku czy nawet jakieś zewnętrzne skrypty. To wszystko może denerwować i frustrować Internautę. Dzisiaj większość fajnych skryptów uruchamia się na "onPageLoad" - czyli po wgraniu się całej strony (musi się wgrać cała struktura HTML, CSS i inne JSy). Po za tym, najpopularniejsza biblioteka JS - jQuery - jest samoodpalającym się skryptem, bez względu w którym miejscu zostanie umieszczony. Tak więc po co złościć Twoich odwiedzających? Zawsze będą mogli przejść do konkurencji. Jeżeli jeszcze masz jakieś wątpliwości to odpowiedz sobie na takie oto pytanie: ile razy się Tobie zdarzyło, że musiałeś czekać, aż jakaś informacja na się załaduje do końca?

Ten temat to dopiero wierzchołek góry lodowej i jest tylko krótkim wstępem (jak na ten dość długi wpis). Mam nadzieję tylko, że trochę rozjaśniłem Wam ten temat i jeśli zastosujecie choć część tego co tutaj opisałem to będzie sukces.