Najlepsze praktyki i wskazówki dotyczące ulepszeń w zakresie szybkości ładowania witryny

Jeśli chodzi o dzisiejszych użytkowników online, chcą tego, czego chcą i chcą tego teraz. Wszyscy byliśmy w sytuacji, w której zasób online ma zbyt niską prędkość ładowania strony i po prostu kliknęliśmy. Dzięki mediom społecznościowym, telewizji i wszystkim innym nowoczesnym technologiom, współcześni ludzie nie są do końca znani ze swojej cierpliwości i skupienia.

Szybkość to cichy zabójca stron internetowych. Prawie połowa wszystkich użytkowników witryny oczekuje, że Twoja witryna załaduje się w ciągu 2 sekund lub mniej. Może to zabrzmieć szaleńczo, ale prawdą jest, że nawet kilka sekund wolnego czasu ładowania odstraszy użytkowników bez zastanowienia. Rzeczywistość jest taka, że ​​potrzebujesz swojej witryny, aby ładować się poprawnie i szybko.

Najlepsze praktyki dotyczące szybkości ładowania witryny

Możesz nie zdawać sobie sprawy, jak powolna jest Twoja witryna, chyba że sam ją przetestujesz. Na szczęście możesz to zrobić za darmo w Google PageSpeed. Jest to narzędzie internetowe do określania czasów ładowania i znajdowania obszarów problemowych. Jak układa się czas ładowania Twojej witryny? Jeśli potrzebujesz trochę pracy, nie martw się. Skrócenie czasu ładowania witryny za pomocą kilku kliknięć jest prostsze niż myślisz. Oto kilka dodatkowych wskazówek na początek.

Użyj kompresji Gzip, aby uzyskać lepszą prędkość ładowania strony internetowej

Kompresja Gzip to potężne narzędzie, które zmniejsza rozmiar odpowiedzi o około 70%, co jest imponujące. Gzip to coś, co odbywa się za pośrednictwem twojego hosta, więc musisz zapytać swojego hosta internetowego, czy używa tej kompresji na swoich serwerach. Dzięki Gzip skracasz czas odpowiedzi bez uszczerbku dla jakości swoich filmów, obrazów lub innych elementów.

Możesz uruchomić test, aby sprawdzić, czy Twoja witryna jest GZIPPED i uruchomić Test kompresji Zip. Sposób działania Gzipowania polega na zmniejszeniu rozmiaru odpowiedzi HTTP. Ostatecznie zmienia wagę strony.

Buforuj swoje pliki

Buforowanie ma miejsce, gdy wersja Twojej witryny jest przechowywana w przeglądarkach użytkowników. W ten sposób, gdy ponownie odwiedzą Twoją witrynę, pojawi się wcześniejsza wersja, która będzie się ładować do czasu odświeżenia nowej wersji. Buforowanie może skrócić czas ładowania z ponad 2 sekund do mniej niż 1 sekundy. To duży skok i powinieneś się nim zainteresować. Na szczęście konfiguracja pamięci podręcznej w Twojej witrynie jest łatwa. Jeśli korzystasz z WordPressa, możesz skorzystać z darmowej wtyczki W3 Total Cache. Buforowanie jest dziś koniecznością, aby dodać dodatkowy wzrost wydajności ładowania witryny.

Oprócz buforowania po stronie serwera należy również włączyć buforowanie przeglądarki. Jest to zasadniczo sposób na nakazanie przeglądarkom przechowywania kopii plików statycznych, takich jak obrazy, pliki CSS i JS w przeglądarce, aby odwiedzający nie musieli czekać na ponowne pobranie tych plików, gdy ponownie odwiedzą Twoją witrynę. Możesz przeczytać więcej w tym zbiorze informacji o WordPressie wykorzystującym buforowanie przeglądarki.

Uaktualnij hosta swojej witryny

