Jeśli jesteś w WordPress przez jakiś czas, jesteś również bardzo dobrze zaznajomiony z kreatorami stron. Znane są z dwóch rzeczy:

  1. Daje Ci swobodę tworzenia witryny typu “przeciągnij i upuść” zamiast pisania jej od zera
  2. Są ciężkie-zwiększają obciążenie Twojej witryny (pod względem czasu ładowania)

Zaktualizowano: 16/08/2018 Hummingbird zawiera stronę, przeglądarkę, buforowanie RSS i Gravatar, pełne wsparcie dla wielu witryn, wszystkie nowe narzędzia dla programistów i nowy usprawniony interfejs.

Pierwszy znacząco zmienił WordPress-łatwość użycia i elastyczność tych wtyczek/motywów wywróciła niszową platformę blogową do góry nogami.

Wiele firm podjęło próbę zbudowania własnych motywów do tworzenia stron, z których niektóre odniosły duży sukces, podczas gdy inne starały się uzyskać trakcję.

Nawet rdzeń WordPress skacze na modę z Gutenbergiem.

Ale większość wtyczek ma jedną wadę, która w rzeczywistości sprawia, że ludzie tacy jak ja wahają się używać tych tematów.

Mam obsesję na punkcie błyskawicznej witryny, a kreatory stron wprowadzają wiele kosztów, które mają tendencję do nadmuchiwania witryny i zabijania prędkości, na którą tak ciężko pracowałem.

W tym poście pokażę Ci, jak wypełnić lukę, aby uzyskać wygodę kreatora stron, jednocześnie utrzymując superszybką witrynę dzięki Koliberowi.

Dlaczego kreatory stron spowalniają witrynę?

Aby Kreator stron był łatwy w użyciu, a przede wszystkim, aby dostarczał piękne wyniki, musi oferować mnóstwo funkcji. Zasadniczo musi być tak szeroki, jak to możliwe – w stanie stworzyć prosty przycisk wezwania do działania lub bardziej złożone funkcje, takie jak suwaki, formularze kontaktowe i inne złożone funkcje związane ze stroną internetową.

Oznacza to, że przynajmniej pliki CSS dodane przez wtyczkę będą musiały zapewnić stylizację dla wszystkich możliwych dodatków (nawet jeśli użytkownik końcowy nie korzysta z każdej funkcji).

Oprócz plików CSS, zaawansowane funkcje, takie jak suwaki, portfele, galerie zdjęć, mapy i inne będą również zawierać kilka plików JS.

Może to być świetne dla funkcjonalności, ale im szerszy jest budowniczy, tym cięższa będzie strona.

Szybkie spojrzenie na poniższą tabelę pokazuje nam wydajność, którą strona internetowa wykonuje po skonfigurowaniu wtyczki pagebuilder.

Pagebuilder Impact
Wpływ kreatora stron (źródło: Primareimage.uk)

Jak widać, niektóre z czystszych i drobniejszych kreatorów stron dodają tylko marginalny rozmiar do twojej witryny, co nie stanowi takiego problemu.

Z drugiej strony, niektóre z nich stają się dość ciężkie. Wiemy, że są ciężkie, ale nadal z nich korzystamy ze względu na kompromis dla wygody i łatwości użytkowania. (Nawiasem mówiąc, niedawno recenzowaliśmy Beaver Builder vs Divi na Collectiveray, skupiliśmy się głównie na ich funkcjonalności, a nie konkretnie na wydajności).

Więc można to naprawić? Czy możemy uzyskać funkcjonalność kreatora stron bez problemów z wydajnością?

Ten problem nie ogranicza się do WordPress.

Wix, SquareSpace i inne popularne kreatory stron internetowych mają własne problemy z wydajnością.

To tutaj koliber WPMUDEVA może przyjść z pomocą.

Więc jak Koliber pomaga?

Istnieje wiele sposobów, w jaki Twoja witryna może zostać wzmocniona za pomocą kolibra-i nie jest to ograniczone do witryn, które używają kreatorów stron, dotyczy to każdej witryny WordPress.

Buforowanie Przeglądarki

Jednym ze sposobów na szybsze ładowanie witryny jest upewnienie się, że pliki statyczne nie są pobierane w kółko.

Na przykład wspomniany powyżej Fusion Builder dodaje 200KB plików do twojej witryny. Są to pliki, które zasadniczo nigdy się nie zmienią, ponieważ jest to CSS.

Co robi Hummingbird to dodaje dyrektywę do pliku, tak że pobiera się ją tylko w dwóch przypadkach

  1. Plik faktycznie się zmienił
  2. Upłynął wcześniej ustalony termin ważności

Koliber pozwala ustawić różne czasy wygaśnięcia, od dni do roku. Oznacza to, że jeśli użytkownik uzyskuje dostęp do witryny w kółko lub odwiedza wiele stron w witrynie, użyje tego samego pliku, który został już pobrany.

Oszczędza to dużo czasu pobierania, ponieważ przeglądarka używa lokalnej kopii tego pliku zamiast go pobierać.

Pomnóż to przez wszystkie pliki statyczne na swojej stronie, takie jak wszystkie pliki CSS, obrazy, pliki JS … a to znacznie zmieni czas ładowania Twojej witryny.

Naprawdę fajne jest to, że Koliber robi to automatycznie za Ciebie. Zazwyczaj trzeba będzie majstrować wokół z .plik HTACCESS, z ryzykiem złamania witryny w procesie.

Kompresja GZIP

Jest to kolejna prosta funkcja, która faktycznie robi miłą różnicę.

W rzeczywistości, gdy optymalizujemy prędkość, używamy koncepcji trzech Rs

  • Ponowne użycie
  • Zmniejszyć
  • Recykling

Buforowanie przeglądarki wykorzystuje koncepcję ” ponownego użycia “i”recyklingu”.

Kompresja GZIP idzie na R w środku-zmniejszyć. Zasadniczo, to, co robi kompresja GZIP, to kompresja zawartości w taki sposób, że jest mniej do przeniesienia.

Po raz kolejny, ponieważ HTML ma głównie charakter tekstowy, jest bardzo dobrym kandydatem do kompresji. Podczas kompresji zawartości tekstowej uzyskasz doskonałe wyniki kompresji.

Ale naprawdę świetną rzeczą jest to, że GZIP jest czymś, co robisz raz (po prostu włącz ustawienie) i otrzymasz korzyści na zawsze!

Jeśli używasz konta hostingowego opartego na CPanel, możesz to włączyć za pomocą ikony “zoptymalizuj swoją witrynę”.

Enabling GZIP Compression
Włączanie kompresji GZIP

Ale naprawdę i naprawdę, nawet nie musisz tego robić, jeśli używasz kolibra.

Jeśli GZIP nie jest włączony, Hummingbird ponownie wstawi ustawienie do twojego .plik htaccess taki, że kompresja GZIP jest włączona.

 

Optymalizacja i łączenie zasobów

Teraz przechodzimy do trzeciego R, recykling – zasadniczo chcemy zrobić to zamiast wielokrotnego otwierania połączenia dla różnych plików wymaganych przez naszą stronę internetową, będziemy przetwarzać to samo połączenie i wysyłać połączoną wersję wszystkich naszych plików za pośrednictwem tego samego połączenia.

Aby krótko wyjaśnić pomysł, użyjemy idei stolików kelnerskich. Jest to świetna analogia do wyjaśnienia korzyści płynących z łączenia plików w jeden.

Wyobraź sobie kelnera w restauracji. Obsługują stół dziesięciu osób, więc przychodzą i przyjmują kolejność pierwszej osoby, idą do baru i przynoszą im drinka.

Następnie przyjmują rozkaz drugiej osoby i przynoszą je ich pij.

Po raz kolejny przyjmują kolejność trzeci osoba, wracaj do baru i przynieś im drinka. Trwa to do momentu podania wszystkich drinków.

Jest to niezwykle nieefektywne wykorzystanie czasu i zasobów – zajmie to zarówno dużo czasu, jak i wiele podróży tam iz powrotem.

Gdyby jednak kelner przyjął wszystkie zamówienia, poszedł do baru, zebrał wszystkie drinki na jednej tacy i podał je wszystkie raz (może dwa razy, nie chcemy, żeby wszystko rzucili; -)) ich praca byłaby o wiele bardziej efektywna.

Jest to ogólna idea łączenia wielu plików CSS i JS w jeden.

Utworzenie połączenia HTTP z Twoją witryną jest bardzo kosztowną operacją, która zajmuje dużo czasu. Więc gdybyśmy mogli otworzyć połączenie tylko raz i ponownie wykorzystać to połączenie, aby wysłać wszystkie pliki CSS i JS, zaoszczędziłoby to dużo czasu – znaczną ilość czasu, gdy weźmiemy pod uwagę, że większość stron internetowych wygeneruje ponad sto plików CSS i JS.

Jest to szczególnie ważne, jeśli nie używasz HTTP/2 na swojej stronie. Liczba zapytań generowanych przez witrynę, pod względem różnych plików CSS i JS, ma znaczący wpływ na wydajność witryny.

Jak Koliber to łagodzi?

Wtyczka analizuje wszystkie pliki w Twojej witrynie, a następnie daje możliwość wykonania szeregu poprawek w plikach, takich jak usprawnienie ładowania witryny.

Optymalizacja Zasobów

Optymalizacja zasobów polega na usunięciu zbędnego kodu z plików CSS i JS, aby były jak najmniejsze pod względem wielkości pobierania.

Usuwa wszelkie komentarze, pustą przestrzeń, dodatkowe linie lub cokolwiek, co jest “dodatkowe”. Hummingbird faktycznie używa swojego super optymalizacji narzędzie, które kompresuje pliki do 2x więcej.

Połącz

Dzięki kreatorowi Koliber, który pokażemy Ci za chwilę, masz możliwość dodania każdego konkretnego pliku do wynikowego pliku “połączonego”, jak omówiono powyżej.

Wspaniałą rzeczą jest to, że masz pełną kontrolę nad tym, czy chcesz dołączyć plik, czy nie. Powodem jest to, że niektóre wtyczki i / lub motywy nie grają dobrze z innymi.

Mając opcję decydowania, czy chcesz uwzględnić każdy plik indywidualnie, możesz przetestować każdy plik w swojej witrynie w taki sposób, aby uwzględnić do niego jak najwięcej plików. Jeśli jednak któryś z tych plików uszkodzi witrynę, gdy zostanie dołączony do połączonego pliku, możesz go nie dołączać.

Hummingbird Asset Optimization obsługuje mniejsze, szybsze pliki.

 

Pozycja (oryginał vs stopka)

Inną opcją, która jest dostarczana z Koliberem, jest możliwość decydowania, czy pozwolić plikowi pozostać w pierwotnej pozycji (zazwyczaj nagłówek), czy przenieść go do stopki,

Po raz kolejny jest to opcja, która może pomóc poprawić wydajność witryny, ale tym razem w sposób bardziej zorientowany na użytkownika.

Jeśli nagłówek zawiera dużą liczbę plików (które są dość duże), przeglądarka musi poczekać na pobranie wszystkich tych plików przed rozpoczęciem wyświetlania strony.

Oznacza to, że użytkownik będzie siedział w przeglądarce, czekając na pobranie wszystkich tych plików, zanim zobaczy cokolwiek na ekranie.

To oczywiście może być bardzo frustrujące. Badania wykazały, że strona, która ładuje się wolniej niż 3 sekundy, zaczyna frustrować użytkowników do momentu, w którym zaczynają opuszczać witrynę. Istnieje również korelacja między szybkością strony a konwersją – szybsze witryny konwertują lepiej.

