Witaj Gościu Zaloguj się lub zarejestruj się.
Zaloguj

Optymalizacja stron internetowych - najlepsze praktyki

Optymalizacja stron internetowych - najlepsze praktyki

Optymalizacja witryn jest bardzo ważnym aspektem, który często jest bagatelizowany przez użytkowników. Najczęściej zaczyna się o tym myśleć, gdy serwer nie wyrabia, a stronę odwiedza zaledwie kilkaset osób.

Wtedy jest już za późno na działanie. Lepiej wykonać porządną optymalizację i oszczędzić na tym, że nie będziemy musieli podwyższać parametrów serwera co pół roku. Oto najlepsze praktyki.

Na początek - kilka przykładów

Zanim przedstawię najlepsze praktyki, chciałbym pokazać, w jaki sposób odczuły brak optymalizacje firmy. Co ważne, przykłady dotyczą gigantów i potentatów Internetu, którzy mają ogromne doświadczenie w tej dziedzinie. Rozumieją, że drobne 20 KB na każdej podstronie może nie tylko obciążyć bardziej serwer przy tysiącach wywołań, lecz wpływa także na konwersję, ilość odwiedzin, pogorszenie opinii i, co najważniejsze, niższe wyniki finansowe. Oto prawdziwe przykłady:

Przykładów takich jeszcze można by wymienić kilka, może nawet kilkanaście. Najważniejsze jest to, że dało się tego uniknąć, zaś najgorsze jest to, że większość portali o dużym natężeniu odwiedzin nie zdaje sobie z tego sprawy. Oczywiście, jeżeli nie przeprowadzimy badań, to nie ujrzymy spadku, więc wydaje się, że wszystko jest w porządku. Nie warto jednak tracić pieniędzy ani odwiedzających, dlatego poznajmy najlepsze techniki optymalizacji.

Zmniejszenie żądań HTTP

Każde zdjęcie, obrazek, skrypt JavaScript, plik CSS itd. wywołuje żądania do serwera, ponieważ przeglądarka musi je pobrać. Wiele osób otwierając witrynę na komputerze nie widzi tej powłoki, jednak działa to tak: użytkownik wywołuje stronę, przeglądarka otrzymuje kod HTML i szuka w nim odwołań (wszystkie miejsca, jak atrybut src w obrazkach, znacznika link oraz script w sekcji HEAD itp.) i wtedy znów wysyła żądanie do serwera o dany zasób. Jeżeli mamy 50 obrazków na stronie, to robi to 50 razy. Ten przykład doskonale ilustruje to, że optymalizacja to nie tylko kompresja, lecz także inne czynniki. W jaki sposób zredukować żądania? I jakie są najczęstsze błędy początkujących (i nie tylko) ?

Optymalizacja obrazków za pomocą tzw. spritów.
Co takiego? Sprite to taki napój, znam go ;) Nie, nie chodzi tutaj o napoje, lecz o zmieszczenie wszystkich np. elementów interfejsu w jeden obrazek. Upakować wszystkie małe ikonki obok siebie i zapisać jako jeden mały plik. Cały ten proces wiąże się oczywiście z większą pracą, ponieważ po jego wykonaniu musimy za pomocą kodu CSS ukierunkowywać przeglądarkę na miejsce, w którym dokładnie znajduje się nasza ikonka w obrazku. Więcej na ten temat powiedz w specjalnym wpisie, który ukaże się jeszcze w tym tygodniu. Tymczasem pozostawiam Cię z przykładem od Google, Amazon oraz FaceBooka jak najlepiej to zrobić:


Nadużywanie dyrektywy @import
Użytkownicy bardziej zaawansowani wiedzą, że do arkusza styli można załączać inny dzięki dyrektywie @import url('adres docelowy arkusza'); Niektórzy jednak nie zdają sobie sprawy, że to więcej szkodzi niż pomaga. Dlaczego? Ponieważ w takim przypadku przeglądarka musi najpierw pobrać arkusz a następnie zaimportować kolejny. 2 żądania jedno po drugim. Lepszą opcją od importowania jest po prostu dodanie go do znacznika link w sekcji HEAD. Pomyślisz, że nic tym nie zyskujemy. A jednak! Robiąc tak jak polecam, przeglądarka pobierze oba arkusze równolegle, co przyśpieszy czas ładowania.

Optymalizacja obrazków

Tutaj najczęściej popełniane są 2 błędy:

