Większość właścicieli witryn WordPress wie, jak frustrująca może być wolna witryna. Wykonałeś podstawowe czynności — skompresowałeś obrazy, skonfigurowałeś buforowanie i zastosowałeś standardowe wskazówki dotyczące szybkości — ale Twoje strony nadal ładują się zbyt długo.
Odkryliśmy, że problemem jest często coś prostego: strony internetowe pobierają zbyt wiele niepotrzebnych danych.
W terminologii technicznej nazywa się to „ładunkiem sieciowym”. Jest to po prostu całkowita ilość danych wymagana do załadowania strony. Całkowity rozmiar pobierania obejmuje tekst, obrazy, filmy, CSS, JavaScript, czcionki i inne kody.
Zasadniczo, im mniej danych trzeba pobrać, tym szybciej ładuje się strona.
Jeśli więc chcesz poprawić szybkość swojej witryny, trafiłeś we właściwe miejsce!
W tym przewodniku pokażemy Ci dokładnie, jak zmniejszyć rozmiar tych plików i uniknąć ogromnych obciążeń sieciowych w WordPressie.
Dlaczego ogromne ładunki sieciowe w WordPressie stanowią problem?
Czy kiedykolwiek korzystałeś z narzędzia takiego jak Google Lighthouse lub PageSpeed Insights, aby sprawdzić, jak szybko działa Twoja witryna?
Czasami możesz zobaczyć komunikat typu: „Unikaj ogromnych ładunków sieciowych”.
W zasadzie oznacza to, że Twoja strona internetowa jest za duża, jak walizka zbyt ciężka do noszenia. Duża strona internetowa ładuje się dłużej, co może być frustrujące dla osób odwiedzających Twoją witrynę.
Ładunek sieciowy strony internetowej to całkowity rozmiar wszystkich elementów, które ją tworzą. Obejmuje to:
- Tekst: Słowa, które czytasz na stronie
- Obrazy i multimedia: Zdjęcia i filmy, które widzisz
- Kod: Pliki CSS i JavaScript, które sprawiają, że strona wygląda dobrze i działa poprawnie
- Czcionki: Specjalne style dla Twojego tekstu
- Plus wszelkie inne niestandardowe elementy
Zatem im większe są wszystkie te elementy razem, tym dłużej trwa pojawienie się Twojej strony internetowej na ekranie.
Jak duży jest za duży? Oto prosty przewodnik:
- Dobrze: Jeśli wszystkie części Twojej strony internetowej sumują się do mniej niż 2 MB, to tak, jakbyś niósł lekki bagaż. Jest dobrze zoptymalizowana i ładuje się szybko. Nie musisz się tutaj zbytnio martwić.
- Wymaga poprawy: Jeśli Twoja strona internetowa ma rozmiar od 2 MB do 4 MB, to tak, jakbyś nosił plecak, który staje się trochę ciężki. Mogą istnieć rzeczy, które można odchudzić. Google poda Ci kilka wskazówek, jak przyspieszyć jej działanie.
- Ogromny: Jeśli Twoja strona internetowa ma ponad 4 lub 5 MB, to jak próba noszenia ogromnej, przepełnionej walizki. Spowolni to Twoją stronę dla odwiedzających, dlatego musisz priorytetowo traktować optymalizację.
Jeśli widzisz komunikat „Unikaj ogromnych ładunków sieciowych”, możesz kliknąć małą strzałkę, aby zobaczyć listę wszystkich zasobów, które tworzą Twoją stronę internetową.
Widzisz, jak największe pliki znajdują się na górze listy? Jeśli skupisz się na zmniejszeniu tych plików lub usunięciu niepotrzebnych plików, zobaczysz największą poprawę wydajności WordPress.
Poprzez zmniejszenie rozmiaru tych plików, zużyjesz mniej danych do przeglądania strony internetowej, a ona załaduje się szybciej.
Teraz, gdy już wiesz, dlaczego duże strony internetowe stanowią problem, przyjrzyjmy się, jak możesz ich unikać w WordPress. Oto 8 wskazówek, które omówimy w tym artykule:
- Zmniejsz rozmiar obrazów
- Osadzaj filmy we właściwy sposób
- Używaj leniwego ładowania dla obrazów i filmów
- Zmniejsz rozmiar i liczbę plików Javascript i CSS
- Kompresuj pliki za pomocą Gzip
- Użyj pamięci podręcznej przeglądarki, aby zapobiec powtarzaniu pobierania
- Używaj mniej czcionek lub czcionek systemowych
- Unikaj wolnych wtyczek
- Frequently Asked Questions About Network Payloads in WordPress
Gotowi? Zaczynajmy!
1. Zmniejsz rozmiar swoich obrazów
Jedną z największych przyczyn dużych ładunków sieciowych są duże obrazy.
Dzisiejsze smartfony i aparaty robią wysokiej jakości zdjęcia o bardzo dużych rozmiarach plików. Ale nie musisz ich utrzymywać tak dużych, gdy wyświetlasz je na stronie internetowej.
Na szczęście możesz zoptymalizować obrazy, aby zmniejszyć ich rozmiar nawet o 80% bez utraty jakości. Ma to większy wpływ na ładunek sieciowy Twojej witryny niż cokolwiek innego.
W WPBeginner optymalizujemy wszystkie nasze obrazy przed ich przesłaniem. Zmieniamy rozmiar naszych obrazów do odpowiednich wymiarów, a następnie zmniejszamy ich rozmiar pliku za pomocą różnych narzędzi.
Przygotowaliśmy pomocny przewodnik oparty na tym, jak robimy to na naszej własnej stronie internetowej. Możesz śledzić nasz artykuł na temat optymalizacji obrazów pod kątem wydajności sieci bez utraty jakości.
2. Osadzaj filmy we właściwy sposób
Jeśli masz filmy na swojej stronie internetowej, musisz uważać, jak je wyświetlasz.
Bezpośrednie przesyłanie filmów na Twoją stronę internetową może powodować duże obciążenie sieci i znacząco spowolnić jej działanie, zwłaszcza jeśli zaczną odtwarzać się automatycznie.
Najlepszym sposobem na umieszczanie filmów jest osadzanie ich z platform wideo, takich jak YouTube lub Vimeo.
☝ Uwaga: Używamy YouTube do hostowania i strumieniowania naszych filmów. Możesz przeglądać nasze samouczki wideo dotyczące WordPress na kanale WPBeginner YouTube.
Takie podejście nadal pozwala odtwarzać filmy na Twojej stronie internetowej, ale ponieważ są one faktycznie przechowywane na serwerze kogoś innego, nie stanowią części Twojego ładunku sieciowego.
To naprawdę pomaga, ponieważ serwer nie musi radzić sobie z dużym transferem danych. Ponadto platformy te są zaprojektowane do efektywnego dostarczania filmów, zoptymalizowanego strumieniowania, które dostosowuje się do połączenia internetowego Twojego gościa.
Ponadto wiele odtwarzaczy wideo z tych platform zaczyna ładować wideo dopiero wtedy, gdy użytkownik kliknie „Odtwórz”, co oznacza, że początkowo przesyłanych jest mniej danych.
Możesz łatwo dodać filmy do swojej witryny za pomocą kodu osadzania.
Więcej na ten temat znajdziesz w naszym przewodniku dlaczego nigdy nie powinieneś przesyłać wideo do WordPressa.
3. Użyj leniwego ładowania obrazów i filmów
Lenistwo ładowania (lazy loading) to kolejny świetny sposób na uniknięcie dużych obciążeń sieciowych, zwłaszcza jeśli Twoja strona internetowa jest pełna obrazów lub filmów.
Zazwyczaj, gdy strona internetowa się ładuje, przeglądarka chce natychmiast pobrać wszystkie obrazy i filmy, nawet jeśli nie będą one od razu widoczne.
Wyobraź sobie, że restauracja podaje wszystkie dania naraz, zamiast po kolei. Byłoby to przytłaczające!
Tak dzieje się na stronie internetowej, jeśli nie zaimplementowano leniwego ładowania. Wszystko musi zostać pobrane z góry, nawet jeśli użytkownik jeszcze tego nie widzi.
To oczywiście nie jest idealne, ponieważ oznacza to, że Twoja witryna ma duży ładunek i pobierasz dużo danych, nawet jeśli użytkownik nie przegląda treści na dole strony.
Rozwiązaniem tego problemu jest lenistwe ładowanie.
Lenistwo ładowania (lazy loading) jest jak ta restauracja, która podaje każde danie z posiłku, gdy jesteś na nie gotowy.
Dzięki leniwemu ładowaniu obrazy i filmy nie są ładowane, dopóki nie znajdą się w zasięgu widzenia użytkownika na ekranie. W ten sposób przeglądarka musi ładować tylko to, co jest potrzebne, gdy jest potrzebne.
Zmniejsza to początkowy ładunek sieciowy i ilość danych, które muszą zostać pobrane.
Oto kilka pomocnych samouczków, które pokazują, jak skonfigurować leniwe ładowanie w WordPress:
- Jak łatwo leniwie ładować obrazy w WordPressie
- Jak łatwo dodać leniwego ładowania dla filmów w WordPress
- Jak zastosować leniwe ładowanie Gravatarów w komentarzach WordPress
4. Zmniejsz rozmiar i liczbę plików Javascript i CSS
Jednym z najlepszych sposobów na uniknięcie dużych ładunków sieciowych na Twojej stronie internetowej jest zmniejszenie rozmiaru plików CSS i JavaScript.
Twoja strona internetowa wykorzystuje pliki CSS do stylizacji i pliki JavaScript do interaktywnych funkcji.
Jednakże, pliki te często zawierają dodatkowe spacje i komentarze, które nie są potrzebne do funkcjonalności kodu. Możesz bezpiecznie usunąć te elementy, aby zmniejszyć rozmiar plików.
Oznacza to, że te pliki nadal będą działać w ten sam sposób, ale użytkownicy będą musieli pobrać mniej danych, co przyspieszy ładowanie strony.
Proces ten nazywa się minifikacją, a dobra wiadomość jest taka, że możesz użyć wtyczki WordPress, takiej jak WP Rocket, do automatycznego minifikowania plików.
Zobacz nasz poradnik jak minifikować pliki CSS i JavaScript w WordPress, aby uzyskać więcej informacji.
Teraz różne części Twojej strony internetowej zazwyczaj będą miały różne pliki CSS lub JavaScript. Na przykład jeden plik dla nagłówka, inny dla treści i być może jeszcze więcej dla wtyczek.
Ale wiele mniejszych plików może być mniej wydajnych niż jeden większy plik. Gdy jest wiele plików do załadowania, przeglądarka musi pobrać każdy z nich osobno, co zwiększa całkowity rozmiar pobierania. Zamiast tego możesz połączyć wiele z tych mniejszych plików w jeden pojedynczy plik.
Popularne wtyczki, takie jak WP Rocket (płatna) i Autoptimize (bezpłatna), mogą automatycznie łączyć i minimalizować pliki CSS i JavaScript.
Możesz dowiedzieć się, jak korzystać z tych wtyczek w naszym przewodniku na temat jak naprawić blokowanie renderowania JavaScript i CSS w WordPress.
5. Zmniejsz pliki za pomocą Gzip
Innym sposobem na zmniejszenie rozmiaru plików strony internetowej jest ich kompresja. Pliki tekstowe, takie jak HTML, CSS i JavaScript, można znacznie zmniejszyć za pomocą kompresji Gzip.
W rzeczywistości kompresja Gzip może często zmniejszyć rozmiar tych plików nawet o 70% przed wysłaniem ich do przeglądarki użytkownika! To ogromna oszczędność w ilości danych, które muszą zostać przesłane.
Redukuje czas pobierania plików i sprawia, że Twoja strona WordPress ładuje się znacznie szybciej. Po tym, jak skompresowane dane dotrą do komputera Twojego odwiedzającego, przeglądarka automatycznie rozpakuje (odkompresuje) pliki i wyświetli je na ekranie użytkownika.
Nie musisz martwić się o to, czy przeglądarki Twoich użytkowników obsługują kompresję Gzip, ponieważ działa ona we wszystkich popularnych przeglądarkach internetowych.
Wiele doskonałych wtyczek do buforowania obsługuje również kompresję Gzip. Popularne opcje obejmują WP Rocket, WP Super Cache i W3 Total Cache.
Wcześniej używaliśmy WP Rocket na stronie WPBeginner i mieliśmy świetne doświadczenia. Więcej informacji znajdziesz w naszej pełnej recenzji WP Rocket.
W WP Rocket kompresja Gzip zostanie automatycznie włączona, jeśli Twój hosting korzysta z serwera Apache. W przypadku innych wtyczek do buforowania może być konieczne włączenie jej w ustawieniach wtyczki.
Szczegółowe instrukcje znajdziesz w naszym przewodniku na temat jak włączyć kompresję GZIP w WordPress.
6. Użyj buforowania przeglądarki, aby zapobiec powtarzającym się pobraniom
Innym sposobem na uniknięcie ogromnego obciążenia sieci w WordPress, zwłaszcza jeśli Twoja witryna ma wielu powracających odwiedzających, jest wykorzystanie pamięci podręcznej przeglądarki.
Wyobraź sobie, że Twoi odwiedzający musieliby pobierać wszystko z Twojej witryny za każdym razem, gdy ją odwiedzają! Byłoby to niewiarygodnie wolne, a właśnie to dzieje się, jeśli nie używasz odpowiedniego buforowania.
Kiedy ktoś odwiedza Twoją stronę internetową po raz pierwszy, jego przeglądarka pobiera wszystko, czego potrzebuje: obrazy, CSS, JavaScript i wszystkie inne zasoby. Dzięki buforowaniu przeglądarki, jego przeglądarka zapisuje kopię tych plików na swoim komputerze.
Następnie, za następnym razem, gdy odwiedzą Twoją stronę internetową, ich przeglądarka będzie działać inteligentnie! Sprawdzi lokalnie zapisane pliki, zanim ponownie poprosi Twój serwer o wszystko.
Jeśli przeglądarka ma kopię pliku w swojej pamięci podręcznej, używa jej zamiast pobierać ponownie. Ma to ogromne znaczenie dla zmniejszenia ogólnego obciążenia sieci i zapewnia stałym odwiedzającym szybsze i płynniejsze działanie.
Oczywiście, jeśli zawartość Twojej witryny często się zmienia, na przykład w przypadku witryny z wiadomościami lub bloga, który jest regularnie aktualizowany, będziesz musiał poinformować przeglądarki, kiedy mają ponownie pobrać najnowsze wersje Twoich plików. Zapewni to, że każdy otrzyma najbardziej aktualne treści.
Możesz tym zarządzać, dodając nagłówki Expires w WordPress. Nagłówki te informują przeglądarkę, kiedy zapisany plik powinien zostać uznany za przestarzały i wymagać aktualizacji.
7. Używaj mniej czcionek lub czcionek systemowych
Czcionki mogą sprawić, że Twoja witryna będzie wyglądać świetnie i poprawić jej czytelność. Używanie niestandardowych czcionek może sprawić, że Twoja witryna będzie wyjątkowa i zachęci odwiedzających do spędzania większej ilości czasu na przeglądaniu.
Ale wyobraź sobie, że musiałbyś pobierać wiele różnych czcionek za każdym razem, gdy odwiedzasz stronę internetową. Pokazanie wszystkiego na stronie zajęłoby sporo czasu.
Kluczem jest użycie niewielkiej liczby czcionek na swojej stronie internetowej. Zalecamy trzymanie się tylko dwóch głównych czcionek i używanie ich na całej stronie. Zmniejsza to całkowitą liczbę plików, które muszą pobrać Twoi odwiedzający.
Co więcej, możesz używać czcionek systemowych zamiast niestandardowych.
Czcionki systemowe to czcionki, które są już zainstalowane na komputerach użytkowników. Pomyśl o tym jak o używaniu standardowych czcionek na komputerze, takich jak Arial czy Times New Roman.
Jeśli wybierzesz czcionki systemowe dla swojej strony internetowej, Twoi użytkownicy nie będą musieli pobierać żadnych dodatkowych plików! Znacząco zmniejsza to rozmiar Twojego pakietu sieciowego i przyspiesza działanie strony dla odwiedzających.
Więcej informacji znajdziesz w naszym przewodniku na temat wyłączania czcionek Google na Twojej stronie WordPress.
8. Unikaj wolnych wtyczek
Na koniec porozmawiajmy o wtyczkach. Czasami wtyczki mogą spowolnić Twoją witrynę i zwiększyć rozmiar ładunku sieciowego, ładując wiele dodatkowych plików JavaScript i CSS.
Powinieneś traktować wtyczki jako dodatkowe narzędzia, które dodajesz do swojej witryny. Niektóre są świetne i lekkie, podczas gdy inne mogą być dość ciężkie. Używanie zbyt wielu ciężkich wtyczek może zwiększyć rozmiar pobierania Twojej witryny.
Na pierwszy rzut oka trudno wiedzieć, które wtyczki są wolne, więc będziesz musiał przeprowadzić pewne badania. Więcej informacji znajdziesz w naszym przewodniku które wtyczki WordPress spowalniają Twoją witrynę.
Gdy znajdziesz wtyczki, które zwiększają rozmiar pobierania Twojej strony, masz kilka opcji.
Najpierw możesz skontaktować się z deweloperem wtyczki i sprawdzić, czy możesz coś zrobić, aby wtyczka działała wydajniej. Możesz też poszukać szybszej wtyczki, która robi to samo.
W celu uzyskania rekomendacji, zapoznaj się z naszym przewodnikiem jak wybrać najlepsze wtyczki WordPress.
👉 Powiązany artykuł: Czy trochę się denerwujesz, kontaktując się z twórcą wtyczki? Zapoznaj się z naszym przewodnikiem na temat jak prawidłowo prosić o wsparcie WordPress (i je uzyskać).
Czasami okaże się, że niektóre ciężkie wtyczki są niezbędne dla Twojej witryny. W takim przypadku nadal możesz przyspieszyć działanie witryny, ładując tę wtyczkę tylko na stronach, które jej potrzebują, zamiast ładować ją wszędzie.
Możesz użyć darmowej wtyczki o nazwie Plugin Organizer, aby wyłączyć wtyczki na stronach, gdzie nie są potrzebne. Zmniejszy to ładunek sieciowy na tych stronach.
Często zadawane pytania dotyczące ładunków sieciowych w WordPress
Oto niektóre z najczęstszych pytań, jakie ludzie zadają na temat zmniejszania obciążenia sieciowego w WordPress. Te odpowiedzi pomogą Ci lepiej zrozumieć aspekty techniczne i szczegóły implementacji.
1. Czym dokładnie jest ładunek sieciowy i dlaczego ma znaczenie dla mojej witryny WordPress?
Ładunek sieciowy to całkowita ilość danych (obrazów, CSS, JavaScript, HTML itp.), które Twoja witryna wysyła do przeglądarki odwiedzającego podczas ładowania strony. Duże ładunki spowalniają Twoją witrynę, ponieważ odwiedzający muszą pobrać więcej danych, co jest szczególnie problematyczne dla użytkowników mobilnych lub tych z wolniejszymi połączeniami internetowymi. Google bierze również pod uwagę rozmiar ładunku podczas indeksowania witryn, więc jego optymalizacja może poprawić Twoje SEO.
2. Jak mogę sprawdzić bieżący rozmiar ładunku sieciowego?
Możesz sprawdzić swoje obciążenie sieciowe za pomocą Google PageSpeed Insights, GTmetrix lub narzędzi deweloperskich przeglądarki. W Chrome naciśnij F12, przejdź do karty Sieć i przeładuj stronę. Całkowity rozmiar pojawi się na dole. Ogólnie rzecz biorąc, chcesz, aby całkowite obciążenie było poniżej 1-2 MB dla optymalnej wydajności.
3. Czy zmniejszenie obciążenia sieci wpłynie na funkcjonalność lub projekt mojej witryny?
Nie, jeśli zostanie wykonane poprawnie. Techniki skupiają się na optymalizacji i kompresji istniejących treści, a nie na usuwaniu funkcji. Zachowasz tę samą funkcjonalność i atrakcyjność wizualną, jednocześnie dostarczając treści bardziej efektywnie. Pamiętaj jednak, aby zawsze najpierw testować zmiany na stronie stagingowej, aby upewnić się, że wszystko działa poprawnie.
4. Jak często powinienem optymalizować moje ładunki sieciowe?
Powinieneś monitorować swoje ładunki miesięcznie i optymalizować za każdym razem, gdy dodajesz nową treść, wtyczki lub motywy. Ustaw regularne audyty za pomocą narzędzi takich jak Google Search Console, aby śledzić swoje Core Web Vitals. Poważne optymalizacje mogą być potrzebne kwartalnie, ale bieżąca konserwacja powinna być częścią Twojej regularnej rutyny konserwacji WordPressa.
5. Czy mogę zmniejszyć obciążenie sieciowe bez wiedzy technicznej?
Tak, wiele technik optymalizacji można zaimplementować za pomocą przyjaznych dla użytkownika wtyczek, takich jak WP Rocket, Smush lub Autoptimize. Narzędzia te automatycznie zajmują się kompresją obrazów, minifikacją plików i buforowaniem. Jednak w przypadku zaawansowanych optymalizacji może być potrzebna pomoc programisty lub eksperta WordPress.
Bonus: Przewodniki eksperckie dotyczące wydajności WordPress
Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak unikać ogromnych ładunków sieciowych w WordPress. Możesz również zapoznać się z innymi przewodnikami na temat poprawy wydajności WordPress:
- Kompleksowy przewodnik po zwiększaniu szybkości i wydajności WordPress
- Dlaczego WordPress jest wolny? Dowiedz się, jak to naprawić
- Jak przyspieszyć witrynę eCommerce
- Jak przyspieszyliśmy ładowanie stron w WPBeginner
- Jak prawidłowo przeprowadzić test prędkości strony internetowej
- Najlepsze wtyczki buforujące WordPress do przyspieszenia Twojej witryny
- Dlaczego potrzebujesz CDN dla swojego bloga WordPress?
- Jak zmniejszyć liczbę żądań HTTP w WordPress
- Jak odciążyć media WordPress, aby poprawić szybkość witryny
- Konserwacja bazy danych WordPress: Jak zoptymalizować bazę danych
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.