17 skutecznych wskazówek, jak skrócić czas ładowania strony bloga

Opublikowany: 2020-11-10

Wyobraź sobie, że odwiedzasz witrynę, w której ładowanie każdej strony trwa kilka sekund.

Frustrujące, prawda?

Prawda jest taka, że ​​wielu blogerów zaniedbuje prędkość ładowania swojej strony internetowej, ładując fantazyjne elementy wizualne - od karuzeli obrazów po interaktywne widżety.

To nie jest sposób na zaimponowanie widzom.

To, czego potrzebują, to blog, który ładuje się szybko, zwiększa czytelność i od razu dostarcza potrzebne informacje .

Porozmawiajmy, jak dać im to, czego chcą.

Kompletny przewodnik po optymalizacji szybkości ładowania bloga

  • 1. Dlaczego szybkość ładowania strony jest ważna
    • 1.1 Utrzymanie większego ruchu
    • 1.2 Zwiększ liczbę konwersji
    • 1.3 Wyższe rankingi w wyszukiwarkach
  • 2. Jak przetestować szybkość ładowania witryny
  • 3. Jak skrócić czas ładowania bloga
    • 3.1 Usuń niechciane wtyczki
    • 3.2 Poszukaj wtyczek, które oferują więcej
    • 3.3 Uaktualnij swój plan hostingowy
    • 3.4 Wybierz lepszy motyw
    • 3.5 Optymalizuj swoje obrazy
    • 3.6 Wyłącz Hotlinking
    • 3.7 Inwestuj w CDN
    • 3.8 Zmniejsz swoje kody
    • 3.9 Unikaj zasobów blokujących renderowanie
    • 3.10 Zmniejsz liczbę postów na swojej stronie głównej
    • 3.11 Nie zalewaj czytelników reklamami
    • 3.12 Oczyść serwer
    • 3.13 Włącz buforowanie witryny
    • 3.14 Użyj kompresji GZIP
    • 3.15 Zoptymalizuj bazę danych swojej witryny
    • 3.16 Optymalizacja komentarzy użytkownika
    • 3.17 Optymalizacja skupienia się na najważniejszych stronach
  • 4. Wniosek

Dlaczego szybkość ładowania strony jest ważna

Oprócz lepszych wrażeń użytkownika duża prędkość ładowania ma również wiele korzyści z marketingowego punktu widzenia.

Utrzymaj większy ruch

Statystyki pokazują, że około 40 procent użytkowników opuściłoby witrynę, która nie ładuje się w ciągu trzech sekund lub krócej. Jeśli mówimy o użytkownikach mobilnych, liczba ta wzrasta do 53 procent .

współczynnik porzucania użytkowników w 3 sekundy
  • Zapisać

Zastanawiasz się, dlaczego Twój blog ma tak fatalny współczynnik odrzuceń.

Jeśli nadal będziesz ignorować szybkość ładowania swojego bloga, zasadniczo zmniejszasz potencjał ruchu o około połowę.

Zwiększ liczbę konwersji

Czy wiesz, że jednosekundowe opóźnienie w ładowaniu powoduje 7-procentowy spadek liczby konwersji?

Patrząc z perspektywy, oznacza to stratę 7 USD za każdym razem, gdy zapewniasz konwersję o wartości 100 USD.

efekt 1-sekundowego opóźnienia
  • Zapisać

To może nie wydawać się ogromne, ale pamiętaj, że witryny konkurencji są oddalone o kilka kliknięć.

Gdy czytelnicy przejdą do innego bloga z lepszym doświadczeniem użytkownika, mogą nigdy nie spojrzeć wstecz.

Wyższe rankingi w wyszukiwarkach

Jeśli nie wiesz, wyszukiwarki takie jak Google są bardzo szczegółowe, jeśli chodzi o wygodę użytkownika.

Dlatego traktują szybkość ładowania jako ważny czynnik rankingowy nie tylko w przypadku komputerów stacjonarnych, ale także witryn mobilnych.

prędkość i seo
  • Zapisać

Jeśli nie znasz terminu SEO lub Optymalizacja witryn pod kątem wyszukiwarek , proponuję rozpocząć naukę od tego postu.

Na razie pozwólcie, że pokażę wam kolejny krok do osiągnięcia najwyższej wydajności bloga: mierzenie rzeczywistej szybkości ładowania bloga.


Jak przetestować szybkość ładowania witryny

Możesz pomyśleć, że Twoja witryna działa już wystarczająco szybko, ale tylko narzędzie takie jak Google PageSpeed ​​Insights może to udowodnić.

Mówiąc prościej, jest to narzędzie do optymalizacji wydajności, które analizuje szybkość Twojej witryny, wykrywa problemy wpływające na szybkość i udostępnia listę sugestii wraz z pomocnymi zasobami.

Aby skorzystać z PageSpeed ​​Insights, wpisz adres URL swojego bloga i kliknij „Analizuj”.

Pagespeed Insights
  • Zapisać

Po prostu daj PageSpeed ​​Insights kilka sekund na zadziałanie magii.

Gdy skończysz, pierwszą rzeczą, którą znajdziesz, jest dogłębna ocena wydajności Twojej witryny, w tym ocena szybkości, czynniki wpływające na szybkość ładowania oraz szacowane opóźnienie lub opóźnienie, zanim dane wejściowe użytkownika będą mogły zostać zarejestrowane.

Pagespeed Insights wyniki
  • Zapisać

