Jak przyspieszyć swoją witrynę Czas ładowania
Czy chcesz, aby Twoja strona ładowała się błyskawicznie? W tym artykule dowiesz się, jak sprawić, by witryna ładowała się szybciej niż kiedykolwiek wydawało ci się to możliwe.
Aby zrozumieć, dlaczego ważna jest szybka strona internetowa, sprawdź te statystyki: przeciętny użytkownik smartfona opuści witrynę, jeśli nie załaduje się w ciągu 3 sekund; Google uważa, że szybkość stron jest ważnym czynnikiem w rankingach wyszukiwarek; 75% użytkowników Internetu zgodziło się, że nie wrócą na stronę internetową, jeśli nie załadują się w ciągu 4 sekund.
Posiadanie szybkiej strony internetowej jest niezwykle ważne, aby pozostać przy życiu w nowoczesnej erze projektowania stron internetowych. Po prostu nie ma miejsca na powolne strony internetowe.
Zrozumienie czasów ładowania witryny
Czas ładowania strony jest bezpośrednio skorelowany z zapotrzebowaniem na serwerze, aby załadować stronę. Im więcej żądań HTTP jest wysyłanych na serwer i im dłuższe elementy są renderowane, tym wolniejsza będzie strona.
Przykłady żądań HTTP to:
- ładowanie arkuszy stylów CSS;
- ładowanie skryptów;
- ładowanie obrazów;
- ładowanie HTML.
Kolejnym czynnikiem wpływającym na czas ładowania strony jest rozmiar poszczególnych plików i obrazów. Duże obrazy w wysokiej rozdzielczości mogą zająć 10 razy więcej czasu niż zwykłe obrazy, a niepotrzebnie duże pliki mogą znacznie spowolnić renderowanie strony.
Celem szybkiej witryny jest zwiększenie wydajności witryny. Możemy to zrobić poprzez wprowadzenie szeregu zmian w kodowaniu, obrazach i układzie naszej strony internetowej.
Śledzenie prędkości strony
Możemy śledzić nasze wyniki prędkości strony Google Page Speed Insights dla wyszukiwania i Yahoo YSlow . Google ma też wtyczkę prędkości strony, która doskonale sprawdza się w Firefoksie Firebug jest zainstalowane.
Przykładowa strona internetowa
Weźmy stronę, która jest w fazie rozwoju i użyj jej jako przykładu dla tego samouczka. Jego początkowy Wynik Prędkości Strony w Google to 48 na 100. Działa na platformie OS Commerce.
Wynik początkowy Page Speed: 48 na 100
Krok 1: kompresuj obrazy
Pierwszym krokiem jest skompresowanie wszystkich obrazów dla jakości internetowej. Możemy to zrobić za pomocą domyślnego kompresora obrazu wbudowanego w wtyczkę Google Page Speed. Zapisz skompresowaną wersję obrazu w lokalnym folderze na komputerze i ponownie prześlij obraz zamiast nieskompresowanego obrazu.
Zaktualizowany wynik: 61 na 100
Krok 2: skaluj obrazy
Po skompresowaniu obrazów, musimy zmodyfikować nasze obrazy, aby były odpowiednio skalowane do strony internetowej. Pozwala to uniknąć opóźnień serwera potrzebnych do zmiany rozmiaru obrazów. Możesz skalować obrazy w Photoshopie, dostosowując je do tych samych rozmiarów pikseli, które będą w kodzie HTML.
Zaktualizowany wynik: 72 na 100
Krok 3: użyj pamięci podręcznej przeglądarki
Pamięć podręczna przeglądarki przechowuje buforowane wersje zasobów statycznych. Przyspiesza to ogromnie szybkość strony i zmniejsza opóźnienie serwera. Aby włączyć buforowanie, będziesz chciał dodać następujący kod do pliku .htaccess:
# BEGIN Expire headersExpiresActive OnExpiresDefault "access plus 1 seconds"ExpiresByType image/jpeg "access plus 2592000 seconds"ExpiresByType image/png "access plus 2592000 seconds"ExpiresByType image/gif "access plus 2592000 seconds"ExpiresByType text/css "access plus 604800 seconds"ExpiresByType text/javascript "access plus 604800 seconds"ExpiresByType application/javascript "access plus 604800 seconds"ExpiresByType text/html "access plus 2592000 seconds"# END Expire headersZaktualizowany wynik: 78 na 100
Krok 4: połącz obrazy w sprite'y CSS
Obrazy można łączyć w sprite'y CSS w celu zmniejszenia liczby obrazów załadowanych na daną stronę. Sproby CSS to w zasadzie jeden duży obraz złożony z wielu mniejszych obrazów. Łączenie 5 obrazów w jeden sprite CSS to szybki sposób na przyspieszenie witryny, pozwalając przeglądarce załadować jeden obraz zamiast 5 zdjęć.
Najprostszym sposobem na stworzenie sprite'ów CSS jest użycie Spriteme .
Pamiętaj, aby wprowadzić odpowiednie zmiany w swoim CSS po utworzeniu ikonki obrazu. Zwróć także uwagę na instrukcje instalacji na stronie internetowej. Ten program służy do uzyskiwania dostępu do zakładki za pośrednictwem przeglądarki.
Zaktualizowany wynik: 82 na 100
Krok 5: odroczyć parsowanie JavaScriptu
JavaScript, który znajduje się w górnej części dokumentu HTML, może blokować renderowanie strony, co znacznie spowalnia stronę. Aby odroczyć parsowanie JavaScriptu, najlepiej wywołać te skrypty na końcu dokumentu HTML, a nie na początku.
Możesz również odroczyć parsowanie JavaScriptu przy użyciu atrybutu odroczenia. Atrybut odroczenia jest używany w kodzie HTML, aby odroczyć parsowanie kodu javascript, dopóki strona nie zostanie załadowana. Na przykład:
Zaktualizowany wynik: 86 na 100
Krok 6: zminimalizuj HTML, CSS i JavaScript
HTML, CSS i JavaScript mogą być "zminimalizowane" lub skompresowane, aby przyspieszyć ich ładowanie. W Internecie istnieje wiele zasobów, które minimalizują tego typu pliki, minifier jest doskonałym przykładem.
Zaktualizowany wynik: 90 na 100
Inne dostosowania i uwagi
CDN
Możesz także rozważyć ładowanie zasobów statycznych ze swojej witryny w sieci CDN lub "Sieci dostarczania treści". CDN to kolejny sposób drastycznego zmniejszenia opóźnienia serwera poprzez przechowywanie statycznych zasobów w sieci szybko ładujących się serwerów. Znani użytkownicy CDN to ESPN i NBA.com.
Łączenie plików JavaScript i CSS
Ładowanie wielu plików JavaScript i CSS może zabić czas wczytywania strony. Niestandardowe witryny oparte na CMS, które wykorzystują wtyczki i funkcje kompozycji, często mają 15 lub więcej plików JavaScript i tyle samo kaskadowych arkuszy stylów. Te skrypty i arkusze stylów można łączyć w jeden duży plik. Takie działanie radykalnie przyspieszy ładowanie strony i sprawi, że użytkownicy Twojej witryny będą zachwyceni szybkimi czasami ładowania witryny.
Rozwój mobilnej strony internetowej
Budując aplikacje na smartfony dla użytkowników smartfonów, ważne jest, aby trzymać się wskazówek Google dla webmasterów dotyczących aplikacji na smartfony. Chociaż strony mobilne i indeksowanie aplikacji są wciąż pracami Google, ważne jest, aby zwracać uwagę na wymagania Google dotyczące rozwoju smartfonów. Oczekuj dużych zmian w ciągu następnych 5 lat, w jaki sposób Google indeksuje witryny mobilne i aplikacje mobilne. Nie zdziw się, jeśli szybkość stron jest ważnym czynnikiem w indeksowaniu aplikacji mobilnych na Google.
Wniosek
Wprowadzając kilka poprawek, aby przyspieszyć działanie naszej strony, prawie o połowę zmniejszyliśmy czas wczytywania witryny! Może to być różnica między rankingiem na pierwszej stronie Google lub piątej stronie. Może to być również różnica między lądowaniem 200 klientów i utratą na stałe 75% klientów z powodu powolnego ładowania strony.
Posiadanie szybkiej strony internetowej jest obowiązkowe do odniesienia sukcesu w Internecie. Zasadniczo dobrym pomysłem jest utrzymanie szybkości strony wynoszącej 80 lub więcej na wszystkich stronach w witrynie.
Ile czasu poświęcasz na poprawę szybkości witryny? Jakie wskazówki możesz udostępniać? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, prędkość obrazu przez Shutterstock.