Wydano Breeze v1.2: spojrzenie na nowe funkcje, które wprowadza ta duża aktualizacja

Cloudways wypuściło Breeze v1.2 z naciskiem na poprawę zgodności z Core Web Vitals i ostatecznie zapewnienie lepszego wyniku PageSpeed ​​Insights dla Twoich witryn.

Jeśli nadal nie słyszałeś, Google wprowadzi nową aktualizację jakości strony w tym miesiącu. Niedawno wprowadziliśmy bezpłatny Google Page Experience Checker, który pomoże Ci zmierzyć wydajność Twojej witryny i inne czynniki jakości strony w porównaniu z aktualizacją. W rzeczywistości od początku 2021 r. skupiliśmy się na ulepszaniu naszego produktu i wprowadzaniu aktualizacji, które zapewniają najlepszą jakość strony Google.

Jednak przed aktualizacją Breeze do najnowszej wersji zdecydowanie zaleca się wykonanie kopii zapasowej całej witryny WordPress lub przetestowanie nowej wersji w środowisku testowym. Niekompatybilność nowszych wersji z innymi wtyczkami może czasami powodować problemy i przypadkowe błędy, więc jeśli masz gotową kopię zapasową, możesz szybko przywrócić witrynę WordPress.

Co nowego w Breeze v1.2?

Przyjrzyjmy się teraz, jakie ekscytujące nowe funkcje wprowadza Breeze w wersji 1.2.

Bezpieczne linki między źródłami

Jeśli znasz praktyki SEO, zrozumiesz znaczenie atrybutów „noopener noreferrer”. Tym razem Breeze zawiera nową funkcję, która automatycznie doda atrybut „noopener noreferrer” do linków, które mają wartość docelową „_blank”.

Uwaga: nie dodawaj ich w edytorze WordPress, ponieważ edytor automatycznie dodaje noopener noreferrer; dodaj łącza w plikach motywu. Po dodaniu linków wróć do wp-admin i zapisz ustawienia Breeze lub Wyczyść pamięć podręczną.

– Cross-Origin Safe Links in Breeze

Niektóre przypadki użycia

1. _blank wartość docelowa i brak atrybutu rel , funkcja bezpośrednio doda rel=" noopener noreferrer ”.
2. _blank, ale atrybut rel zawiera tylko wartość noopener , wtedy zostanie dodany noreferrer . Na przykład link zawiera tylko atrybut noopener : noreferrer Funkcja dodaje również atrybut noreferrer: <a href =”https://example.com” target =”_blank” rel=”noopener noreferrer _blank, ale rel zawiera wartość noreferrer , wtedy noopener również zostanie dodany.
3. _blank wartość docelowa i rel zawierają oba noopener noreferrer , nie będzie żadnych zmian.
4. href zawiera # link (ID), zostanie zignorowany, co oznacza brak zmian.

Kod wejściowy:

– Wprowadź kod w edytorze motywów

Wyjście kodu:

– Dane wyjściowe Kodeksu

Czcionka pozostaje widoczna podczas ładowania

Czcionki ładują się podczas odwiedzania witryny, a tekst nie jest widoczny w czasie ładowania. Aby poprawić wrażenia użytkownika, należy użyć techniki, która wyświetla zawartość tekstu (czcionka zastępcza) podczas pobierania czcionki (czas ładowania czcionki). Breeze ma teraz nową funkcję, która Ci w tym pomoże.

Ta funkcja będzie widoczna po sprawdzeniu minifikacji CSS i działa tylko w przypadku minifikacji CSS i opcji grupy CSS. Aby dołączyć atrybut font-display:swap do klas CSS, musimy zmodyfikować zawartość.

– Minifikacja w Breeze

Aby przetestować tę funkcję, możesz sprawdzić pliki .css w źródle strony widoku i wyszukać @font-face . Dodany zostanie atrybut wyświetlania czcionki . Jeśli ta definicja czcionki ma już atrybut wyświetlania czcionki, nic nie zostanie zmienione.

– Wyświetlanie czcionek w CSS

Lazy Load Images

Lazy loading to technika optymalizacji prędkości, która ładuje tylko widoczne obrazy na ekranie zamiast ładowania wszystkich obrazów naraz. Może to znacznie poprawić czas wczytywania i wrażenia użytkownika.

Nowa wersja Breeze oferuje funkcję Lazy Load Images w opcjach zaawansowanych . Jeśli włączysz tę opcję, obrazy zostaną zastąpione fikcyjnymi przezroczystymi obrazami jako symbolami zastępczymi, a gdy nadejdzie czas na wyświetlenie, oryginalny obraz zostanie załadowany.