Możesz również skorzystać z PageSpeed ​​Insights, aby zwiększyć wydajność na urządzeniach mobilnych, przechodząc na kartę „Urządzenia mobilne” . Narzędzie powinno natychmiast przedstawić inny raport, który odzwierciedla wydajność Twojego bloga na smartfonach i tabletach.

Pagespeed Insights dla komórek
  • Zapisać

Znalazłeś już swoje wyniki prędkości?

Odtąd radzę używać ich jako podstawowego środka do pomiaru wydajności witryny.

Twój cel jest prosty: wykonać tyle optymalizacji, ile potrzeba, aby osiągnąć „szybki” koniec skali szybkości.

Pokażę ci, o czym mówię.

skala prędkości
  • Zapisać

Możesz gdzieś przeczytać, że wynik szybkości co najmniej 85 jest wystarczająco dobry, co jest prawdą, biorąc pod uwagę, że nawet duże witryny, takie jak Facebook, mają wyniki poniżej 90.

Wynik szybkości na Facebooku
  • Zapisać

Ale jako początkująca marka próbująca zrobić wgniecenie w swojej niszy, zadowalanie się „ dostatecznie dobrym ” nigdy nie wchodzi w grę.

Zawsze powinieneś korzystać z możliwości, które pomogą Ci wyprzedzić konkurencję.

Poprawa komfortu użytkowania Twojej witryny przez zwiększenie szybkości ładowania to jedna z tych możliwości.

Gotowy na kolejny krok? Więc przejdźmy do tego.


Jak skrócić czas ładowania bloga

Skoro już omówiliśmy „ dlaczego ” optymalizacji szybkości ładowania strony, pora porozmawiać o „ jak.

Jeśli wiesz coś o tworzeniu stron internetowych, wykonanie zaleceń przedstawionych w PageSpeed ​​Insights powinno być początkiem Twojej kampanii optymalizacji wydajności. Powinieneś być w stanie je znaleźć tuż pod sekcją „ Dane laboratoryjne ”.

możliwości Pagespeed Insights
  • Zapisać

Oczywiście sugestie, które otrzymasz w PageSpeed ​​Insights, zależą od ogólnego stanu Twojej witryny. Jednak większość typowych zaleceń dotyczących optymalizacji zostanie uwzględnionych na liście strategii, które zestawiłem poniżej.

Bez zbędnych ceregieli, oto sprawdzone kroki prowadzące do znacznie szybszego i dochodowego bloga:


1. Usuń niechciane wtyczki

Platformy do publikowania blogów i systemy zarządzania treścią, takie jak WordPress, zwykle obsługują mnóstwo gotowych do użycia wtyczek, które ułatwiają wdrażanie różnego rodzaju funkcji.

Możesz korzystać z widżetu rezerwacji online, tworzyć niestandardowe formularze zgody, tworzyć imponujące strony docelowe - bez konieczności pisania przez cały czas ani jednej linii kodu . Po prostu użyj zintegrowanego paska wyszukiwania, aby szybko znaleźć wtyczkę spełniającą Twoje potrzeby.

wyszukiwanie wtyczek wordpress
  • Zapisać

Porozmawiaj o wygodzie.

Jednak korzystanie z wtyczek może być mieczem obosiecznym.

Nie możesz po prostu załadować swojej witryny tyloma wtyczkami, ile chcesz.

Zbyt wiele wtyczek na jednej stronie może pochłonąć zasoby serwera i spowolnić indeksowanie witryny.

Jeśli nigdy nie zwracałeś uwagi na swoją bibliotekę wtyczek, prawdopodobnie zainstalowałeś nadmiarowe wtyczki, które mają podobne podstawowe funkcje.

Można by pomyśleć, że WordPress ostrzeże Cię, jeśli masz zamiar zainstalować wiele wtyczek tego samego typu.

Niestety tak nie jest.

Wystarczy spojrzeć na wiele kreatorów formularzy, które mogę wcisnąć na mój pulpit nawigacyjny WordPress:

wiele kreatorów stron
  • Zapisać

Dobra wiadomość jest taka, że ​​konflikty między podobnymi wtyczkami można łatwo naprawić, dezaktywując te, których już nie potrzebujesz.

Aby to zrobić, rozwiń menu „Wtyczki” na pulpicie nawigacyjnym i przejdź do „Zainstalowane wtyczki”. Następnie wybierz wszystkie wtyczki, których nie potrzebujesz, i zastosuj polecenia „Dezaktywuj” lub „Usuń” z menu rozwijanego „Działania zbiorcze”.

usuń wtyczki
  • Zapisać

Oprócz konfliktów między podobnymi wtyczkami, niektóre wtyczki - szczególnie te, które nie zostały przetestowane z twoją aktualną wersją WordPress - mogą spowodować, że twój pulpit nawigacyjny zwariuje.

Możesz tego uniknąć, instalując po jednej wtyczce naraz, unikając wtyczek „ niesprawdzonych ”.

nieprzetestowane wtyczki
  • Zapisać

Jeśli napotkasz dłuższe czasy ładowania, awarie lub inne problemy na pulpicie nawigacyjnym WordPress, dezaktywuj ostatnią zainstalowaną wtyczkę. Jeśli problem nie ustąpi, prawdopodobnie przyczyną jest inna wtyczka.

Wtedy możesz dezaktywować wszystkie wtyczki i włączać je jedna po drugiej, aż znajdziesz winowajcę. Gdy to zrobisz, rozważ poszukanie alternatywnej wtyczki lub zaktualizowanie jej do najnowszej wersji.

2. Poszukaj wtyczek, które oferują więcej

