Jednym z najważniejszych aspektów Twojej witryny jest szybkość ładowania; użytkownicy chcą natychmiast otrzymać zdjęcie bez żadnych przerw, a jeśli nie jesteś w stanie im tego dać, to nie zawahają się długo szukać informacji gdzie indziej. W tym artykule omówimy 5 sposobów, które pozwolą Ci przyspieszyć czas ładowania Twojej witryny.
1. Użyj YSlow do śledzenia czasu ładowania strony
Znając ilość czasu potrzebnego do załadowania stron, możesz zidentyfikować problematyczne obszary. Da ci to również kolejną zachętę do zapoznania się z funkcjonalnością i próby naprawienia sytuacji.
Zanim zaczniemy, musisz zainstalować YSlow, jeśli jeszcze tego nie zrobiłeś. YSlow to rozszerzenie do Mozilla Firefox które można znaleźć na tej stronie:
Teraz otwórzmy jakąś witrynę. Powiedzmy, że sześć wersji, dzięki czemu mamy w przybliżeniu te same dane (po prostu otwórz tę witrynę w nowej karcie przeglądarki).
W prawym dolnym rogu przeglądarki masz specjalny panel z ikoną (patrz Rysunek 1). Nieco dalej od tego panelu, po załadowaniu strony, obok „YSlow” zobaczysz numer. Ta liczba to czas w sekundach, w którym ta strona załaduje się w Twojej przeglądarce. Chcemy, aby ta liczba była jak najmniejsza.
Najczęstsze „hamulce” to następujące obiekty lub operacje:
- Za dużo żądań HTTP
- Nieskompresowane pliki JavaScript
- Brak czasu wygaśnięcia nagłówka dla plików graficznych
Za kilka minut przyjrzymy się temu bliżej.
Aby zaznajomić się z tym systemem, przejrzyj kilka witryn i sprawdź ich czasy ładowania. Możesz przetestować Google, Facebook i kilka swoich ulubionych blogów/stron, które odwiedzasz najczęściej. Pamiętaj, że pliki i obrazy JavaScript to te, które najbardziej wpływają na prędkość.
W pełni wykorzystujemy YSlow
Oprócz YSlow obliczania czasu ładowania strony, podane rozszerzenie zapewnia również obszerne informacje na temat tego, co należy naprawić, aby zoptymalizować ładowanie witryny, dzięki czemu można załatać dziury.
Aby uzyskać takie informacje, kliknij zakładkę Wydajność. Po zindeksowaniu witryny YSlow poda ogólny wynik, który będzie charakteryzował wydajność Twojej strony.
Dostęp do informacji można przyspieszyć za pomocą CDN (sieć dostarczania treści). CDN najlepiej nadaje się do dużych witryn. Służą do dystrybucji informacji na wielu serwerach w różne części pokój. W ten sposób informacje zostaną pobrane z odpowiedniego serwera (który znajduje się najbliżej użytkownika), aby nie przechodzić przez osobiste routery. YSlow śledzi również żądania CDN.
Ale ludzie na ogół nie używają CDN (co jest dość drogie).
Klasyfikacja rodzajów błędów
Przejdźmy teraz przez każdy element, który znajduje się we wspomnianym rozszerzeniu. Poniżej znajdziesz podsumowanie tego, jak oceniane są Twoje strony i jak radzić sobie z problemami, aby osiągnąć maksymalną wydajność.
Twórz jak najmniej żądań HTTP: Żądanie HTTP występuje, gdy przeglądarka wysyła żądanie do serwera. To samo może się zdarzyć przy łączeniu skryptów, plików CSS, obrazów, a także żądań asynchronicznych, zarówno od strony klienta, jak i od strony serwera (Ajax i inne podobne technologie). Jednak jeśli chodzi o wydajność systemu, warto zastanowić się ile podobne prośby dzieje się na Twojej stronie. Jednym z rozwiązań jest użycie buforowania, aby pomóc komputerom klienckim szybciej ładować skrypty, CSS i obrazy.
Dodawanie nagłówków Expires: 80% ładowania strony skupia się na pobieraniu skryptów, zdjęć i plików CSS. W większości przypadków te rzeczy nie zmieniają się na komputerach użytkowników. Dodając trochę kodu do pliku .htaccess, możesz buforować zduplikowane pliki na lokalnym komputerze użytkownika (o tym, jak to zrobić później).
Komponenty Gzip: Zastosuj Gzip lub skompresuj pliki JS, obrazy, Dokumenty HTML, pliki CSS itp. umożliwia użytkownikom pobieranie informacji w zmniejszonym rozmiarze, co znacznie zwiększa szybkość ładowania strony. Ponadto pozwoli to zaoszczędzić miejsce na serwerze, jednak rozpakowanie danych może spowolnić odpowiedź, a to zależy bezpośrednio od przeglądarki użytkownika.
Umieść CSS na górze strony: Jeśli umieścisz swoje połączenie CSS na górze strony, oznacza to, że zostaną załadowane jako pierwsze, a obrazy i skrypty później.
Umieść JS na dole strony: Teraz, gdy pliki CSS ładują się na górze, nadszedł czas, aby umieścić skrypty JS tuż przed tagiem zamykającym. Umożliwi to wyrenderowanie strony, a następnie dołączenie niezbędnych skryptów.
Unikaj wyrażeń CSS: osobiście nigdy nie używałem wyrażeń CSS (zwanych również właściwościami dynamicznymi). Te wyrażenia to natywne koncepcje programowania IE (takie jak wyrażenia warunkowe) w CSS. Technologia używana w IE8 i we wszystkich innych wersjach nie będzie już obsługiwana, więc w każdym przypadku będziesz musiał wiązać się z pisaniem wyrażeń CSS. PHP jest bardziej odpowiedni do takich celów, na przykład do ładowania różnych stylów CSS w zależności od pewnych warunków, takich jak liczba losowa, pora dnia lub przeglądarka użytkownika.
Napisz JS i CSS w osobnych plikach: jeśli umieścisz swoje skrypty w JS i style css w osobnych plikach przeglądarka może je łatwo buforować, dzięki czemu Twoja strona będzie ładowała się szybciej w przyszłości.
Skróć czas wyszukiwania DNS: gdy użytkownik wpisze nazwę Twojej witryny w pasku przeglądarki, wyszukiwanie DNS adresu IP, pod którym znajduje się Twoja witryna, rozpoczyna się natychmiast. Im więcej zewnętrznych źródeł zawiera Twoja witryna, tym więcej czasu zajmie wyszukiwanie DNS. Z reguły jedno takie wyszukiwanie trwa 60-100 milisekund.
Zminifikuj JS: Oprócz kompresji za pomocą gzip, minifikacja plików JavaScript pozwoli Ci uprościć skrypty, pozbywając się zbędnych spacji, tabulatorów i innych znaków specjalnych, które sumują się do dużych rozmiarów plików. To oczywiste – im mniejsze pliki, tym szybciej ładują się strony. Możesz użyć narzędzia JSMIN do zminimalizowania plików JavaScript.
Unikaj przekierowań: nie ma znaczenia, gdzie wykonujesz przekierowanie, w JS, HTML czy PHP. Tak czy inaczej, Twoja przeglądarka otrzyma pusty nagłówek strony, którego załadowanie zajmie trochę czasu. Staraj się więc nie używać przekierowania tam, gdzie można go uniknąć.
Unikaj zduplikowanych wczytywania skryptów: jeśli Twoja przeglądarka wczytuje skrypt więcej niż raz, znacząco wpłynie to na ładowanie strony. Matematyka tutaj nie jest trudna. Im więcej pobrań tych samych plików, tym więcej dłuższe ładowanie stron. Przejrzyj swoje skrypty i upewnij się, że nie wywołujesz jQuery 2 lub 3 razy. To samo dotyczy skryptów JS.
Cóż… myślę, że to wystarczy. Przejdźmy teraz do następnej zakładki YSlow, zanim przyjrzymy się innym technikom, które zwiększą szybkość ładowania strony.
Karta Składniki pozwoli Ci określić, ile wysiłku musisz włożyć, aby poprawić prędkość pobierania. Tutaj znajdziesz informacje o tym, ile waży każdy plik, a także ile czasu zajmuje jego pobranie. Będziesz także mógł zobaczyć, które pliki są skompresowane gzipem, dowiedzieć się, jaki jest czas odpowiedzi i czy pliki są buforowane na komputerze użytkownika oraz kiedy sam cache się kończy. Informacje te mogą być dla Ciebie przydatne przy ocenie problemów Twojej witryny, będziesz wiedział, co jest z Tobą nie tak, a co należy zoptymalizować.
I na koniec przejdźmy do ostatnia karta Zakładka Statystyki. Tutaj znajdziesz informacje o wszystkich żądaniach HTTP, zarówno dla zwykłych plików, jak i tych z pamięci podręcznej. Wartość Pusta pamięć podręczna wskazuje, że te pliki muszą zostać załadowane w celu wyrenderowania strony. Z kolei Primed Cache to pliki, które zostały już zbuforowane przez przeglądarkę użytkownika. Oznacza to, że nie trzeba ich pobierać.
2. Użyj sprite'ów CSS, aby zredukować żądania HTTP
Sprite'y CSS są prawdopodobnie najważniejszą rzeczą, jaką ludzkość wymyśliła odkąd Tesla wynalazł elektryczność… Właściwie to powiedziałem… ups, miałem na myśli Edisona.
No może nie do końca najfajniejsze, ale jednak.
Sprite CSS może znacznie poprawić szybkość ładowania strony, zmniejszając liczbę żądań HTTP, które są wysyłane w celu pobrania obrazów.
Możesz znaleźć wiele samouczków, które mówią o tym, jak łatwo nawigować po sprite'ach CSS - ogólnie o używaniu ich w interfejsie użytkownika.
Przyjrzyjmy się teraz, jak YouTube używa sprite’ów CSS. Tak wygląda sprite, którego używają:
YouTube używa tego pliku w dość oryginalny sposób. Ładują go jako tło do klasy duszka. Gdy konieczne staje się wybranie elementu, pozycja początkowa jest wybierana, gdy Pomoc CSS właściwości background-position, a następnie zastosowanie wysokości i szerokości.
Spróbujmy czegoś podobnego. Poeksperymentujmy z tym samym obrazem z YouTube.
W poniższym przykładzie wyświetlamy na ekranie logo YouTube. Używając tej samej klasy duszka i tego samego obrazka, możemy stworzyć obrazek, który zmienia się po najechaniu myszą.
Korzystając z tego obrazu, możemy zredukować wszystkie połączenia do pojedynczego żądania HTTP. Cóż, jaki jest efekt?
Kolejna zaleta Sprites CSS polega na tym, że po zastosowaniu pseudoklasy :hover obraz nie zniknie na kilka chwil (co zajmuje załadowanie nowego obrazu), jak to się dzieje bez Wykorzystanie CSS duszki.
3. Załaduj pliki CSS na początku, JavaScript na końcu
W przypadku niektórych witryn zmniejszenie liczby żądań HTTP może spowodować uszkodzenie funkcjonalności. Innym sposobem na przyspieszenie ładowania strony jest umieszczenie wszystkich połączeń z plikami JavaScript na końcu dokumentu.
Warto również zwrócić uwagę:
- Załaduj pliki CSS w sekcji tuż przed początkiem tagu body.
- Dołącz JavaScript tuż przed zamykającym tagiem body.
Jeśli zastosujesz się do naszych rad, pozwolisz swoim użytkownikom podziwiać Twoje witryny, podczas gdy JavaScript ładuje się w tle.
Uwaga: jeśli nie chcesz się ruszać Tagi JavaScript, ponieważ boisz się, że funkcjonalność spadnie, to polecam skorzystać z właściwości defer. Zastosuj to w ten sposób: