6 sposobów na przyspieszenie ładowania Twojej witryny

Twoja witryna może być najpiękniejszą witryną na świecie, ale nic ci nie pomoże, jeśli ładowanie trwa wiecznie. Spojrzmy prawdzie w oczy. Ludzie są niecierpliwi, a powolna strona internetowa uniemożliwia potencjalnym klientom dokończenie zakupu.

Kiedy idę na zakupy online, spodziewam się, że strony załadują się w najgorszym przypadku w ciągu 5-10 sekund. Jeszcze dłużej i zaczynam się denerwować albo całkowicie wychodzę ze sklepu.

Jasne, niektórzy ludzie mogą być bardziej cierpliwi niż ja, ale po co ryzykować? Graj bezpiecznie i spraw, aby Twoja strona internetowa działała tak szybko, jak to możliwe.

Zdjęcie autorstwa Meddygarnet

Zanim jednak zaczniesz, pierwszą rzeczą, którą musisz określić, jest to, jak szybko jest wystarczająco szybko? Ten zakres optymalizacji witryny w dużej mierze zależy od analityki i danych demograficznych odwiedzających witrynę.

Na przykład 3 lata temu, kiedy moja żona i ja po raz pierwszy uruchomiliśmy nasz sklep internetowy, ponad 35% naszych klientów korzystało z połączenia dialup. W rezultacie musieliśmy dokonać drastycznych cięć w naszym projekcie strony internetowej, aby zapewnić szybkie zakupy przy założeniu tylko 56K szybkości pobierania.

Obecnie tylko 2% naszych klientów korzysta z połączenia dialup (dzięki Bogu!), dzięki czemu możemy bezpiecznie dodawać więcej treści multimedialnych bez wpływu na wrażenia użytkownika.

Aby określić maksymalny rozmiar dowolnej strony, zwykle mnożę 5 sekund przez średnią ważoną przepustowość moich odwiedzających witrynę. Na przykład, jeśli większość moich odwiedzających korzysta z DSL, mogę założyć prędkość pobierania 1 Mbit i zdecydować, że 5 Mbit to maksymalny rozmiar każdej strony internetowej.

To nie jest nauka ścisła. Ostatecznie musisz sam zdecydować, jak szybka ma być Twoja witryna.

We wszystkich jednak przypadkach szybciej znaczy zawsze lepiej. Jak wspomniałem w moim ostatnim poście, szybkość witryny nie zawsze jest funkcją twojego hostingu. W rzeczywistości przez większość czasu to webmaster jest winny powolnej witryny, a nie wolnego serwera. W tym artykule znajdziesz kilka wskazówek, jak przyspieszyć działanie.

Zdecyduj, co jest najważniejsze i zmień kolejność ładowania

Przyspieszenie witryny nie zawsze polega na wycinaniu obrazów i treści. Czasami możesz polubić swoją witrynę dokładnie taką, jaka jest i nie masz ochoty niczego zmieniać.

Jeśli tak jest, a Twoja witryna działa wolno, często możesz uciec, po prostu ustalając priorytet sposobu wczytywania strony.

Co chcesz, aby użytkownik zobaczył jako pierwszy? W większości przypadków Twoi odwiedzający nie będą mieli nic przeciwko wolniejszej witrynie, o ile najpierw ładują się ważne rzeczy, a później kończą się puch.

Na przykład z MyWifeQuitHerJob.com zawsze upewniam się, że wszystkie soczyste treści pojawiają się najpierw przed reklamami. W ten sposób, jeśli reklamy ładują się zbyt wolno, nie przeciąga to całego bloga.

Strony internetowe zawsze ładują się w kolejności, więc zawsze powinieneś umieszczać rzeczy, które chcesz załadować jako pierwsze na górze strony, a najmniej ważne rzeczy na końcu dokumentu HTML.

W przypadku elementów, które muszą pojawić się w określonej pozycji na stronie, do kontrolowania kolejności ładowania można użyć javascript lub css.

Na przykład, mimo że moja reklama w formacie długi baner 728×90 pojawia się na samej górze strony MyWifeQuitHerJob.com, upewniam się, że ładuje się ona jako ostatnia, wykonując następujące czynności.

• Tworzę pusty <div id=”banner728″> tam, gdzie powinna być reklama i ustawiam jego id na “banner728”. To skutecznie tworzy pusty symbol zastępczy, który mogę później załadować za pomocą javascript
• Na samym końcu strony zamieszczam następujący fragment kodu javascript
  <script type=”text/javascript”>
  document.getElementById(“banner728”).innerHTML = “pożądany kod banera reklamowego”;
  </script>
  Ten kod wyszukuje symbol zastępczy „banner728”, który ustawiłem powyżej i wstawia baner reklamowy do elementu <div>. Ponieważ ten skrypt znajduje się na samym końcu pliku, ładuje się jako ostatni po wszystkim innym.

Nie używaj zmiany rozmiaru obrazu HTML