Skoro jesteśmy na wtyczkach, powiedzmy krótko o wyborach wtyczek.

W WordPress im mniej wtyczek, tym lepiej.

O ile to możliwe, szukaj wtyczek, które mogą nosić wiele czapek, zamiast instalować nową dla każdej funkcji, którą chcesz zaimplementować.

Na przykład, zamiast używać oddzielnych wtyczek do formularzy kontaktowych, ocen w gwiazdkach, recenzji i projektu strony docelowej, po prostu użyj wtyczki takiej jak Elementor Page Builder, która łączy wszystkie te funkcje w jedną.

Kreator stron Elementor
  • Zapisać

Po pozbyciu się nadmiaru wtyczek z systemu CMS, przyjrzyjmy się kolejnemu czynnikowi, który może spowolnić działanie Twojej witryny.

3. Uaktualnij swój plan hostingowy

Nowym blogerom naprawdę trudno jest się oprzeć jednodolarowemu planowi hostingowemu dla Twojej witryny.

Ale gdy zaczniesz generować setki, jeśli nie tysiące, odwiedzających miesięcznie, zrozumiesz, dlaczego firmy hostingowe oferują plany w tym przedziale cenowym.

Częste spowolnienia, przestoje, słaba obsługa klienta - to tylko niektóre z wad wyboru taniego rozwiązania hostingowego. Dzieje się tak głównie dlatego, że usługi hostingowe za dolara zazwyczaj korzystają z niedostatecznego podstawowego sprzętu serwerowego.

„Jeśli poważnie myślisz o blogowaniu, Twoja witryna zasługuje na coś lepszego niż najtańszy plan hostingowy”. - Ankit Singla

Przeprowadź badania i poszukaj firm hostingowych popartych wieloma pozytywnymi recenzjami, takimi jak:

  • BlueHost
  • HostGator
  • SiteGround
  • WPXHosting

W razie wątpliwości możesz użyć narzędzia takiego jak Pickuphost, aby przetestować prędkość dowolnego hosta, który rozważasz. Wszystko, co musisz zrobić, to wybrać dostawcę usług hostingowych z menu rozwijanego, wybrać lokalizację serwera i kliknąć „Rozpocznij test”.

Najlepiej byłoby wybrać lokalizację serwera w pobliżu grupy docelowej.

test prędkości odbioru
  • Zapisać

Możesz również zauważyć, że większość firm hostingowych oferuje wiele planów, w tym współdzielony, wirtualny serwer prywatny lub VPS i dedykowany.

W przypadku większości blogów plan hostingowy VPS powinien być więcej niż wystarczający, aby zaspokoić potrzeby związane z przepustowością Twojej witryny. Z drugiej strony, wspólny plan hostingowy może być również opłacalny, jeśli nie masz jeszcze hord ruchu.

Polecam najpierw zacząć od hostingu współdzielonego i uaktualnić do planu opartego na VPS, gdy ruch na Twoim blogu wzrośnie.

Być może jedynym powodem wyboru hostingu dedykowanego jest to, że Twoja witryna zawiera również sklep internetowy z setkami produktów. W takim przypadku nawet host VPS może nie mieć przepustowości niezbędnej do utrzymania i działania sklepu cyfrowego.

4. Wybierz lepszy motyw

Mówiąc o przepustowości, możesz zmniejszyć wymagania dotyczące przepustowości swojej witryny, wybierając prostszy, minimalistyczny motyw.

Użytkownicy WordPressa powinni natychmiast dostać to, o czym mówię.

W końcu biblioteka motywów WordPress ma już kilka darmowych minimalistycznych motywów. Nawet zewnętrzni projektanci motywów oferują mnóstwo lekkich motywów, które mogą poprawić wydajność Twojej witryny.

komercyjne motywy WordPress
  • Zapisać

Kluczem jest tutaj szukanie motywów, które nie są nabijane niepotrzebnymi szczegółami wizualnymi, takimi jak suwaki obrazu, animacje i efekty CSS.

Możesz samodzielnie sprawdzić te elementy, wyświetlając podgląd motywów, co jest podstawową funkcją na większości rynków z motywami, w tym w katalogu motywów WordPress.

podgląd motywu
  • Zapisać

Motywy potomne Genesis od Studiopress należą do moich ulubionych motywów WordPress. Oferują dziesiątki minimalistycznych, przyjaznych dla urządzeń mobilnych motywów, które są również kompatybilne z edytorem Gutenberg , który jest domyślnym edytorem treści dla WordPress w wersji 5.0 i nowszych.

Co ważniejsze, te motywy pomogą Ci osiągnąć szybsze ładowanie witryny.

Aby dowiedzieć się więcej o motywach Genesis i ich zaletach, zdecydowanie powinieneś sprawdzić tę recenzję.

5. Zoptymalizuj swoje obrazy

Nie wszystkie elementy wizualne, które wpływają na wydajność witryny, są wbudowane w motyw.

Każdy obraz, który przesyłasz do swojej witryny internetowej, czy to logo witryny, polecane obrazy, przyciski czy infografiki, zwiększa wymagania dotyczące przepustowości Twojego bloga, a tym samym wpływa na wydajność.

Ale ponieważ zawartość wizualna jest obowiązkowa na każdym blogu, nie możesz po prostu przestać doprawiać swoich postów obrazami. Zamiast tego możesz użyć narzędzia do kompresji obrazu, takiego jak Kraken.io, aby zmniejszyć rozmiar obrazów bez zauważalnych zmian w jakości.

kraken
  • Zapisać