Ale wróćmy do dyskusji.

Po załadowaniu plików CSS i JS w stopce zamiast nagłówka, strona rozpocznie renderowanie i wyświetlanie tekstu i obrazów w miarę ich odbierania przez przeglądarkę, zamiast czekać na wszystkie ciężkie pliki CSS i JS do pobrania.

CDN Hosted file Optimization

Wielokrotnie mówiliśmy o znaczeniu korzystania z CDN do dostarczania ciężkich plików. Mówiąc najprościej, CDN pomaga na dwa sposoby. Rozprzestrzenia obciążenie witryny na wiele serwerów, ale co najważniejsze, obsługuje pliki z lokalizacji geograficznej, która jest fizycznie bliżej lokalizacji użytkownika.

Ale CDN nie zawsze może być przystępny cenowo lub wykonalny.

Z Koliberem nie musisz niczego rozwidlać dla CDN. Dzieje się tak dlatego, że część usług wbudowanych we wtyczkę pozwala na serwowanie połączonych plików z infrastruktury CDN WPMUDEV-superszybkiej sieci serwerów rozproszonych na całym świecie dla maksymalnej prędkości ładowania.

CDN włączanie plików

 

Optymalizacja Obrazu

To kolejna duża sprawa. Ściśle mówiąc, nie jest to cecha kolibra, ale jak dobry plugin wydajności powinien, to poleci wtyczkę optymalizacji obrazu, i oczywiście, WPMUDEV ma świetną ofertę w tym zakresie (Smush Pr0).

Rzeczywistość jest taka, że większość z nas nie trudzi się optymalizacją naszych obrazów dla sieci.

Jednak nie optymalizując obrazów, tworzymy poważny negatywny wpływ na szybkość ładowania naszej strony.

Na przykład, Czy wiesz, że single simple unoptimized PNG może dodać więcej niż 200KB do rozmiaru twojej witryny.

To więcej niż cały dodatkowy rozmiar dodany przez wyżej wymieniony najbardziej wydajny Kreator stron.

Teraz pomnóż to przez wszystkie obrazy w Twojej witrynie, zwłaszcza jeśli masz witrynę o dużej zawartości obrazów, i możesz zobaczyć, jak to wszystko się ułoży i będzie miało znaczący wpływ na wydajność!

Inne zalecenia

Koliber nie kończy się na powyższych zaleceniach. Sięga jeszcze głębiej, poza to, co może kontrolować.

Na przykład, naprawdę uważam, że przydatne jest to, że zawiera doskonałe zalecenia dotyczące skrócenia czasu odpowiedzi serwera. To było coś, z czym borykałem się przez długi czas, i po zaleceniach zainstalowania mechanizmu OpCache, w końcu udało mi się pozbyć tego dokuczliwego błędu, który dręczył mnie przez długi czas bardzo długi czas 🙂

Website speed recommendations
Zalecenia dotyczące szybkości witryny

Ostatnie Słowa

Kreatory stron i inne wielofunkcyjne lub ogólne motywy i wtyczki mogą mieć poważny i znaczący wpływ na szybkość witryny. Wprowadzenie zaleceń sugerowanych przez Hummingbird może dać ci to, co najlepsze z obu światów-łatwą do zaprojektowania stronę internetową za pomocą ulubionego kreatora stron * i * niesamowitą szybkość!

Czy korzystałeś z rekomendacji kolibra, aby osiągnąć oszałamiające rezultaty? Czy to sprawiło, że Twoja wcześniej ciężka strona internetowa była szczuplejsza, złośliwa i szybsza? Jaka jest najlepsza cecha kolibra, którą lubisz? Czy masz jeszcze jakieś wskazówki dotyczące wydajności, którymi możesz się z nami podzielić? Daj nam znać w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…