Częstym błędem, który popełnia wielu początkujących, jest poleganie na html do zmniejszania i zmiany rozmiaru obrazów. Chociaż ta technika działa i wydaje się nieszkodliwa, całkowicie zabije wydajność Twojej witryny.

Powodem jest to, że cały oryginalny obraz musi zostać załadowany przed wyświetleniem, nawet jeśli pokazujesz tylko znacznie mniejszy obraz.

Aby uchronić się przed wpadnięciem w tę pułapkę, upewnij się, że poświęcisz trochę czasu na zmniejszenie obrazu do żądanych wymiarów przed wyświetleniem go w witrynie. Nie ciągnij obrazów prosto z aparatu cyfrowego.

Zoptymalizuj swoje obrazy

Ludzkie oko znacznie lepiej wybacza jakość obrazu, gdy patrzy na samodzielny obraz na monitorze komputera. Dlatego możesz ujść na sucho ze znacznie niższą jakością obrazów dla swojej witryny.

Upewnij się, że optymalizujesz i zmniejszasz swoje obrazy tak bardzo, jak to tylko możliwe, zanim wyświetlisz je na swojej stronie. Często wybieram jakość JPEG na poziomie 50 procent lub mniej, używając Photoshopa z obrazami w moich witrynach.

Jeśli używasz GIFS, upewnij się, że nie używasz większej palety kolorów, niż naprawdę potrzebujesz. Jeśli możesz uciec tylko z 16 kolorami, wybierz swój GIF z tylko 16 paletą kolorów.

Przeanalizuj wszystkie swoje GIFS, aby upewnić się, że żadne z gniazd kolorów nie zostanie zmarnowane przez duplikaty.

Hostuj wideo i duże obrazy z zewnętrzną stroną

O ile nie hostujesz swojej witryny na rozbudowanym zestawie serwerów, bogata zawartość multimedialna spowolni Twoją witrynę do indeksowania. Ogólnie rzecz biorąc, znacznie bardziej ekonomiczne jest hostowanie filmów i większych plików w usłudze innej firmy z bardziej niezawodną infrastrukturą, która lepiej obsługuje przesyłanie strumieniowe.

Na przykład zamiast hostować filmy na własnym serwerze, dlaczego nie skorzystać z YouTube lub Vimeo? Jeśli chcesz być właścicielem treści, które produkujesz, możesz również zapłacić i korzystać z usługi takiej jak S3 firmy Amazon. Zostaw treści o wysokiej przepustowości dla dużych chłopców.

Unikaj używania kodu strony trzeciej lub obrazów z łączem hotlink

Za każdym razem, gdy łączysz obraz lub wykorzystujesz kod, który jest hostowany na innym serwerze, narażasz prędkość swojej witryny na ryzyko. Jeśli serwer strony trzeciej jest powolny lub spowolniony, może również spowodować wyłączenie Twojej witryny, dlatego ważne jest, aby zminimalizować użycie kodu strony trzeciej.

Ponadto za każdym razem, gdy witryna uzyskuje dostęp do serwera innej firmy, należy przeprowadzić wyszukiwanie DNS, co może zająć trochę czasu, w zależności od przeciążenia sieci.

Kilkaset milisekund opóźnienia może nie wydawać się dużym, ale jeśli pobierasz kod z 10 różnych serwerów, te wyszukiwania mogą dodać do kilku sekund opóźnienia.

Skorzystaj z buforowania i kompresji

Większość stron internetowych bardzo dobrze kompresuje tekst i tekst. Dlatego jeśli włączysz kompresję na swoim serwerze, możesz skrócić czas pobierania nawet o 75%.

Niestety, nie wszystkie współdzielone hosty internetowe mają włączoną kompresję na swoich serwerach. Jeśli Twoja witryna znajduje się na wspólnym hoście internetowym, zapytaj ich, czy ich serwery obsługują mod_deflate lub mod_gzip.

Jeśli Twój serwer obsługuje kompresję, upewnij się, że włączyłeś ją w swojej witrynie, wykonując czynności opisane w tym artykule. Jeśli korzystasz z WordPressa, wtyczka WP-SuperCache już obsługuje kompresję.

Oprócz kompresji możesz przyspieszyć działanie witryny, buforując często odwiedzane strony w witrynie. W przypadku naszego sklepu internetowego idę o krok dalej i tworzę statyczne strony dla stron o dużym natężeniu ruchu, które nie zmieniają się zbyt często.

Prędkość ma znaczenie

Możliwe, że ktoś tam prawdopodobnie przegląda Twoją witrynę na znacznie wolniejszym połączeniu niż Twoje własne. I zawsze musisz brać pod uwagę najniższy wspólny mianownik, aby zmaksymalizować potencjał zysku swojego biznesu online.

Byłem zszokowany, widząc, że nasz sklep internetowy nadal ma klientów dial-up! Jeśli nadal je mam, ty też możesz.