Kraken.io zawiera bezpłatne, działające w chmurze narzędzie do bezstratnej kompresji, które może zbiorczo optymalizować obrazy. Po prostu przeciągnij i upuść obrazy do narzędzia lub prześlij spakowany folder, aby rozpocząć proces kompresji.

Nie zapomnij ustawić trybu kompresji na „ Lossless ”, aby końcowe obrazy nie były rozmyte.

jak zrobić bezstratną kompresję
  • Zapisać

W przypadku blogerów z własnym hostingiem możesz zwiększyć prędkość WordPressa za pomocą wtyczki takiej jak WP Smush, która skompresuje wszystkie obrazy w bibliotece multimediów za jednym razem. Po prostu kliknij „Smush” na pulpicie nawigacyjnym i „Bulk Smush Now”, aby rozpocząć.

masowy smush
  • Zapisać

WP Smush daje również opcję automatycznej kompresji obrazów, gdy tylko zostaną przesłane. Aby włączyć tę funkcję, włącz „Automatic Smush” w sekcji „Settings” interfejsu wtyczki.

automatyczny smush
  • Zapisać

Pamiętaj, że kompresja obrazu to tylko jedna z rzeczy, które powinieneś zrobić, jeśli jesteś fanem treści wizualnych - tak jak ja. W związku z tym zachęcam do przeczytania mojego szczegółowego przewodnika po optymalizacji obrazu i SEO.

zdjęcia na blogu seo
  • Zapisać

6. Wyłącz Hot Linking

Nawet przy bezstratnej kompresji obrazy mogą nadal obciążać zasoby serwera i spowalniać witrynę z powodu hotlinkowania.

Jest to powszechna praktyka, w której inna witryna zawiera bezpośrednie linki do Twojego obrazu lub pliku - co umożliwia wyświetlanie tych zasobów na własnej stronie.

Jasne, udostępnianie treści w innych witrynach internetowych jest świetne, gdy jest wykonywane we właściwy sposób. Ale dzięki hotlinkowaniu te witryny ostatecznie wykorzystują przepustowość, za którą zapłaciłeś, pobierając zawartość z Twojej witryny.

Dlatego hotlinkowanie jest również powszechnie określane jako kradzież przepustowości .

Możesz zatrzymać hotlinkowanie raz na zawsze, dodając następujący kod do pliku „.htaccess”:

gzip on;

gzip_disable „msie6”;

gzip_vary on;

gzip_proxied any;

gzip_comp_level 6;

gzip_buffers 16 8k;

gzip_http_version 1.1;

gzip_types application / javascript application / rss + xml application / vnd.ms-fontobject application / x-font application / x-font-opentype application / x-font-otf application / x-font-truetype application / x-font-ttf application / x-javascript application / xhtml + xml application / xml font / opentype font / otf font / ttf image / svg + xml image / x-icon text / css text / javascript text / plain text / xml;

Dla tych, którzy nie wiedzą, gdzie znaleźć plik .htaccess ich witryny, można go znaleźć w panelu sterowania konta hostingowego.

Musisz tylko poszukać „ menedżera plików ” swojej usługi hostingowej i przejść do głównego folderu witryny. Twój plik .htaccess powinien być tam z ikoną przypominającą notatnik:

.htaccess
  • Zapisać

7. Zainwestuj w CDN

Koniec z kompresją obrazu i zapobieganiem hotlinkowaniu?

Dobry.

A co, jeśli powiem ci, że istnieje sposób, aby Twoje obrazy ładowały się jeszcze szybciej?

Dzięki sieci dostarczania treści lub CDN możesz wykorzystać całą sieć serwerów proxy, aby przyspieszyć transfer danych z witryny do użytkowników.

Najlepsze jest to, że dostawcy usług CDN dbają o to, aby ich serwery były rozmieszczone w kluczowych lokalizacjach na całym świecie. To znacznie zmniejsza problem latencji, którego zwykle doświadczają goście z odległych obszarów.

sieć dostarczania treści
  • Zapisać

Podobnie jak hosty internetowe, musisz zachować ostrożność przy wyborze CDN dla swojego bloga.

Nie martw się - stworzyłem listę najlepszych usług CDN na blogu WordPress, z których możesz korzystać.

Osobiście mogę ręczyć za MaxCDN, który jest zdecydowanie jednym z najlepszych CDN pod względem kosztów i funkcji.

8. Zminimalizuj swoje kody

Twoje obrazy nie są jedyną rzeczą, która może zwiększyć wymagania dotyczące przepustowości Twojej witryny.

Kody takie jak HTML, CSS i JavaScript mogą również wpływać na rozmiar Twoich stron internetowych.

Poprawka? Zmniejsz je, usuwając niepotrzebne znaki w kodzie, takie jak spacje, dodatkowe wiersze i komentarze.

Znaki te w żaden sposób nie wpływają na działanie kodu, ale zwiększają jego rozmiar pliku. Z kolei pobieranie i uruchamianie kodu przeglądarki podczas ładowania strony zajmie więcej czasu.

niepotrzebne spacje
  • Zapisać

Chwileczkę - czy to oznacza, że ​​musisz przejść przez każdy kod w swojej witrynie, aby po kolei usunąć niepotrzebne znaki?

Uspokój się.

Podobnie jak w przypadku kompresji obrazu, istnieją narzędzia, których możesz użyć do zautomatyzowania tego procesu.

Na przykład Minify Code to bezpłatne narzędzie, które może przyciąć kody w ciągu kilku sekund. Działa ze wszystkimi plikami JavaScript, CSS i HTML, które możesz mieć w swojej witrynie.