– Lazy Load Images in Breeze

Kod rozpoznaje rozmiary danych i atrybuty data-srcset używane do wyświetlania prawidłowego rozmiaru obrazu na podstawie rozdzielczości. Następujące atrybuty zastępują oryginalne atrybuty:

bryza danych= src

data-brsrcset= data-srcset

data-brsizes= data-sizes

Jeśli chcesz sprawdzić, czy obrazy leniwego ładowania działają, czy nie, naciśnij „CTRL + Shift + I” → Sieć → wybierz obraz → przewiń w dół całą stronę.

– Sprawdź leniwe ładowanie w swojej przeglądarce

Wstępne ładowanie linków

Wstępne ładowanie łączy to kolejna nowa funkcja, którą dodaliśmy do menu Opcje zaawansowane, aby przyspieszyć działanie witryny i poprawić wyniki szybkości strony. Gdy najedziesz myszą na łącze, ta funkcja utworzy pamięć podręczną, a strona załaduje się szybciej po ponownym otwarciu lub odwiedzeniu tego łącza.

Gdy opcja jest włączona na zapleczu, plik JavaScript ładuje się na interfejsie, który nie jest zależny od żadnych innych bibliotek.

Gdy użytkownik najedzie na link przez ponad 150 ms, dla tego linku zostanie włączone pobieranie wstępne i zostanie utworzona pamięć podręczna strony. Kiedy więc użytkownik kliknie w link, strona jest gotowa do natychmiastowego wyświetlenia treści.

– Wstępnie ładuj linki w Breeze

Ta funkcja nie buforuje całej następnej strony po najechaniu myszą. Zamiast tego buforuje żądanie, aby zapewnić niewielki wzrost szybkości witryny.

Uwaga: Domyślnie czas opóźnienia linku jest ustawiony na 150 ms. Adresy URL zawarte w Nigdy nie buforuj tych adresów URL zostaną wykluczone z wstępnego ładowania.

Wstępnie załaduj swoje czcionki internetowe

Funkcja Wstępnie wczytaj swoje czcionki internetowe jest dostępna w opcjach zaawansowanych i jest prosta w użyciu. Wszystko, co musisz zrobić, to podać lokalny adres URL czcionki lub plik CSS (URL), który ładuje tylko czcionki . Czcionki internetowe bardzo często spowalniają działanie Twojej witryny i powodują opóźnienia, dlatego warto wybrać lepsze rozwiązanie, które pomoże Ci uporać się z tym problemem.

W tej aktualizacji wprowadzamy funkcję Wstępnie wczytaj swoje czcionki internetowe , która pomoże Ci poprawić wydajność witryny i usunąć problem z żądaniami wstępnego ładowania kluczy.

– Wstępnie załaduj swoje czcionki internetowe w Breeze

Ta funkcja wczytuje określone czcionki (dodane w polu) wcześnie, zamiast wczytywać czcionki na końcu, dzięki czemu można doświadczyć lepszej wydajności witryny i dobrych wyników Web Vital.

Opóźnij skrypty wbudowane JS

Opóźnienie skryptów wbudowanych JS to nowa funkcja dostępna w opcjach zaawansowanych. Ma to na celu ostateczne załadowanie wbudowanego JS, dzięki czemu użytkownik i tester szybkości witryny nie zobaczą czasu ładowania.

Ideą tego jest leniwe ładowanie, w którym Twój wbudowany skrypt js pojawi się podczas interakcji (przewiń w dół, przesuń kursor itp.) ze swoją witryną. Jest to świetna technika poprawiania wydajności witryny i wyników Web Vital.

– Opóźnienie skryptów wbudowanych JS w Breeze

Tutaj musisz podać kluczowe słowo kluczowe dla wbudowanego skryptu js, takiego jak Google Ads, a na końcu automatycznie załaduje określony skrypt.

Streszczenie!

Zespół Cloudways pracuje przez całą dobę, aby Breeze był Twoją wtyczką do pamięci podręcznej. Jest to pierwsza duża wersja, która oferuje sześć nowych, ekscytujących funkcji, które pomogą Ci poprawić szybkość strony i wyniki Web Vital.

Mamy nadzieję, że gdy Google wprowadzi w tym miesiącu aktualizację Page Experience, Twoja witryna będzie gotowa do skorzystania z nowej aktualizacji.

Jeśli masz jakieś pytania lub uwagi dotyczące Breeze v1.2, daj nam znać w sekcji komentarzy.