Posiadanie odpowiedniego hosta dla Twojej witryny może mieć wpływ na wydajność Twojej strony. Możesz wprowadzić tyle zmian w swojej witrynie, ile chcesz, ale jeśli nie zauważysz znacznej poprawy, winę może ponosić Twój host. Kuszące jest wybranie najtańszej opcji hostingu przy pierwszym uruchomieniu witryny. Chociaż może to być w porządku przez jakiś czas, prawdopodobnie wyrośniesz z tego, jeśli hostujesz dużo plików lub masz większy ruch.

Prawdopodobnie udostępniane są tańsze plany, a to oznacza, że ​​wszelkie problemy ze stronami sąsiada będą miały wpływ również na Twoją. Posiadanie serwera dedykowanego pozwala uniknąć wszelkich problemów, które mogą wystąpić, jeśli jesteś na serwerze współdzielonym. Będziesz mieć również więcej opcji obsługi klienta, jeśli potrzebujesz pomocy w zakresie czasu reakcji.

Kup hosting

Sprawdź motyw swojej witryny

Sposób, w jaki Twoja witryna jest zaprojektowana, ma również wpływ na to, jak dobrze i szybko wyświetla się ona odwiedzającym. Przełączanie motywów może wystarczyć, aby zwolnić kilka cennych sekund w czasie ładowania witryny.

Korzystanie z profesjonalnego narzędzia do tworzenia stron internetowych lub motywu sprawi, że Twoja witryna nie będzie przepełniona niepotrzebnym, niechlujnym kodem. Dlatego ważne jest, aby spojrzeć na coś więcej niż tylko estetykę szablonu, motywu lub kreatora witryny. Ponadto rozważ zalogowanie się do swojej witryny lub aplikacji internetowej. Rejestrowanie witryn internetowych pomaga wykrywać problemy, zanim się pojawią, i może zapobiec ich wystąpieniu. Alternatywnie możesz wysyłać wiadomości dziennika bezpośrednio za pomocą narzędzia takiego jak aplikacja Papertrail.

Zmniejsz swoje pliki Java i CSS

Większość dzisiejszych witryn internetowych używa wielu plików JavaScript i CSS, które mogą być traktowane indywidualnie w przeglądarkach użytkowników. Zbyt wiele żądań na raz zmniejszy prędkość ładowania witryny. Jeśli będziesz w stanie zminimalizować wszystkie te pliki, nie zwiększysz tak dużej wagi czasu ładowania witryny.

Dobrym pomysłem jest ładowanie plików Java i CSS zewnętrznie zamiast zapychania każdej strony. Następnie użytkownicy muszą tylko ładować pliki tak, jak się pojawiają, a nie za każdym razem, gdy ktoś odwiedza nową stronę w Twojej witrynie. Nie zapychaj przeglądarek użytkowników zbyt dużą liczbą plików.

Przenoś swój ładunek przez sieć

Jeśli masz duży ruch, musisz poważnie podejść do swojej sieci. Usługa Content Delivery Network (CDN) dostarcza pliki bezpośrednio do użytkowników, korzystając z serwerów w wielu różnych obszarach geograficznych. Oznacza to, że między miejscami jest mniej czasu, dzięki czemu Twoja witryna może ładować się szybciej. Najbardziej znanym CDN jest Amazon CloudFront i łatwo go zintegrować z obecną witryną.

Wypróbuj zewnętrzne platformy hostingowe

Podobnie jak w przypadku CDN, możesz hostować swoje pliki na zewnętrznych platformach hostingowych, aby uniknąć spowolnienia czasu ładowania. Najczęściej dotyczy to plików wideo. Filmy są dość ogromne, a przesyłanie ich bezpośrednio do Twojej witryny zajmie dużo miejsca. Mogą one z łatwością przekraczać 100 MB, więc hostowanie filmów lub innych dużych plików na własnym serwerze nie jest mądrym posunięciem.