minifycode
  • Zapisać

Jeśli używasz WordPress, alternatywą jest użycie wtyczki, takiej jak W3 Total Cache, która może zminimalizować zasoby kodu za jednym zamachem.

Po zainstalowaniu kliknij „Wydajność” na głównym pulpicie nawigacyjnym i kliknij „Minify”, aby wyświetlić opcje.

tablica rozdzielcza kodu minifycode
  • Zapisać

Zalecam włączenie następujących ustawień, aby zoptymalizować kod witryny w celu zwiększenia wydajności:

  • Ustawienia zmniejszania HTML
  • Ustawienia minimalizacji JS
  • Ustawienia zmniejszania CSS
włącz minifikację kodu
  • Zapisać

Przeczytaj samouczek W3 Total Cache, aby poznać wszystkie optymalne ustawienia.

9. Unikaj zasobów blokujących renderowanie

Skoro jesteśmy przy temacie kodów, przejdźmy do bardziej zaawansowanych rzeczy.

Jeśli uruchomiłeś PageSpeed ​​Insights i usłyszałeś polecenie „wyeliminowania zasobów blokujących renderowanie”, być może będziesz musiał pobrudzić sobie ręce kodem, aby zmaksymalizować wydajność bloga.

wyeliminować zasoby blokujące renderowanie
  • Zapisać

W skrócie, zasoby blokujące renderowanie to kody, które utrudniają ładowanie podstawowej zawartości HTML witryny. Oznacza to, że logo, menu, posty i inne istotne elementy strony nie zostaną załadowane, dopóki problematyczne zasoby nie zostaną załadowane.

Zasobami blokującymi renderowanie mogą być arkusze stylów, importowane pliki HTML i różne skrypty. PageSpeed ​​Insights powinno dostarczyć Ci pełną listę tych kodów:

lista zasobów blokujących renderowanie
  • Zapisać

Aby poradzić sobie z zasobami blokującymi renderowanie, najłatwiejszym krokiem jest przeniesienie JavaScript na dół kodu HTML swojej witryny - tuż przed zamykającym tagiem „</body>”.

Możesz również użyć atrybutu „defer”, aby skrypt był ładowany dopiero po pełnym załadowaniu kodu HTML. Można to zrobić, wstawiając defer = ”defer” w tagu „<script>”.

odrocz tag
  • Zapisać

Sprawdź ten post, aby uzyskać więcej informacji na temat zasobów blokujących renderowanie i tego, co możesz zrobić, aby je zoptymalizować.

Oczywiście zawsze możesz uzyskać pomoc od programisty internetowego, jeśli nie czujesz się komfortowo podczas pracy z kodami. Alternatywnie możesz użyć wtyczki takiej jak Autoptimize, aby automatycznie odkładać skrypty do stopki Twojej witryny - kolejna wtyczka do optymalizacji prędkości WordPress, która sprawia, że ​​praca jest sto razy łatwiejsza.

Autoptimize
  • Zapisać

10. Zmniejsz liczbę postów na swojej stronie głównej

Następnie porozmawiajmy o liczbie postów wyświetlanych na Twojej stronie głównej.

Systemy CMS, takie jak WordPress i platformy do publikowania blogów, często mają mnóstwo motywów prezentujących posty na blogu od samego początku.

Jeśli użyjesz wysokiej jakości wyróżnionych obrazów w każdym poście, użytkownicy nieuchronnie będą potrzebować więcej czasu, aby załadować Twoją stronę główną.

Osobiście wyświetlam tylko cztery posty na mojej stronie głównej:

cztery posty na stronę
  • Zapisać

To prawda, przeglądarki mogą podciągać tytuły postów na blogu - czasami zawierające opis lub kilka pierwszych wierszy treści - podczas wczytywania obrazów. Ale to nadal zmniejsza ogólną płynność korzystania z witryny przez użytkownika.

Z drugiej strony większość platform internetowych i CMS pozwala zmniejszyć liczbę postów wyświetlanych na stronie głównej.

Ponieważ ustawienia, które musisz dostosować, różnią się w zależności od platformy, przyjrzyjmy się tylko, jak to się robi w WordPress.

W głównym panelu kliknij „Ustawienia” i przejdź do sekcji „Czytanie” .

Ustawienie czytania WordPress
  • Zapisać

Powinieneś natychmiast zobaczyć ustawienie „ Strony blogów pokazują się co najwyżej ”. Możesz zmienić domyślną wartość na mniejszą liczbę i sprawdzić, czy poprawi to szybkość ładowania Twojej witryny.

posty na blogu wyświetlane na stronie
  • Zapisać

11. Nie zalewaj czytelników reklamami

Chociaż podglądy postów na Twojej stronie głównej mogą negatywnie wpłynąć na szybkość ładowania, przynajmniej mają pozytywny wpływ na wrażenia czytelników.

Reklamy jednak często nie.

Chociaż prawdą jest, że reklamy są zdecydowanie przydatne w zarabianiu na blogu, Twoi czytelnicy prawdopodobnie nie docenią tego, jeśli zakłócisz im doświadczenia z kilkoma reklamami na jednej stronie. Co ważniejsze, ustawienie reklam w każdym zakątku witryny spowoduje spadek jej wydajności.

reklamy i szybkość witryny
  • Zapisać

To powiedziawszy, najlepiej jest pozwolić odbiorcom skupić się na ważnych elementach bloga i ograniczyć reklamy do minimum.

Ja, na przykład, nie chcę narażać doświadczenia moich czytelników ze względu na dodatkowy dochód - jak widać na mojej stronie internetowej bez absolutnie żadnych reklam.

