35 optymalizacji wydajności dla witryny WordPress
Strona zbudowana w Canvas pobiera CSS i JavaScript tylko tych bloków, które renderuje, i niczego więcej. Ponadto dostępne są 35 optymalizacji, a każda z nich to osobny przełącznik z zachowawczymi ustawieniami domyślnymi i prostym opisem jej działania.
Zaktualizowano
Ładowanie zasobów dla poszczególnych bloków
Większość motywów dostarcza jeden duży arkusz stylów i jeden duży skrypt, a każda strona płaci za każdą funkcję motywu. Canvas przypisuje każdy z jego 314 bloków do CSS i JavaScriptu, których potrzebuje, a następnie ładuje sumę tego, co strona faktycznie wyrenderowała.
- Strona z cennikiem nigdy nie pobiera skryptu slidera
- Strona bez formularza nigdy nie pobiera skryptu obsługi formularza
- Edytor ładuje style bloków w ten sam sposób
- Nie wymaga konfiguracji i nie ma możliwości przypadkowego wyłączenia
Zadeklarowane, a nie zgadywane
Każdy blok deklaruje własne zasoby. Mapa znajduje się w samym bloku, więc nie ma centralnej listy, o której ktoś mógłby zapomnieć przy aktualizacji.
Działa z podstawowymi blokami
Bloki podstawowe i bloki innych twórców zachowują własne ładowanie. Canvas nie przejmuje ich zasobów i nie rywalizuje o nie z WordPressem.
Szablony też się liczą
Nagłówki, stopki, tytuły stron i slidery również są blokami, więc strona z prostym nagłówkiem nie ładuje kodu mega menu.
Nic do dokupienia
Warunkowe ładowanie nie jest funkcją premium ani dodatkiem. Tak biblioteka działa w każdym planie i przy wygasłej licencji.
35 optymalizacji, pogrupowane według tego, czego dotyczą
Nic tu nie działa jak magia i nic nie jest ukryte. Każda z tych funkcji wykonuje konkretne, łatwe do sprawdzenia działanie na stronie, którą wysyła WordPress.
Ładowanie 7
Zatrzymaj blokowanie pierwszego renderowania przez CSS i JavaScript i zacznij wcześniej ładować następną stronę.
- Asynchroniczne ładowanie niekrytycznych arkuszy stylów
- Odłóż ładowanie niekrytycznego JavaScriptu
- Opóźnij JavaScript do pierwszej interakcji użytkownika
- Wstępnie wczytaj największy obraz widoczny bez przewijania
- Preconnect do źródeł, z których strona będzie korzystać
- Prefetch DNS dla zewnętrznych hostów
- Spekulatywne ładowanie: następna strona jest pobierana, zanim zostanie kliknięta
3 czcionki
Tekst pozostaje czytelny, gdy czcionka internetowa jeszcze się ładuje, a czcionki Google w ogóle nie muszą być żądaniem od zewnętrznego dostawcy.
- Dodaj font-display swap do czcionek internetowych
- Wstępne wczytywanie czcionek potrzebnych na pierwszym ekranie
- Hostuj czcionki Google na własnym serwerze
Media 6
Obrazy to najcięższy element większości stron i najłatwiej przy nich popełnić błąd.
- Leniwe ładowanie obrazów poniżej linii przewinięcia
- Leniwe wczytywanie iframe i osadzeń
- Ustaw jakość JPEG generowanych przez WordPress
- Ogranicz maksymalną szerokość przesyłanych obrazów
- Kontroluj zestawy responsywnych obrazów, które zapisuje WordPress
- Kontroluj, które rozmiary obrazów są w ogóle generowane
Czyszczenie 8
WordPress oferuje funkcje, za które płaci każda witryna, a z których korzysta niewiele witryn.
- Usuń parametry zapytania z zasobów statycznych
- Wyłącz skrypty i style emoji
- Wyłącz wykrywanie oEmbed i skrypt osadzania
- Wyłącz Dashicons na froncie witryny
- Wyłącz XML-RPC
- Wyłącz kanały RSS
- Usuń jQuery Migrate
- Wyłącz pingbacki własnej witryny
Baza danych 5
Zaplecze wolnej witryny: rewizje, autozapisy i Heartbeat, który nigdy się nie zatrzymuje.
- Ogranicz liczbę zachowywanych wersji wpisu
- Ustaw interwał automatycznego zapisu
- Ogranicz lub wyłącz heartbeat w panelu administracyjnym
- Usuwanie rewizji, transjentów i spamu z bazy danych
- Ogranicz REST API do zalogowanych użytkowników
WooCommerce 5
Sklep ładuje swoje skrypty na każdej stronie witryny, także na tych, które niczego nie sprzedają.
- Usuwa JavaScript WooCommerce ze stron, na których nie ma treści sklepu
- Wyłącz śledzenie atrybucji zamówień
- Wyłącz odpytywanie skryptu cart fragments na każdej stronie
- Nie ładuj biblioteki siły hasła poza stronami konta
- Usuń dołączoną bibliotekę Select2 poza finalizacją zamówienia
Przepisywanie w sieci dostarczania treści (CDN) 1
Skieruj arkusze stylów, skrypty, obrazy i czcionki do sieci dostarczania treści, za którą już się płaci, przepisując ich adresy podczas renderowania strony. Canvas nie sprzedaje sieci i nie kieruje ruchu przez nasze serwery.
Łącznie to 35 przełączników, a pięć przełączników dla WooCommerce pojawia się tylko wtedy, gdy WooCommerce jest aktywny. Więcej o integracji ze sklepem.
Każde z nich to przełącznik, a domyślne ustawienia są zachowawcze
Canvas włącza to, co jest bezpieczne dla każdej witryny, a resztę pozostawia do decyzji, z powodem zapisanym obok każdej kontrolki. Jedno ustawienie, które zwykle jest złym pomysłem, mówi o tym wprost w panelu, w miejscu, w którym podejmuje się decyzję.
Podstawy SEO i dostępności
Strona, która szybko się ładuje, ale nie może być odczytana, przeszukiwana przez wyszukiwarki ani obsługiwana klawiaturą, nie jest skończona. Wszystko to znajduje się w samym motywie, w każdym planie, bez żadnych funkcji zamkniętych za płatnym ulepszeniem.
Metadane pochodzące z treści
Tytuły, opisy, karty udostępniania w mediach społecznościowych, adresy URL kanoniczne, reguły robots i mapa witryny, wszystko generowane na podstawie strony w trakcie renderowania. Nie ma drugiej kopii treści, którą trzeba by aktualizować.
16 typów schematów
Organization, WebSite, WebPage, Person, ścieżka nawigacji, Product, Brand, Offer, Review i ocena, adres, współrzędne geograficzne, godziny otwarcia i wyszukiwarka witryny, dodawane tam, gdzie mają zastosowanie.
Semantyczne punkty orientacyjne
Punkty orientacyjne: nagłówek, nawigacja, główna treść i stopka, link prowadzący bezpośrednio do treści, nagłówki w logicznej kolejności oraz widoczny fokus na każdym elemencie, do którego można dotrzeć.
Menu obsługiwane z klawiatury
Menu, mega menu, panele boczne i modale otwierają się, przesuwają i zamykają z klawiatury, a animacje uwzględniają ustawienie ograniczenia ruchu odwiedzającego.
Dostępność, bezpieczeństwo i eksport danych nigdy nie są funkcjami premium. Pozostają dostępne przy wygasłej licencji, ponieważ witryna, która przestaje działać, to problem, którym zajmuje się wsparcie, a nigdy decyzja licencyjna.
Jak to sprawdzamy
Twierdzenia o szybkości i dostępności łatwo sformułować i łatwo sprawdzić. Nasze sprawdzamy, a poniżej opisujemy, jak to robimy.
Strony są porównywane z ich projektami w prawdziwej przeglądarce
Każda strona dema jest renderowana w przeglądarce i porównywana z projektem, z którego pochodzi: wysokość dokumentu, szerokości sekcji, obliczone odstępy oraz wszystko, co steruje JavaScriptem, mierzone po jego uruchomieniu, nigdy przy pierwszym wyrenderowaniu.
Ta witryna jest sprawdzana przy trzech szerokościach
Każda strona tutaj jest sprawdzana przez axe-core pod kątem WCAG 2.1 na poziomach A i AA przy szerokościach 1440, 1024 i 390 pikseli, a także pod kątem kontroli, których axe nie wykonuje: jeden h1, poziomy nagłówków bez pomijania, cztery landmarki, działający link pomijania, brak poziomego przepełnienia, brak tekstu mniejszego niż 12 pikseli oraz linki czytelne jako tekst i obszary dotyku co najmniej 24 pikseli.
Czego Canvas wymaga do działania
WordPress
Canvas opiera się na edytorze bloków, więc wymaga WordPressa z Edytorem witryny. Wersja 7.1 lub nowsza.
PHP
PHP 7.4 lub nowsze. Aktualne wydanie PHP to najprostsza i najtańsza poprawa szybkości, jaką większość witryn może wprowadzić.
Przetestowano do wersji
Canvas jest testowany pod kątem WordPress 7.1, a po każdym wydaniu WordPress pojawia się aktualizacja.
O wydajności
Dotyczy to także tego, o co pytają nas najczęściej, dlatego na tej stronie nie ma żadnych wyników.
Czy nadal potrzebuję wtyczki do buforowania?
Prawdopodobnie tak, i to uczciwa odpowiedź. Canvas kontroluje to, co kontrolują motyw i WordPress: jakie zasoby ładuje strona, jak zachowują się czcionki i obrazy oraz ile pracy wykonuje baza danych. Buforowanie stron, buforowanie obiektów i dostarczanie z sieci brzegowej należą do hostingu lub wtyczki do buforowania. To różne zadania, więc uruchamianie obu to zwyczajna konfiguracja.
Czy włączenie tych opcji zepsuje moją witrynę?
Każdy przełącznik można cofnąć, a te, które najczęściej kolidują z inną wtyczką, są domyślnie wyłączone. Każdy przełącznik wyjaśnia, co robi i kiedy lepiej go nie ruszać, a ustawienie naprawdę ryzykowne informuje o tym wprost w panelu. Włączaj je pojedynczo i po każdej zmianie odśwież stronę widoczną dla odwiedzających.
Czy muszę konfigurować ładowanie zasobów dla każdego bloku osobno?
Nie, nie ma nic do znalezienia i włączenia. Tak działa biblioteka bloków. Każdy blok deklaruje CSS i JavaScript, których potrzebuje, a strona ładuje sumę tego, co faktycznie wyrenderowała.
Czy dema są już zoptymalizowane?
Import dema obowiązujący w całej witrynie przejmuje Opcje motywu dema, a przełączniki wydajności są ich częścią, więc dema startuje z ustawieniami, z jakimi zostało zbudowane i sprawdzone. Dowolne z nich można później zmienić.
Dlaczego ta strona nie publikuje wyników szybkości?
Wynik testu syntetycznego przeprowadzonego na naszym sprzęcie nic nie mówi o hostingu, wtyczkach, obrazach ani odwiedzających. Publikujemy dokładnie to, co robi każda optymalizacja, dzięki czemu można ją włączyć i zmierzyć wydajność własnej witryny na własnej infrastrukturze.
Szybka witryna, którą nadal można edytować
Każdy plan zawiera tę samą bibliotekę bloków, te same 35 optymalizacji oraz to samo warunkowe ładowanie zasobów. Nie ma poziomu wydajności.