Zbyt duże obrazki i fotografie
Nie mam nic do używania dużych obrazów czy fotografii, nie w tym rzecz. Mam na myśli używanie obrazka o wielkości 1000 na 1000, który na stronie wyświetlany jest w wielkości 500 x 500 pikseli. Przeglądarka w takiej sytuacji pobiera duży obrazek, po czym zmniejsza go i osadza. To nie ma jakiegokolwiek sensu. W ten sposób jakość nie będzie większa, natomiast na pewno będzie dłuższy czas przesyłu. Pomijając wyjątki, w których stosujesz ten sam obrazek kilkukrotnie w różnych rozmiarach, przeskaluj swoje obrazki na odpowiednie wielkości. Możesz to zrobić nawet za pomocą zwyczajnego Painta, a redukcja w czasie ładowania strony będzie naprawdę duża.

Zły wybór formatu

Wile osób, szczególnie początkujących, myśli, że jedynym słusznym formatem dla grafik na witrynach internetowych jest JPEG. Kto tak powiedział? Absolutnie się z tym nie zgodzę, jest zupełnie inaczej. Bardzo często grafiki PNG oraz GIF pozwalają zaoszczędzić kilka KB. Jakby tego było mało, format PNG oraz GIF są mniej startne niż JPEG, ponieważ jedynie redukują liczbę odcieni i kolorów a nie zniekształcają obrazka. Kiedy jakiego używać? Na pewno do fotografii JPEG a do mniejszych grafik, które mają mniejszy zakres tonalny (po prostu mniej kolorów) PNG lub GIF. Oczywiście to nie sprawdza się w 100% sytuacji, dlatego warto potestować. Osoby, które posiadają aplikację Adobe Photoshop przy eksporcie grafiki dla internetu mają do wyboru kilka formatów - pozmieniaj je, sprawdź efekty i zdecyduj, który najmniej zajmuje a jednocześnie jest wystarczająco dobrej jakości.


Skrypty JavaScript i ich usytuowanie

Skrypty Javascript mają taką zaletę, że działają u klienta a nie na serwerze, co oznacza, że są uruchamiane u Ciebie na komputerze. Są one często używane do urozmaicenia wyglądu strony. Problem polega w ich usytuowaniu, które jest przez niektórych źle wykonywane. Twoja przeglądarka, gdy napotka skrypt JavaScript w sekcji HEAD, zacznie go ładować i będzie czekać aż zrobi to w pełni przed przystąpieniem do dalszego renderingu strony. Nie trudno się więc domyśleć, że mając potężne skrypty lub gdy komputer odwiedzającego nie jest zbyt wydajny, to może to dosyć sporo opóźnić stronę.

Najlepiej tego typu skrypty umieszczać przy samym końcu strony, gdyż wtedy przeglądarka zacznie inicjalizować skrypt dopiero w momencie, gdy użytkownik będzie miał już praktycznie całą stronę załadowaną. W przeciwnym przypadku skrypt będzie się ładował a użytkownik nie otrzyma jakiejkolwiek informacji o tym, że strona jest ładowana - pamiętaj o tym.

Na koniec tego dodam, że zdaję sobie sprawę z tego, że nie wszystkie skrypty mogą być umiejscowione na samym dole strony, ponieważ mogą wtedy nie zadziałać. Jeżeli się nie da, to trudno - warto jednak takie rzeczy jak kod śledzący z Google Analitycs itp. przenieść do stopki.


Podsumowując

Przedstawione techniki to tylko szczyt góry lodowej, który jest jednak bardzo istotny. Są to zalecenia dla początkujących, którzy dopiero wchodzą w świat pisania stron internetowych. Ten wpis składał się będzie z kilki części, przy czym ta jest pierwszą. Na kolejnych powiem nieco o bardziej zaawansowanych metodach dochodząc w 3 części do optymalizacji po stronie serwera dla nieco bardziej zaawansowanych.

Inne wpisy, które mogą Cię zainteresować

Poniżej przedstawiamy Ci propozycje innych wpisów, które mogą Cię zainteresować. Sprawdź, czytaj i poszerzaj swoją wiedzę.


Czytaj
Odkrywamy tajemnice CSS - Operator + (plus) w stylach

Odkrywamy tajemnice CSS - Operator + (plus) w stylach

Czytaj
Niezadowolony Klient. Co zrobić w takim przypadku?

Niezadowolony Klient. Co zrobić w takim przypadku?

Czytaj
Fuertigo.pl zajmuje 1 miejsce w konkursie na witrynę miesiąca!

Fuertigo.pl zajmuje 1 miejsce w konkursie na witrynę miesiąca!

Czytaj
Firmy pozycjonujące. Co powinieneś o nich wiedzieć.

Firmy pozycjonujące. Co powinieneś o nich wiedzieć.

Komentarze do tego wpisu


comments powered by Disqus