zero reklam
  • Zapisać

Na twoim miejscu priorytetowo traktowałbym linki partnerskie jako moją podstawową strategię zarabiania. Są to linki kontekstowe prowadzące do produktów lub usług, które mogą być pomocne dla użytkowników.

Jak zarabiasz na marketingu afiliacyjnym?

Dobre pytanie.

Jeśli jesteś zainteresowany, możesz skorzystać z mojego przewodnika po marketingu afiliacyjnym.

12. Oczyść swój serwer

W tym momencie powinieneś już zrozumieć korelację między szybkością ładowania a ilością bałaganu w Twojej witrynie.

To naprawdę proste: jeśli Twój blog będzie minimalistyczny i lekki, przeglądarka nie zajmie dużo czasu, aby załadować wszystko i zaprezentować użytkownikom.

Zawsze zachowuj ostrożność, dodając więcej elementów do swojej witryny, czy to treści wizualnych, skryptów czy reklam. Jednocześnie upewnij się, że Twoje konto hostingowe nadal ma wystarczającą ilość miejsca na dysku, aby Twoja witryna działała płynnie.

Twoje konto hostingowe powinno mieć wbudowane narzędzie, które umożliwia śledzenie ogólnego wykorzystania dysku. Aby dać ci pomysł, oto zrzut ekranu narzędzia SiteGround do wykorzystania miejsca na dysku :

narzędzie do korzystania z dysku
  • Zapisać

Jeśli na Twoim koncie hostingowym zaczyna brakować miejsca, oto kilka rzeczy, które możesz zrobić:

  • Przenieś kopie zapasowe na dysk lokalny
    Starsze witryny internetowe zwykle przechowują gigabajty kopii zapasowych na serwerze hostingowym. Pobranie ich na dysk lokalny i usunięcie ich z serwera to świetny sposób na zwolnienie miejsca.
  • Usuń nieaktywne konta
    Jeśli masz nieaktywne konta w swoim planie hostingowym, usuń je na dobre, aby zaoszczędzić dużo miejsca na dysku. Ponieważ jest to proces nieodwracalny, rozważ utworzenie lokalnej kopii zapasowej konta przed usunięciem.
  • Usuń pliki .TMP
    Twoja platforma internetowa lub CMS może generować pliki tymczasowe na podstawie zadań, takich jak aktualizacje wtyczek i śledzenie danych sesji. Ich usunięcie powinno być bezpieczne, ale ze względów bezpieczeństwa nie zaszkodzi też utworzenie kopii zapasowej folderu „tmp” offline.

W razie wątpliwości skontaktuj się z obsługą klienta dostawcy usług hostingowych, aby dowiedzieć się, jak zaoszczędzić miejsce na dysku.

13. Włącz buforowanie witryny

Kompresowanie obrazów, zmniejszanie kodu, minimalizowanie reklam, czyszczenie konta hostingowego - dzięki tym strategiom prędkość ładowania Twojej witryny powinna być jak nigdy dotąd.

Ale nie relaksuj się jeszcze. Nadal mamy do omówienia kilka innych strategii, które jeszcze bardziej zwiększą szybkość ładowania Twojej witryny.

Dzięki buforowaniu witryny Twój blog może załadować się niemal natychmiast po powracających odwiedzających.

Buforowanie witryny działa poprzez umożliwienie tymczasowego przechowywania danych, w tym skryptów, obrazów, plików multimedialnych i innych form treści do pobrania - w ten sposób zmniejsza się liczba żądań HTTP, które musi wysyłać przeglądarka.

Aby zaimplementować buforowanie witryny, długą metodą jest wstawienie następującego kodu bezpośrednio na początku pliku .htaccess witryny:

## WYGASA CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image / jpg „dostęp 1 rok”

ExpiresByType image / jpeg „dostęp 1 rok”

ExpiresByType image / gif „dostęp 1 rok”

ExpiresByType image / png „dostęp 1 rok”

ExpiresByType text / css „dostęp 1 miesiąc”

ExpiresByType text / html „access 1 month”

ExpiresByType application / pdf „dostęp 1 miesiąc”

ExpiresByType text / x-javascript „dostęp 1 miesiąc”

ExpiresByType application / x-shockwave-flash „dostęp 1 miesiąc”

ExpiresByType image / x-icon „dostęp 1 rok”

ExpiresDefault „dostęp 1 miesiąc”

</IfModule>

## WYGASA CACHING ##

Jeśli chcesz, możesz ustawić różne limity czasowe przed wygaśnięciem niektórych pamięci podręcznych. Na przykład, jeśli chcesz skrócić czas wygaśnięcia pamięci podręcznych obrazów PNG do 1 miesiąca, po prostu zmodyfikuj wiersz „ExpiresByType image / png” na:

ExpiresByType image / png „dostęp 1 miesiąc

Ponownie, użytkownicy WordPress mogą używać narzędzi, aby ta strategia optymalizacji była dziecinnie prosta. W rzeczywistości przeszliśmy już przez tę samą wtyczkę, której potrzebujesz - W3 Total Cache.

Wracając do „wyniki” sub-menu z panelu WordPress, nad głową Strona Cache "zaznaczyć" Cache posty strona pole wyboru.

strona z postami w pamięci podręcznej
  • Zapisać

14. Użyj kompresji GZIP

Zanim zamkniesz W3 Total Cache i przejdziesz do ostatnich pozostałych strategii w tym przewodniku, powinieneś zrobić jeszcze jedną rzecz.

