Unikanie katastrofy CMS: jak poprawić wydajność strony internetowej

Nikt nie lubi… czekać… czekać …. czekaj …

Posiadanie witryny, która działa jak cyfrowy superbohater, jest koniecznością biznesową, zwłaszcza gdy robisz pierwsze wrażenie na potencjalnym kliencie badającym Twoją organizację.

Poniższe statystyki wydajności witryny powinny wzbudzać strach w sercu każdego twórcy i inżyniera witryny, nie wspominając o zespole marketingu marki:

• Jeden na dwóch użytkowników opuści witrynę, jeśli jej wczytanie potrwa dłużej niż cztery sekundy. Źródło: BBC.
• Jednosekundowe opóźnienie powoduje 16% spadek zadowolenia użytkowników. Źródło: LoadStorm.
• Pięćdziesiąt trzy procent odwiedzin witryn mobilnych jest porzucanych, jeśli wczytywanie stron trwa dłużej niż trzy sekundy. Źródło: Google.

Być może zauważyłeś słabą wydajność witryny podczas sprawdzania wskaźników wydajności Google Core Web Vitals, ale nie wiesz, jak temu zaradzić?

Kiedy Twoja firma jest na linii, nie możesz pozwolić sobie na wysyłanie nowych firm gdzie indziej i niszczenie marki, ponieważ Twój system zarządzania treścią (CMS) zapewnia słabe wrażenia cyfrowe.

Poniżej diagnozujemy pięć najczęstszych przyczyn spowolnienia i jak poprawić wydajność witryny za pomocą zwinnego CMS, takiego jak WordPress VIP.

Po pierwsze, co się właściwie dzieje, gdy ładujesz aplikację internetową?

To wielka prośba dla każdej przeglądarki, która musi natychmiast wrzucić wyższy bieg, wykonując całą masę czynności w ciągu milisekund. Oto chuda dzięki uprzejmości Mozilla:

1. Przeglądarka przechodzi do serwera DNS i znajduje prawdziwy adres serwera, na którym znajduje się witryna.
2. Przeglądarka wysyła wiadomość żądania HTTP do serwera, prosząc go o przesłanie kopii witryny do klienta. Ta wiadomość i wszystkie inne dane przesyłane między klientem a serwerem są przesyłane przez twoje połączenie internetowe za pomocą protokołu TCP/IP.
3. Jeśli serwer zaakceptuje żądanie klienta, wysyła klientowi komunikat „200 OK”, co oznacza „Oczywiście, że możesz zajrzeć na tę stronę! Oto jest. Następnie zaczyna wysyłać pliki witryny do przeglądarki jako serię małych fragmentów zwanych pakietami danych.
4. Przeglądarka łączy małe fragmenty w kompletną stronę internetową i wyświetla ją.

Uwaga: Oczywiście nie jest to takie proste. Między każdym z nich jest wiele mniejszych kroków. Na razie przyjrzyjmy się pięciu kluczowym przyczynom „powolności” i sposobom, w jaki nasz WordPress CMS VIP je łagodzi.

Więc co powoduje powolne przeglądanie?

Winowajca 1. Brak punktów PoP i CDN

Najprawdopodobniej Twoja firma ma zasięg globalny. Zwiększa to logistyczne wyzwanie związane z zapewnieniem szybkich, spójnych i stabilnych połączeń dla użytkowników na różnych typach połączeń na różnych urządzeniach.

Więc co to oznacza dla twojej aplikacji?

Gdy żądanie sieciowe jest inicjowane z kroku 2 powyżej, żądanie przechodzi przez wiele przeskoków sieciowych. Przeskok to termin związany z siecią komputerową, który odnosi się do liczby routerów, przez które przechodzi pakiet, od źródła do miejsca docelowego.

W wyniku tych przeskoków z lokalizacji geograficznej użytkownika do serwera, użytkownicy mogą wydłużyć czas wczytywania. Można to złagodzić, udostępniając treści bliżej odwiedzającemu, za pośrednictwem sieci dostarczania treści (CDN) i punktów obecności (PoP).

Odpowiedź VIP WordPressa :

CDN WordPress VIP to globalna sieć brzegowych i źródłowych punktów PoP, które obsługują Twoją witrynę globalnym klientom tak szybko, wydajnie i niezawodnie, jak to tylko możliwe. Ta zlokalizowana dostępność następuje automatycznie, gdy tylko nasze serwery brzegowe zostaną powiadomione o nowej zawartości z Twojej aplikacji. Oznacza to, że Twój zespół nie musi obsługiwać żadnej dodatkowej konfiguracji, co pozwala mu skupić się na innych zadaniach.

Winowajca 2. Niezoptymalizowane media

Te wysokiej jakości zdjęcia, które wszyscy robią dzisiaj na najnowszych urządzeniach mobilnych, są całkiem piękne! To znaczy, dopóki nie zostaną użyte jako miniatury na Twojej stronie głównej.

Dodanie obrazu 4K i ograniczenie go do kontenera 100×100 pikseli oznacza, że ​​użytkownicy muszą załadować cały obraz 4K. Pojedynczy obraz nie jest zbytnim powodem do niepokoju, ale w przypadku firm publikujących treści na dużą skalę ładowanie strony może z łatwością eksplodować wykładniczo, im więcej artykułów zapełni stronę indeksu.