Lepszym pomysłem jest hostowanie tych plików na zewnątrz. YouTube i Vimeo to świetne opcje dla plików wideo. Stamtąd możesz umieścić wideo w swojej witrynie. Oszczędza miejsce i nie spowalnia czasu ładowania. Jest też o wiele prostsze!

W szczególności korzystanie z YouTube otwiera Twoje treści dla zupełnie nowych odbiorców. W rzeczywistości YouTube jest uważany za jedną z największych wyszukiwarek i przyciąga ponad miliard użytkowników miesięcznie. Jest bezpłatny i możesz przesyłać filmy do 15 minut (lub więcej, jeśli prześlesz prośbę). Po prostu nie możesz się pomylić.

Sprawdź swoje żądania HTTP

Yahoo twierdzi, że 80% czasu ładowania witryny internetowej pochodzi z pobierania wszystkich różnych części strony. Chociaż omówiliśmy już najlepsze praktyki, jeśli chodzi o pliki Java i CSS, co z resztą? Im więcej elementów na stronie należy wczytać, tym dłużej zajmie pełne wyświetlenie strony.

Możesz sprawdzić, ile z tych żądań jest realizowanych, przechodząc do swojej przeglądarki. Google Chrome jest wyposażony w narzędzia programistyczne, które skupiają się na żądaniach HTTP. Aby uzyskać dostęp do tych narzędzi, kliknij prawym przyciskiem myszy swoją stronę w Google Chrome, kliknij Sprawdź, a następnie przejdź do karty Sieć.

Teraz możesz zobaczyć, jak długo trwa ładowanie każdego pliku w sekcji „Czas”. W rogu zobaczysz także całkowitą liczbę próśb. Zmniejszenie liczby żądań, które zajmują najwięcej czasu, to prosty sposób na przyspieszenie czasu ładowania witryny. Czytaj dalej, aby dowiedzieć się, jak najlepiej łączyć pliki w następnej wskazówce.

Połącz i zminimalizuj pliki HTML

Kiedy minimalizujesz plik, eliminujesz niepotrzebne odstępy lub kod. Wszystkie te małe rzeczy mogą wydawać się nieistotne, ale wydłuża to czas ładowania. Celem jest, aby pliki HTML były jak najszczuplejsze.

Sprawdź swoją witrynę, aby zobaczyć, czy nie ma niepotrzebnych stron, których już nie używasz. Czy są miejsca, w których można wyeliminować białe znaki lub niepotrzebny kod? Na koniec połącz pliki HTML, aby upewnić się, że nie zapychasz czasu ładowania witryny.

Użyj zewnętrznego CSS

CSS to sposób dołączania elementów stylu i projektu do swojej strony. Twoja witryna internetowa może uzyskać dostęp do zewnętrznego pliku, który ładuje się przed Twoją stroną, lub uzyskać dostęp do wbudowanych stylów. Dołączenie kodu CSS do samego dokumentu HTML dodaje dużo kodu. Jak powiedzieliśmy wcześniej, to nie jest dobre.

Zamiast tego powinieneś użyć zewnętrznego CSS, który jest ładowany w nagłówku twojego HTML. Nie umieszczaj kodu CSS w kodzie HTML, jeśli możesz tego uniknąć. Dotyczy to zwłaszcza divów lub nagłówków. Jest znacznie czystszy i szczuplejszy, jeśli używasz zewnętrznego arkusza stylów. Dużo łatwiej jest też edytować.

Jeśli nie masz pewności co do stanu swojego CSS, użyj narzędzi dostarczania CSS, aby zobaczyć, jak układają się Twoje pliki CSS. Dzięki temu dowiesz się, gdzie znajduje się Twój plik zewnętrzny i czy masz jakiekolwiek elementy wbudowane w swoim kodzie HTML. Jeśli to możliwe, używaj tylko jednego zewnętrznego pliku CSS. Prawdopodobnie możesz łączyć pliki, jeśli masz więcej niż jeden.

Odłóż ładowanie JavaScript