W podmenu „Wydajność” przejdź do „Pamięć podręczna przeglądarki” i zaznacz opcję „Włącz kompresję HTTP (gzip)” .

włącz kompresję GZIP
  • Zapisać

Kompresja GZIP poprawia prędkość pobierania plików tekstowych, zmniejszając ich rozmiar - nie różni się zbytnio od procesu kompresji plików lokalnych do spakowanego folderu. Głównym powodem, dla którego kompresja GZIP jest szeroko stosowana do optymalizacji szybkości witryny, jest natywnie obsługiwana przez HTTP od wersji 1.1.

Jeśli nie korzystasz z WordPressa ani żadnej innej platformy, która ma dodatki związane z GZIP, musisz ją włączyć w tradycyjny sposób: modyfikując plik .htaccess swojej witryny .

Ponieważ już wiesz, gdzie znaleźć plik .htaccess, pozostał tylko kod, który aktywuje kompresję GZIP w Twojej witrynie.

Idź - skopiuj i wklej.

Serwery Apache

<IfModule mod_deflate.c>

# Kompresuj HTML, CSS, JavaScript, tekst, XML i czcionki

AddOutputFilterByType DEFLATE application / javascript

AddOutputFilterByType DEFLATE aplikacja / rss + xml

AddOutputFilterByType DEFLATE application / vnd.ms-fontobject

AddOutputFilterByType DEFLATE aplikacja / x-font

AddOutputFilterByType DEFLATE aplikacja / x-font-opentype

AddOutputFilterByType DEFLATE aplikacja / x-font-otf

AddOutputFilterByType DEFLATE aplikacja / x-font-truetype

AddOutputFilterByType DEFLATE aplikacja / x-font-ttf

AddOutputFilterByType DEFLATE aplikacja / x-javascript

AddOutputFilterByType DEFLATE aplikacja / xhtml + xml

AddOutputFilterByType DEFLATE application / xml

AddOutputFilterByType DEFLATE font / opentype

AddOutputFilterByType DEFLATE czcionka / otf

AddOutputFilterByType DEFLATE font / ttf

AddOutputFilterByType DEFLATE image / svg + xml

AddOutputFilterByType DEFLATE image / x-icon

AddOutputFilterByType DEFLATE text / css

AddOutputFilterByType DEFLATE text / html

AddOutputFilterByType DEFLATE text / javascript

AddOutputFilterByType DEFLATE text / plain

AddOutputFilterByType DEFLATE text / xml

# Usuń błędy przeglądarki (potrzebne tylko w przypadku naprawdę starych przeglądarek)

BrowserMatch ^ Mozilla / 4 gzip-only-text / html

BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip

BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html

Dołącz nagłówek Vary User-Agent

</IfModule>

Serwery NGINX

gzip on;

gzip_disable „msie6”;

gzip_vary on;

gzip_proxied any;

gzip_comp_level 6;

gzip_buffers 16 8k;

gzip_http_version 1.1;

gzip_types application / javascript application / rss + xml application / vnd.ms-fontobject application / x-font application / x-font-opentype application / x-font-otf application / x-font-truetype application / x-font-ttf application / x-javascript application / xhtml + xml application / xml font / opentype font / otf font / ttf image / svg + xml image / x-icon text / css text / javascript text / plain text / xml;

Należy pamiętać, że użytkownicy NGINX muszą wkleić kod do pliku „.conf”, aby zaimplementować GZIP.

Testowanie kompresji GZIP

Jeśli ręcznie włączono kompresję GZIP, użyj narzędzia takiego jak test kompresji GZIP firmy GiftOfSpeed, aby zweryfikować pomyślną implementację.

Podobnie jak w przypadku PageSpeed ​​Insights, jedynym krokiem korzystania z testu kompresji GZIP jest wprowadzenie adresu URL witryny i kliknięcie przycisku „Sprawdź” .

Test gzip giftofspeed
  • Zapisać

W ciągu kilku sekund narzędzie powinno zweryfikować, czy kompresja GZIP jest aktywna w Twojej witrynie. Wyświetli również procent kompresji, a także rozmiary przed i po kompresji.

Wyniki testu Gzip
  • Zapisać

15. Zoptymalizuj bazę danych swojej witryny

Naprawianie zasobów blokujących renderowanie i włączanie kompresji GZIP należą do najbardziej zaawansowanych strategii w tym poście, ale jeszcze nie skończyliśmy.

Następnym krokiem jest optymalizacja tabel bazy danych MySQL, aby pomóc serwerowi w szybszym pobieraniu danych, których potrzebują użytkownicy.

Co to są tabele bazy danych MySQL?

Mówiąc prosto, Twoja baza danych MySQL zawiera praktycznie wszystko, co można znaleźć w Twojej witrynie, w tym posty, komentarze, daty i inne elementy treści. Platformy do publikowania blogów i CMS, takie jak WordPress, następnie automatycznie tworzą tabele w bazie danych, gdy dodajesz więcej informacji do swojej witryny.

Oto jak wygląda baza danych MySQL:

Tabela bazy danych MySQL
  • Zapisać

Jednak Twoja baza danych będzie z czasem gromadzić różnego rodzaju śmieci, w tym pingbacki, komentarze spamowe i poprawki postów - stale się powiększa i wpływa na wydajność Twojej witryny.

Aby uporządkować bazę danych MySQL, jedną z opcji jest użycie zintegrowanego narzędzia do optymalizacji tabel w panelu sterowania konta hostingowego.