Odpowiedź VIP WordPressa :

Aplikacje na WordPress VIP automatycznie otrzymują wszystkie zalety obrazów w pamięci podręcznej krawędzi i automatycznej zmiany rozmiaru obrazu na przesłanych obrazach. Dodatkowo obrazy można zmieniać w locie.

Winowajca 3. Niezoptymalizowany Javascript i CSS

Podczas ładowania dużych plików liczy się każdy bit i każde żądanie. Jeśli zoptymalizowałeś już liczbę przeskoków sieciowych potrzebnych do pobrania pliku, największy czas potrzebny na dotarcie pliku to otwarcie i zamknięcie żądań.

Aby temu zaradzić, współczesny rozwój JavaScript i CSS często wykorzystuje minifikację i konkatenację.

Minifikacja odnosi się do usunięcia wszystkich niepotrzebnych znaków z pliku, zwykle wszystkich niepotrzebnych białych znaków. Celem jest tutaj zmniejszenie całkowitej liczby przesyłanych bitów.
Konkatenacja to czynność sklejania wielu plików w jeden większy plik. Celem jest tutaj zmniejszenie liczby żądań sieciowych.

Odpowiedź VIP WordPressa :

WordPress VIP automatycznie łączy pliki JavaScript i CSS, aby zmniejszyć liczbę żądań występujących podczas pojedynczego ładowania strony. Pliki CSS są minimalizowane i łączone. Uznanie należy do wybranej przez nas wtyczki o otwartym kodzie źródłowym.

Zminimalizowane i połączone pliki są następnie buforowane przez 15 dni lub do czasu wykrycia zmiany.

Winowajca 4. Słabe wykorzystanie pamięci podręcznej

Pamięć podręczna to specjalne tymczasowe miejsce do przechowywania, które przyspiesza działanie. To, co przyspieszają, zależy od rodzaju pamięci podręcznej.

Jeśli nie korzystasz z pamięci podręcznej, możesz poważnie wpłynąć na szybkość odpowiedzi strony, gdy aplikacja jest obciążona.

Odpowiedź VIP WordPressa :

WordPress VIP wykorzystuje kilka różnych typów buforowania:

• Pamięć podręczna obiektów — używana do przechowywania danych na poziomie aplikacji. Pomaga to szybko i wydajnie pobrać dane bez uderzania w bazę danych. Krótko mówiąc, pamięć podręczna obiektów zapobiega zabieraniu cennego czasu połączenia przez rozległe obliczenia i/lub zapytania.
• Pamięć podręczna zapytań — lekkie buforowanie w pamięci zapytań do bazy danych. W WordPressie każde zapytanie post, które wykorzystuje API WP_Query, bardzo korzysta z tej formy buforowania.
• Pamięć podręczna stron — przechowywanie w pełni narysowanej strony, przechowywane w każdej lokalizacji na krawędziach PoP. Jest to pierwszy poziom pamięci podręcznej, z którym spotyka się większość użytkowników odwiedzających Twoją aplikację. Pamięć podręczna stron umożliwia naszej sieci CDN serwowanie zlokalizowanej zawartości bez uruchamiania przez aplikację wiersza kodu.

Wszystko to działa harmonijnie, aby skrócić czas odpowiedzi na żądanie.

Problem 5. Nasycenie połączenia z bazą danych

Gdy zawartość aplikacji i baza użytkowników rosną, te starsze zapytania do bazy danych, które pierwotnie działały dobrze, mogą teraz obniżyć wydajność.

Gdy wykonanie zapytań zajmuje trochę czasu, zajmuje to miejsce w bazie danych do czasu zakończenia zapytania. Czasami te stanowiska zapełniają się bardzo szybko, co uniemożliwia wykonanie większej liczby zapytań. Zwykle objawia się to obniżeniem wydajności aplikacji, dopóki baza danych nie obsłuży 500 odpowiedzi.

Nasycenie połączenia może nastąpić szybko i losowo, co sprawia, że ​​pierwotna przyczyna jest trudna do zdiagnozowania.

Odpowiedź VIP WordPressa :

W ramach pakietu usług WordPress VIP zapewniamy dostęp do New Relic, który pomaga proaktywnie diagnozować i monitorować potencjalne problemy, takie jak te powyżej. Oszczędza to czas Twojego zespołu, koszty i kłopot z zabezpieczeniem dodatkowych narzędzi i zasobów, gdy liczą się sekundy.

Podsumowując

Od przeskoków sieci i braku obecności punktów po nasycenie zawartości bazy danych, zajęcie się głównymi przyczynami słabej wydajności witryny powinno być priorytetem P0 dla każdej przyszłościowej organizacji i jej systemu zarządzania treścią. W końcu zrobienie tak dobrego pierwszego wrażenia na odbiorcach to wszystko w erze cyfrowej. Ponieważ prędkość naprawdę zabija.

Dowiedz się więcej o WordPressie VIP tutaj.

Autor

Michael Chan, starszy inżynier oprogramowania, WordPress VIP