Odraczając plik, taki jak JavaScript, upewniasz się, że reszta witryny wczytuje się poprawnie przed załadowaniem dodatkowych elementów Java. Czasami odroczenie javy jest tak proste, jak użycie wtyczki. Innym razem konieczne będzie ręczne dodanie skryptu HTML, aby powiadomić witrynę, że chcesz wczytać Javę jako ostatnią.

Ten skrypt wymaga zewnętrznego pliku JavaScript. Tutaj znajduje się pełny samouczek dotyczący odraczania Java. Chociaż nie jest to duża różnica, może to sprawić, że Twój papier będzie się ładować szybciej.

Sprawdź swój czas do pierwszego bajtu

Twój czas do pierwszego bajtu (TTFB) to czas, przez jaki przeglądarka czeka, zanim zacznie ładować pierwszy bajt danych. Według Google twój TTFB powinien wynosić poniżej 200 ms. Jest to jednak problem po stronie serwera, więc wielu programistom internetowym łatwo je przeoczyć.

Gdy użytkownicy odwiedzają Twoją witrynę, nie rozpoczyna się ona automatycznie wczytywania. Choć może się wydawać, że jest to proces błyskawiczny, najpierw zachodzą 3 kroki. Twoja przeglądarka wysyła początkowe żądanie HTTP do serwera hostującego witrynę, a stamtąd kroki to wyszukiwanie DNS, przetwarzanie serwera i odpowiedź.

Po raz kolejny narzędzia dla programistów Chrome pokażą, jak długo ten proces trwa na Twojej stronie internetowej. Będzie to również w dużej mierze zależeć od siły połączenia internetowego. Powolne połączenie ma wolniejsze TTFB. Sprawdź swój TTFB, aby upewnić się, że jest poniżej 200 ms. Jeśli tak nie jest, pora porozmawiać z gospodarzem o właściwym rozwiązaniu. Możesz nie mieć wystarczającej ilości miejsca lub masz zbyt duży ruch.

Najpierw treść nad zakładką

Czasami masz długie strony, których ładowanie zajmuje trochę czasu. To jest rzeczywistość. Jednak upewnienie się, że informacje powyżej strony wczytują się jako pierwsze, może zaoszczędzić niektórych odwiedzających. Popraw wygodę użytkownika, upewniając się, że cała górna część strony pojawia się szybko.

Jest to proces zwany „leniwym ładowaniem”, a nazwa ma sens. Przypomina to powolne wczytywanie strony, ale zaczyna się na górze, gdzie Twoi użytkownicy są najbardziej skoncentrowani. Dzięki leniwemu ładowaniu Twoi użytkownicy mogą zobaczyć najlepsze treści i przyspieszyć ładowanie witryny bez konieczności czekania na załadowanie reszty strony. To świetny pomysł, ponieważ wyobraź sobie, że masz ponad 10 zdjęć na całej stronie. Nie chciałbyś, aby odwiedzający czekali, aż wszystkie te obrazy zaczną czytać.

Lazy load używa jQuery.sonar do ładowania tylko obrazów, które są widoczne. Istnieje wiele wtyczek, które ułatwiają leniwe ładowanie stron, ale oto pełny samouczek, jak zrobić to ręcznie. Twoi użytkownicy będą zadowoleni, że nie będą już musieli czekać na zawartość strony widocznej na ekranie.

Sprawdź swoje rozmiary obrazów

Przesyłanie obrazów bez sprawdzania rozmiaru pliku jest łatwe. Może to być dobre od czasu do czasu, ale może łatwo spowolnić Twoją witrynę, jeśli nie będziesz ostrożny. Kiedy zapisujesz swoje obrazy, spróbuj je zapisać za pomocą opcji „Zapisz dla Internetu”. Jest to dostępne za pomocą narzędzi takich jak Photoshop lub Fireworks. Dzięki funkcji „Save for web” rozmiar obrazu można zmniejszyć bez utraty jego ostrości.