Na przykład SiteGround ma polecenie „Optymalizuj tabele” z menu rozwijanego „Z wybranymi:” .

optymalizuj tabele
  • Zapisać

Te opcje można znaleźć w narzędziu „phpMyAdmin”, które powinno znajdować się w sekcji „Bazy danych” w panelu sterowania.

phpMyAdmin
  • Zapisać

Zasadniczo należy zawsze tworzyć kopie zapasowe baz danych przed wykonaniem optymalizacji. Pobierz je na dysk lokalny, aby zaoszczędzić miejsce na dysku swojego konta hostingowego.

Martwisz się, że możesz coś zepsuć na swoim serwerze?

Dzięki wtyczce WordPress, takiej jak WP-Sweep, możesz zoptymalizować tabele bazy danych z poziomu interfejsu CMS. Po zainstalowaniu i aktywowaniu wtyczki przejdź do „Narzędzia” i kliknij „Przeszukaj”, aby wyświetlić tabele bazy danych znalezione w Twojej witrynie.

zamiatanie deski rozdzielczej
  • Zapisać

Stamtąd możesz kliknąć „Sweep” dla poszczególnych pozycji bazy danych, aby je usunąć - lub przewinąć w dół strony wtyczki i kliknąć „Sweep All”.

opcje zamiatania
  • Zapisać

Tylko upewnij się, że nie masz żadnych wersji roboczych postów, ponieważ pełne przeglądanie tabel bazy danych również je usunie. Na tym etapie sprawdzaj swoje niezatwierdzone komentarze, aby przypadkowo nie usunąć pytań, cennych opinii i innych obaw wyrażanych przez czytelników.

16. Optymalizuj komentarze użytkowników

Mówiąc o komentarzach, blogi WordPress mają również przydatną funkcję, która może natychmiast pobrać zdjęcie profilowe komentującego za pośrednictwem usługi Gravatar lub Globally Recognized Avatar .

Gravatary dodają miłego akcentu do sekcji komentarzy na Twoim blogu, ale mają wpływ na szybkość ładowania Twojej witryny. To zmusza niektórych blogerów WordPress do całkowitego wyłączenia ich wyświetlania.

Aby zrobić to samo, przejdź do „Ustawień”, a następnie kliknij „Dyskusja”. Poszukaj opcji „Pokaż awatary” poniżej sekcji „Wyświetlanie awatarów” i odznacz ją.

wyłącz grawatary komentarzy
  • Zapisać

Jeśli chcesz zachować grawatary, ale nie podoba Ci się ich wpływ na szybkość ładowania, możesz użyć wtyczki takiej jak BJ Lazy Load, aby awatary ładowały się po krytycznych zasobach witryny - proces znany jako leniwe ładowanie .

Oprócz awatarów możesz także włączyć leniwe ładowanie miniatur postów, obrazów, ramek iframe i innych typów treści. Wystarczy przejść do „Ustawień”, wybrać „BJ Lazy Load” i wybrać „Tak” w opcjach, których chcesz użyć.

Opcje leniwego ładowania BJ
  • Zapisać

Jeśli chodzi o komentarze WordPress, kolejną wskazówką, jak zwiększyć szybkość ładowania strony, jest użycie paginacji . Spowoduje to podzielenie komentarzy w Twoich postach na wiele stron - skracając czas ładowania i renderowania ich przez przeglądarki.

Aby skorzystać z paginacji, po prostu wróć do strony ustawień „Dyskusja” i włącz opcję „Podziel komentarze na strony z X komentarzami najwyższego poziomu na stronę”.

podziel komentarze na strony
  • Zapisać

Spróbuj zmniejszyć liczbę komentarzy widocznych na stronie z domyślnej wartości 50 do około 10. Powinno to znacznie poprawić czas ładowania komentarzy, a co za tym idzie, zawartości Twojego bloga.

17. Skoncentruj optymalizację na swoich najważniejszych stronach

Zanim zakończymy ten post, oto ostatnia rada:

Zacznij optymalizować wydajność swoich najpopularniejszych stron .

Nie ma sensu nadawać priorytetu postom, które prawie nie generują żadnego ruchu. Z drugiej strony, priorytetowe traktowanie najważniejszych stron oznacza, że ​​Twoje wysiłki przyniosą korzyści większości użytkowników.

Google Analytics to kolejne bezpłatne narzędzie, które pomoże Ci zidentyfikować najpopularniejsze strony. Po prostu rozwiń podmenu „Zachowanie” i kliknij „Przegląd” .

Twoje 10 pierwszych stron powinno być widocznych w sekcji „Strona”.

Główne strony GA
  • Zapisać

Łatwe, prawda?

Możesz także skorzystać z Google Analytics, aby przeprowadzić szczegółowe badanie słów kluczowych - temat, który omówiłem w moim poście na temat znajdowania najskuteczniejszych słów kluczowych za pomocą Google Analytics.


Wniosek

Jako bloger powinieneś być przygotowany na wszystko ze względu na wygodę użytkownika.

Szybkość ładowania Twojej witryny może wydawać się powierzchownym czynnikiem, ale może samodzielnie wpłynąć lub złamać sukces Twojego bloga - nie tylko z perspektywy UX, ale także pod względem SEO.

Teraz wiem, że nie będziesz w stanie zastosować wszystkich powyższych strategii w ciągu jednego dnia. To powiedziawszy, nie zapomnij dodać tej strony do zakładek i dołączyć do naszej publicznej grupy na Facebooku, aby uzyskać więcej zabójczych przewodników po blogowaniu!

Skróć czas ładowania bloga
  • Zapisać