Zasadniczo unikaj większych rozmiarów plików. PNG podczas zapisywania zdjęć. Możesz sprawdzić właściwości obrazu, aby zobaczyć, czy zbliżają się do większych rozmiarów. Wreszcie, jeśli masz już duże obrazy w swojej witrynie, użyj wtyczki lub ręcznie skompresuj te pliki, aby przyspieszyć ładowanie witryny.

Usuń niepotrzebne dodatki, aby przyspieszyć ładowanie witryny

Czasami dodajemy nowe rzeczy do naszych stron i zapominamy o nich. Albo przechodzimy do czegoś innego, albo nie potrzebujemy już rozwiązania z przeszłości. Niezależnie od powodu, upewnij się, że często sprawdzasz swoją witrynę, aby upewnić się, że nie marnujesz miejsca na nic, czego nie używasz. Dotyczy to wszystkich poniższych:

• Obrazy;
• Wtyczki;
• elementy nawigacyjne;
• Elementy wystroju;
• Strony;
• Zarchiwizowane posty na blogu.

Bez względu na to, jak małe, wpłyną one negatywnie na szybkość ładowania witryny. Ponadto mogą tworzyć słabe obszary w bezpieczeństwie witryny, szczególnie w przypadku wtyczek. Można je łatwo uszkodzić, a to może obniżyć twoje bezpieczeństwo. Nabierz nawyku regularnego przeglądania swojej witryny pod kątem nieaktualnych dodatków.

Ogranicz przyciski udostępniania społecznościowego

Przyciski udostępniania społecznościowego to świetny sposób na zachęcanie do zaangażowania w mediach społecznościowych. Jednak musi być jakiś limit. Te przyciski są czasami bardzo skuteczne. Mogą jednak być również biustem. Możemy się zgodzić, że te przyciski udostępniania społecznościowego wykorzystują kilka zewnętrznych skryptów JavaScript, które spowalniają Twoją witrynę.

W szczególności Facebook był głównym winowajcą tego. Skrypty Facebooka mogą spowolnić działanie witryny za pomocą przycisków udostępniania. Zastanów się, czy te przyciski udostępniania są naprawdę warte zachodu. Nadal możesz je zachować, ale zatrzymaj tylko te, które okazały się być najlepszymi.

Dostawa asynchroniczna

Mówiąc o kodach firm trzecich, wiele może się nie udać. Jeśli strona trzecia doświadczy awarii lub zostanie nagle spowolniona, Twoja strona może łatwo utknąć podczas próby załadowania tego zasobu, niezależnie od tego, czy jest to przycisk udostępniania społecznościowego, czy skrypt analizy sieci.

Rozwiązaniem tego spowolnienia jest dostarczanie asynchroniczne. Gdy ta opcja jest włączona, w przypadku awarii sieci zewnętrznej nie będzie to miało wpływu na Twoją własną witrynę. Dostarczanie asynchroniczne można włączyć na kilka sposobów, które opisano tutaj.

Zainstaluj Google PageSpeed

Google PageSpeed ​​to moduł serwera typu open source, który optymalizuje szybkość ładowania witryny. Został zaprojektowany przez Google, aby przyspieszyć działanie Twojej witryny i jest łatwy w użyciu. Zasadniczo wprowadza różne modyfikacje zarówno na serwerze, jak i w plikach witryny. Nie musisz nic robić ręcznie, a Twoja witryna będzie działać lepiej.

Jest tak blisko rozwiązania uniwersalnego, jakie znajdziesz, jeśli chodzi o wydajność Twojej witryny. Możesz samodzielnie zainstalować Google PageSpeed ​​w swoim menedżerze plików lub poprosić swojego hosta lub programistę o pomoc w instalacji. Możesz to ustawić i zapomnieć.

Połącz obrazy tła

Wiele motywów wykorzystuje kilka obrazów tła, aby utworzyć jeden, kompletny obraz. Chociaż może to wyglądać świetnie i jednocześnie, może spowalniać działanie Twojej witryny. Ponieważ przeglądarki użytkowników będą musiały wysyłać kilka różnych żądań w celu załadowania zdjęć w tle, skraca to czas ładowania.

Zamiast tego połącz obrazy w jeden, aby przyspieszyć ładowanie witryny. W ten sposób Twoi użytkownicy będą musieli wysłać tylko jedno żądanie, a nie wiele. Twoja witryna będzie szybsza, ponieważ nie ma już kilku żądań w obie strony, aby tło mogło się poprawnie załadować.

Zatrzymaj hotlinkowanie obrazów

Hotlinking to praktyka polegająca na umieszczaniu zdjęcia z innej witryny na własnej stronie bez przesyłania go na serwer. Jest to proste z odrobiną kodu, ale jest to zła praktyka, która może prowadzić między innymi do spowolnienia witryny.

Hotlinking nie tylko szkodzi Twojej witrynie, ale technicznie stanowi kradzież, jeśli robisz to bez pozwolenia. Właściciele witryn płacą za miejsce do przechowywania tych plików, a gdy umieścisz ten sam plik we własnej witrynie za pomocą kodu do osadzenia, zabierasz ich zasoby bez pozwolenia.

Chociaż istnieją strony internetowe, które umożliwiają bezpośrednie przesyłanie obrazów z zamiarem ich udostępnienia, nadal nie jest to dobry pomysł. Gdy te witryny są wolne lub mają duży ruch, mogą spowolnić ładowanie witryny, jeśli je osadzasz. Dodatkowo, o ile nie płacisz za miejsce, te pliki można usunąć w dowolnym momencie bez ostrzeżenia.

Tak, hotlinking może zaoszczędzić trochę przepustowości, ale na dłuższą metę jest bardziej prawdopodobne, że spowolni działanie Twojej witryny. Zawsze przechowuj swoje obrazy na własnym serwerze zamiast hotlinkowania. W razie wątpliwości lepiej kupić więcej miejsca na własnym serwerze, aby móc sobie pozwolić na ich przesyłanie. I tak powinieneś używać małych plików graficznych, więc nie powinno to stanowić problemu.

Zwiększ prędkość ładowania swojej witryny już dziś

Czy jesteś gotowy, aby wznieść swoją witrynę na nowy poziom? Czas przyspieszyć ładowanie witryny. Jeśli Twoja witryna wczytuje się powoli, łatwo jest nieumyślnie stracić odwiedzających. Pomyśl, jak frustrujące jest to, że ładowanie witryny trwa zbyt długo. Jednosekundowe opóźnienie w czasie ładowania strony spowoduje 7% spadek konwersji i 11% spadek liczby odsłon. Nie rób tego swoim użytkownikom, traktując powyższe wskazówki poważnie.

Przyspieszenie witryny nie jest skomplikowane, drogie ani mylące. To jeden z najprostszych i najszybszych sposobów na poprawę SEO i wywarcie pozytywnego wpływu na użytkowników. Jeśli chcesz, aby Twoja witryna działała lepiej i robiła wrażenie na użytkownikach, warto zainwestować w powyższe wskazówki.

Od unikania hotlinków i uszkodzonych linków po aktualizację hostingu, nawet powyższe małe kroki mają duży wpływ. Jeśli jesteś przytłoczony, zacznij od przetestowania szybkości ładowania swojej witryny. Stamtąd będziesz mieć dobre pojęcie o tym, jak wiele ulepszeń musisz zrobić, aby upewnić się, że Twoja witryna działa na maksymalnym poziomie wydajności. Twoja witryna może wymagać tylko kilku poprawek, aby dostosować ją do standardów Google. Twoi użytkownicy są zmęczeni czekaniem, więc czas zabrać się do pracy.

Wektor prędkości ładowania strony stworzony przez ibrandify