Wyjaśnienie podstawowych wskaźników internetowych dla WordPress

Core Web Vitals reprezentuje teraz zestaw obowiązkowych wskaźników do optymalizacji Twojej witryny, szczególnie jeśli SEO i wydajność witryny są ważne dla Twojej strategii cyfrowej. Niemniej jednak ustalenie, które narzędzia i strategie WordPress są najważniejsze przy próbie ulepszenia podstawowych wskaźników internetowych w Twojej witrynie, może być trudne.

Obejrzyj tę sesję, aby dogłębnie zapoznać się z najlepszymi praktykami i narzędziami do zrozumienia i poprawy wyników Core Web Vitals w witrynie WordPress.

Głośniki:

• Alex Zuniga, menedżer produktu w WP Engine
• Mark Davoli, dyrektor ds. tworzenia stron internetowych w firmie Amsive Digital
• Matt Chase, dyrektor ds. rozwoju w firmie Vital Design
• Sanjuncta Ghose, starszy programista stron internetowych w WP Engine
• Mike Crantea, dyrektor inżynierii frontendu w XWP

Transkrypcja:

ALEX ZUNIGA: Witamy w demystifying Core Web Vitals for WordPress. Nazywam się Alex Zuniga, menedżer produktu w WP Engine. A dzisiaj naprawdę omówimy tajniki podstawowych wskaźników internetowych dla Twojej witryny WordPress. Core Web Vitals to obowiązkowy wskaźnik do optymalizacji, jeśli zależy Ci na optymalizacji witryny pod kątem SEO, pod kątem wydajności witryny. Jednak ustalenie, które narzędzia i strategie WordPress mają największy wpływ, może być trudne. Dołącz więc do tej sesji, aby dogłębnie przyjrzeć się, w jaki sposób najlepsze praktyki i narzędzia mogą pomóc Ci poprawić Twoje kluczowe wyniki w sieci dla WordPress.

A teraz bez zbędnych ceregieli przedstawimy naszych panelistów na tę sesję. Po pierwsze, przekażę go Mike'owi, aby przedstawił się krótko.

MIKE CRANTEA: Cześć, jestem Mike Crantea. Znajduję się na Wyspach Kanaryjskich w Hiszpanii. Jestem dyrektorem Frontend Engineering w XWP, gdzie pracuję od 17 lat. Uwielbiam wydajność sieciową, głównie w obszarze technologii frontendowych. I cieszę się, że tu jestem. Hej.

ALEX ZUNIGA: Dziękuję, Mike. Następnie mamy Matta Chase'a.

MATT CHASE: Jestem dyrektorem ds. rozwoju w Vital Design w Portsmouth, New Hampshire. Ciężki frontend w mojej pracy. Dlatego wykonujemy wiele testów Lighthouse i Core Web Vital.

ALEX ZUNIGA: Super. Dzięki, Matt. I Marka.

MARK DAVOLI: Cześć, nazywam się Mark Davoli i jestem dyrektorem ds. rozwoju sieci w firmie Amsive Digital. Specjalizuję się w przestrzeni Core Web Vital dla naszego zespołu, ponieważ SEO jest bardzo ważne dla naszej firmy. I dlatego tak samo jest z Core Web Vitals. Szczęśliwy że jestem tutaj.

ALEX ZUNIGA: Cieszę się, że cię mam, człowieku. I wreszcie Sanjucta.

SANJUCTA GHOSE: Cześć. Jestem również z WP Engine. Jestem częścią zespołu odpowiedzialnego za utrzymanie stron internetowych WP Engine. Obejmuje to witryny, które pojawiły się z Delicious Brains, gdy przejął je WP Engine. Sporą część zeszłego roku spędziłem na optymalizacji witryn Delicious Brain pod kątem Core Web Vitals. Więc myślę, że to powinna być bardzo interesująca rozmowa. Szczęśliwy że jestem tutaj.

ALEX ZUNIGA: Dziękuję. Dziękuję. Cóż, witamy wszystkich naszych panelistów. I nie możemy się doczekać, aby usłyszeć, co masz do powiedzenia. Więc podzielimy te pytania według pomiarów, zarządzania, narzędzi i oczekiwań klientów, jeśli chodzi o Core Web Vitals. Więc nasze pierwsze pytanie, które chcemy wam wszystkim zadać, dlaczego w ogóle miałbym przejmować się Core Web Vitals? I w jakim stopniu powinienem skupić się na optymalizacji Core Web Vital?

MARK DAVOLI: Mogę o tym porozmawiać, jeśli chcesz. Dla mnie bardzo ważne jest, aby upewnić się, że masz dużą szybkość strony. A powodem, dla którego jest to ważne, są konwersje wyników końcowych. Prawidłowy? Kiedy więc ktoś wchodzi na stronę internetową, im dłużej trwa ładowanie, tym bardziej prawdopodobne jest, że zeskoczy. A jeśli nie masz dużej szybkości strony, będziesz miał pecha i potencjalnie stracisz dużo biznesu. Zwłaszcza w sklepie internetowym.

SANJUCTA GHOSE: Więc tak. W pewnym sensie zgadzam się z tym, co powiedziałeś, ponieważ jest to bardzo ważne dla SEO, ale musimy również pamiętać, że podstawowe wskaźniki internetowe są miarą postrzeganej wydajności Twojej witryny. Jak użytkownik postrzega Twoją witrynę. Myślę, że bardzo ważne jest zwracanie uwagi na to, że użytkownik postrzega Twoją witrynę jako responsywną, interaktywną i stabilną. Jakie są rzeczy, które mierzy Core Web Vitals. Myślę więc, że nawet bardziej niż wyniki SEO ważne jest, aby postrzeganie Twojej wydajności przez użytkownika było ważne. I dlatego powinniśmy skupić się na Core Web Vitals.

ALEX ZUNIGA: Jak najbardziej. Matt, miałeś-

MATT CHASE: Tak, w zasadzie to chciałem powiedzieć, tak, aspekt SEO jest świetny. Ale ostatecznie kodujemy te witryny dla ludzi. A my chcemy, aby ci ludzie mieli najszybszą i najszybszą możliwą witrynę. Ale to dotyczy obu światów. Prawidłowy? Dochodzimy więc do pewnego rodzaju – kiedy dostrajamy się do tych podstawowych wskaźników internetowych, robimy świetny UX. Ale w sposób, który satysfakcjonuje zespoły SEO, co czasami nie zawsze jest łatwą bitwą do wygrania. Więc to działa na każdego.

ALEX ZUNIGA: Biorąc to wszystko pod uwagę, wiemy, że to ważne. Ale jakie są najlepsze sposoby mierzenia naszego wyniku?

MARK DAVOLI: Jednym ze sposobów mierzenia, poza używaniem, jest narzędzie Google Page Speed ​​Insight, które ma kluczowe znaczenie, ponieważ jest to narzędzie, którego używają do pomiaru. Racja, więc jeśli chcesz mieć wpływ, użycie tego narzędzia jest niezbędne. W Chrome DevTools znajduje się również latarnia morska w przeglądarce, co jest bardzo ważne. Search Console ma świetne narzędzie do monitorowania wrażeń użytkowników strony do monitorowania rzeczywistych wskaźników użytkowników w ciągu ostatnich 28 dni, co ma kluczowe znaczenie przy długotrwałym monitorowaniu.

SANJUCTA GHOSE: Tak. Więc powiedziałbym, że Page Speed ​​Insights to bardzo dobre narzędzie, ponieważ dostarcza zarówno danych w czasie rzeczywistym w tym sensie, że same podstawowe wskaźniki internetowe są oparte na rzeczywistych danych użytkowników z ostatnich 28 dni. Ale wtedy możesz również zobaczyć swój raport Lighthouse, który jest oparty na danych laboratoryjnych. I to właśnie możesz natychmiast poprawić, ponieważ potrzeba trochę czasu, zanim zobaczysz poprawę podstawowych wskaźników internetowych, ponieważ jest ona mierzona w czasie.

Więc jeśli próbujesz poprawić swoje wyniki, myślę, że Lighthouse jest świetnym narzędziem, ponieważ zapewnia ci – mówi ci, jakie masz możliwości poprawy. Możesz więc od razu spróbować wdrożyć te możliwości i zobaczyć, jak poprawi to Twój wynik.

ALEX ZUNIGA: Super. Brzmi jak wielkie okrzyki dla Lighthouse. Doskonały. Doskonały.

MIKE CRANTEA: Chciałbym dodać w tym temacie, że śledzenie rzeczywistych danych o wydajności użytkowników było lepsze, aby móc szybciej reagować na spadki wydajności, które osiągnęły poziom produkcji. Testy laboratoryjne pomagają, gdy jesteś w fazie inscenizacji. Powiedzmy, że istnieje degradacja, której nie chcemy propagować. Ale zawsze wydarzy się coś w produkcji, co może być niespodzianką. Zamiast czekać kilka tygodni na pojawienie się Search Console i rzeczywistych danych użytkowników w bazie danych crux, śledząc je samodzielnie za pomocą biblioteki Web Vitals, możesz wyprzedzić konkurencję.

ALEX ZUNIGA: Super. Tak. Zawsze muszę wyprzedzać te niespodzianki produkcyjne, które czasem się pojawiają. W porządku. Cóż, dzięki za odpowiedź na te dotyczące pomiaru. Patrząc teraz na zarządzanie, jaka jest jedna lub dwie rzeczy, które możesz zrobić, aby mieć największy wpływ na Core Web Vitals?

MATT CHASE: Wydaje mi się, że jedną rzeczą, która rzuca mi się w oczy, jest leniwy ładunek, jak wszystko, co możliwe. I odkładaj ładowanie wszystkiego, co możesz. Dla mnie jest to rodzaj rozwiązania „pod klucz”, które można po prostu zrobić i zobaczyć natychmiastową poprawę. WP Rocket ma kilka naprawdę bardzo łatwych pól wyboru, które możesz włączyć, aby włączyć tego rodzaju rzeczy.

MARK DAVOLI: Tak. A dla mnie głównym celem jest to, co nazywamy renderowaniem powyżej fałdy. Więc upewnij się, że renderuje się tak szybko, jak to możliwe. I jak wcześniej wspomniano, odraczanie i leniwe ładowanie wszystkiego, co jest poza ekranem, aby upewnić się, że uzyskasz najlepszy możliwy wynik. Biorąc to pod uwagę, WP Rocket jest doskonały ze względu na funkcję skryptów opóźniających. Ale mamy tendencję do - tak jak ja staram się ograniczać to do GTM, skryptów reklam Google i tym podobnych. I naprawdę skup się na ulepszeniu rzeczywistej podstawowej architektury motywu, który napędza witrynę, aby upewnić się, że jest zoptymalizowana w jak największym stopniu. Więc nie polegasz na wtyczce innej firmy, aby mieć taki wpływ na wydajność.

MATT CHASE: Och, absolutnie. Tak. Oba zakończenia.

ALEX ZUNIGA: Rozumiem. Gotcha. I żeby wyjaśnić, powiedziałeś WP Rocket. I to jest funkcja skryptów opóźniających?

MARK DAVOLI: Tak.

ALEX ZUNIGA: Super.

MIKE CRANTEA: Jedną z rzeczy, na które nie zwraca się wystarczającej uwagi, jest buforowanie. Ale szybki czas odpowiedzi serwera nie gwarantuje szybkiego działania. Ale jeśli Twój serwer odpowiada wolno, gwarantujesz powolne działanie. Wykorzystanie wszystkich dostępnych warstw pamięci podręcznej — pamięci podręcznej przeglądarki, pamięci podręcznej obiektów, pamięci podręcznej stron — oraz włączenie ich i zapewnienie funkcjonalności to dobry pierwszy krok. Wykonaj podstawowe czynności. A potem możesz pracować nad optymalizacją frontendu. Sprawdzanie, co masz w głowie. I tak dalej i tak dalej.

ALEX ZUNIGA: Doskonale

SANJUCTA GHOSE: Tak. I myślę, że nie powinniśmy również zapominać o optymalizacji naszych obrazów. Myślę, że jest to bardzo ważne, ponieważ wiele stron internetowych jest obecnie obciążonych obrazami. Myślę więc, że ważne jest, aby skompresować swoje obrazy, udostępnić je przez CDN, a następnie, jak już wspomniałeś, leniwie załadować swoje obrazy. Co ważniejsze, wyświetlaj responsywne obrazy. Możesz więc użyć atrybutu zestawu źródłowego tagu obrazu lub tagu obrazu, aby wyświetlać responsywne obrazy. Zauważyłem, że to naprawdę prowadzi do znacznej poprawy, ponieważ Core Web Vitals są pierwszymi pomiarami mobilnymi. Dlatego bardzo ważne jest, aby wyświetlać responsywne obrazy. To coś, o czym czasami zapominamy.

Myślę więc o obrazach. A także kilka bardzo prostych rzeczy, takich jak minimalizowanie kodu JavaScript w CSS podczas etapów kompilacji. Myślę, że to też bardzo pomaga. To całkiem proste.

MATT CHASE: Tak. Jeśli chodzi o ten temat, właściwie odkąd o tym wspomniałeś, WordPress dystrybuuje coś w rodzaju spakowanego systemu kompilacji pakietów internetowych. Nazywają to po prostu w WordPress Scripts. A nasza agencja długo zmagała się z utrzymaniem własnego systemu webpack. A potem mniej więcej co osiem miesięcy niektóre zależności od węzłów zmieniały się i psuły cały nasz łańcuch narzędzi. Ale WordPress w pewnym sensie utrzymuje to dla nas. I to była ogromna korzyść.

I w tym pakiecie internetowym zaczęliśmy używać dynamicznego importu do budowania naszego głównego pakietu JavaScript. Tak więc w pewnym sensie importujemy zależności naszych węzłów w czasie wykonywania, zamiast łączyć to wszystko w jeden główny pakiet JavaScript, co w pewnym sensie pozwoliło nam naprawdę precyzyjnie dostroić kontrolę nad tym samym rodzajem odroczonego ładowania skryptu. Tylko w konkretnych przypadkach. Jak wtedy, gdy nasz blok jest na stronie.

MARK DAVOLI: Tak. Uważam również, że bardzo ważne jest, aby upewnić się, że jesteś bardzo selektywny w stosunku do wtyczek, których używasz w swojej witrynie. Instalując wtyczki innych firm, możesz uzyskać wiele nieoczekiwanych nadużyć. Spróbuj więc ograniczyć je do bardzo renomowanych, dobrze zbudowanych wtyczek. I zwróć uwagę na to, co ładują te wtyczki. To naprawdę może pomóc w kontrolowaniu wydajności witryny. I niestety WordPress nadal w dużej mierze opiera się na jQuery do użytku zaplecza i tak dalej. Ale tak naprawdę nie jest to konieczne dla frontendu. Więc jeśli to możliwe, porzucenie obsługi jQuery z frontendu witryny i trzymanie się natywnego JavaScript może naprawdę pomóc w wydajności.

ALEX ZUNIGA: Super. Myślę, że już zaczynamy zagłębiać się w ten obszar. A wymieniłeś kilka. Ale wykorzystajmy trochę więcej do tego z oprzyrządowaniem. Jakie są preferowane narzędzia, których lubisz używać do optymalizacji Core Web Vital? I do jakich przypadków użycia są najlepsze? A może istnieją scenariusze, w których nie pasują?

MATT CHASE: To znaczy, pojawiło się to wcześniej. Ale naprawdę lubię narzędzie Lighthouse w przeglądarce, ponieważ daje natychmiastowe rezultaty. Prawidłowy. Core Web Vitals jest świetny, ale jego siła polega na tym, że jest to zbiór, który jest tworzony w czasie. Nie możesz więc naprawdę czegoś zmienić i zobaczyć, jak zmienia się liczba. W porównaniu do Lighthouse, w przeglądarce dokonujesz aktualizacji. Widzisz lokalne środowisko deweloperskie i uruchamiasz test Lighthouse. I od razu widać, och, moja wydajność podskoczyła o 15 punktów. Fajny. To była właściwa rzecz. Popchnij to do produkcji.

ALEX ZUNIGA: Super. Jakieś inne narzędzia, których lubisz używać?

MIKE CRANTEA: Chciałbym gorąco pochwalić funkcję lokalnych zastępstw w Chrome. To w połączeniu z zakładką Wydajność daje chirurgiczną możliwość zabawy ze zmianą nawet kolejności ładowania elementów na Twojej stronie. I jak duży lub mały ma to wpływ. Daje ci niezbędny nadzór, dzięki któremu wiesz, czy włożenie wysiłku w wprowadzenie określonej zmiany jest tego warte, czy po prostu wolisz to zostawić i skupić się na innych rzeczach, które naprawdę mają wpływ.

MARK DAVOLI: Myślę, że jedną z najważniejszych rzeczy jest monitorowanie architektury serwera. Prawidłowy. Możesz więc mieć największe Core Web Vitals na świecie, ale jeśli twój serwer jest niezwykle obciążony i nie jesteś tego świadomy, możesz nagle zauważyć, że twoja pierwsza zawartość treści drastycznie spada, co następnie wpływa na prawie wszystko inne. Więc uważnie obserwuj narzędzia takie jak New Relic lub cokolwiek innego, aby tylko monitorować wydajność. Uważne obserwowanie, aby upewnić się, że masz odpowiednią infrastrukturę do renderowania witryny tak szybko, jak to możliwe, ma kluczowe znaczenie.

MIKE CRANTEA: W tym przypadku pomocne jest włączenie i przygotowanie buforowania.

MARK DAVOLI: I CDN.

MIKE CRANTEA: Tak. Unikaj potencjalnych katastrof.

ALEX ZUNIGA: Doskonale. Cóż, doceniam tę jasność. Więc jedno z pytań. Istnieje wiele wtyczek optymalizacyjnych do optymalizacji Core Web Vitals. Jakie są ograniczenia wtyczek WordPress, które mogą w tym pomóc? A może naprawdę optymalizują witrynę? A może po prostu oszukują pomiary Google? I myślę, że może to kwestia tego, czy lepiej – wspomnieliśmy, czy lepiej jest używać wtyczek lub wykonywać pracę zamiast polegać na wtyczce?

SANJUCTA GHOSE: Myślę więc, że wtyczki są świetne. Na przykład WP Rocket jest świetny. Często używamy Optymalizatora obrazu EWWW. I myślę, że to też jest świetne. Ale wydaje mi się, że to już zostało powiedziane. WP Rocket, musisz go używać ostrożnie, ponieważ jeśli włączysz funkcję odroczenia JavaScript, widziałem przypadki, w których wprowadza dziwne błędy. Jednorazowe błędy. Wolałbym więc czasami może rzucić własne rozwiązanie, zamiast korzystać z wtyczki. Pod warunkiem, że masz doświadczenie w programowaniu.

Tak więc większość optymalizacji, które przeprowadziliśmy dla stron Delicious Brain, wprowadziliśmy samodzielnie, a nie korzystaliśmy z wtyczek. Ale to powiedziawszy, myślę, że wtyczki są świetnym punktem wyjścia. Więc kiedy dopiero zaczynasz, możesz na przykład zaimplementować wdrożenie WP Rocket na swojej stronie testowej i poeksperymentować i zobaczyć, czy to zepsuje, czy nie. Lub jeśli przyniesie rzeczywistą poprawę. Myślę więc, że wtyczek należy używać ostrożnie. I musisz wiedzieć, co dzieje się w tle, co robią wtyczki. I jak może to wpłynąć na Twoją witrynę.

MATT CHASE: Tak. Na szczęście WP Rocket, jak sądzę, w nowszych wersjach był przynajmniej dobry w bardzo wyraźnym oznaczaniu niebezpiecznych przełączników, które mają. Ponieważ wiele razy byłem spalony przez to, że opóźnione skrypty - a nawet te, których nie spodziewałbyś się, jak optymalizacja CSS, w jakiś sposób popsuły modele, w których nie uzyskało rzeczy, która mówiła, że ​​​​nazwa klasy sprawi, że będą widoczne . To był ekscytujący dzień.

Ale tak. WP Rocket jest zdecydowanie moim celem innym niż oczywiście dobry kod, dobry kod. Prawidłowy. Wykonywanie pracy jest zawsze najlepszym sposobem podejścia do niej. Wtyczki mogą automatyzować rzeczy. Ale nic nie zastąpi tego, aby twój kod był szczupły i złośliwy.

MIKE CRANTEA: Jest jeszcze jedna wtyczka, która jest oznaczona jako wtyczka typu laboratoryjnego. To Laboratorium Wydajności. Robi to zespół WordPress Performance Core. I choć brzmi to przerażająco, we wszystkich moich dotychczasowych testach zapewniało pełną stabilność. I to było bardzo imponujące, jak na to, co miało być, i jakość pracy, która zakończyła się tą wtyczką Performance Lab. Warto więc go wypróbować. Kilka pól wyboru. A wszystko, co tam jest, jest bezpieczne. Cóż, nie jestem pewien co do zmiany bazy danych. To jest coś bardziej kontrowersyjnego, kiedy o tym czytam. Tak. Tylko nie dotykaj tego przycisku. Jakby dodali obsługę SQLite lub coś takiego w wtyczce, co zdecydowanie działa w przypadku niektórych mniejszych witryn.

ALEX ZUNIGA: Ciekawe.

MARK DAVOLI: Tak. A dla mnie WP Rocket jest fantastyczny. Ograniczamy jego użycie w większości naszych witryn, ponieważ większość tego, co robimy, jest zbudowana natywnie. Ale w Core WordPress jest wiele innych funkcji, które, jeśli są właściwie używane, naprawdę mogą zapewnić dobrze zoptymalizowaną witrynę. Podobnie jak korzystanie z Edytora bloków zamiast stron trzecich, takich jak Elementor lub et cetera, może dodać wiele wzdęć do witryny. Więc jeśli budujesz wokół jak nowy natywny system bloków typu Gutenberg i naprawdę ładujesz pliki w razie potrzeby, zamiast na przykład ładować wszystko na raz na każdej stronie. WordPress ma teraz wbudowane funkcje leniwego ładowania. Więc monitorowanie, w jaki sposób jest używany i używanie go odpowiednio, i tak dalej. A następnie dodanie narzędzia takiego jak WP Rocket, aby ulepszyć to, co już tam jest. Ale nie polegając wyłącznie na nim.

Może to być korzystne, jeśli chcesz się tam dostać, zwłaszcza jeśli masz witrynę, która nie działa dobrze. Ale jak wspomniano, podobnie jak krytyczne generowanie CSS, te rzeczy mogą mieć wiele problemów, ponieważ przyjmują wiele założeń na podstawie tego, co ich bot widzi na Twojej stronie. Ale nie może przewidzieć rzeczy, które nie będą renderować początkowych widoków. Więc jeśli masz modele, jak wspomniano, te wyskakują, nie będzie wiedział, że jest taka możliwość. Nie wygeneruje dla niego CSS i nie wstawi go poprawnie. Na przykład robienie takich rzeczy, jak wstępne ładowanie kluczowych czcionek lub renderowanie ich w części widocznej na ekranie. Ponownie, to jest klucz. Naprawdę najważniejsza rzecz.

SANJUCTA GHOSE: Jeśli chodzi o krytyczne CSS, chciałem tylko wskoczyć i wspomnieć, że Addy Osmani ma to niesamowite narzędzie o nazwie Critical. Możesz dodać to do procesu kompilacji, aby wygenerować krytyczny CSS. To jest zajebiste. I jest bardzo niezawodny. Więc skoro wspomniałeś o krytycznym CSS, pomyślałem, że to dodam. Przepraszam, że cię przerwałem.

MIKE CRANTEA: W porządku. W tym samym temacie krytycznego CSS zespół Jetpack podjął pewne wysiłki, aby zrobić coś z wtyczką Jetpack Boost. To bardzo, bardzo interesujący sposób generowania krytycznego kodu CSS poprzez renderowanie stron w elementach iframe lub czymś podobnym. Które zapewniają, gdy działa, jest to świetne rozwiązanie. Kiedy tak nie jest, mówi ci, hej, to nie działa tutaj. Po prostu ruszaj się. Potrzebujesz czegoś innego. Dotarcie do krytycznego kodu CSS nie zawsze jest łatwe. Z drugiej strony, 4 lub 5 lat temu krytyczne CSS były bardzo duże. Bardzo pomogło.

W ciągu ostatnich dwóch lub trzech lat, wraz z postępem HTTP/3, posiadanie jednego krytycznego kodu CSS, który renderuje blokowanie, ma bardzo mały wpływ na posiadanie 100 kilobajtów lub coś w tym stylu wbudowanego CSS. Sprawia, że ​​witryna działa tak szybko, jak witryna, która cztery lub pięć lat temu miała krytyczny CSS. Więc nie bój się mieć przyzwoitego rozmiaru CSS w swojej witrynie. Nie musisz się go pozbywać. I widziałem strony internetowe, które były super zoptymalizowane.

W krytycznym CSS mamy około 100 kilobajtów wbudowanego CSS. I blokowanie renderowania, jQuery i dwa inne skrypty, które nie były używane. To jest jak, tak. Tym mijasz się z celem. Może nam pomóc ostatnie 5% typu podejścia. Ale jeśli zaczniesz od tego, spójrz na pierwszy.

ALEX ZUNIGA: Super. Wspaniały. Myślę, że wszystkie te narzędzia. Wspaniale jest słyszeć te okrzyki. Wspaniale jest słyszeć te sugestie i zalecenia. I wiele tego rodzaju wirów wokół naszego następnego pytania. Jakie są unikalne aspekty pracy na WordPress, szczególnie z Core Web Vitals? Czy chodzi o to, że musisz to robić za pomocą wtyczek, a nie robić tego z jakimkolwiek innym stosem technologii? Czy z WordPressem jest łatwiej? Czy dostępnych jest więcej narzędzi? Jak już wspomnieliśmy, wszyscy po prostu wystrzeliliście wiele narzędzi. Czy z WordPressem jest łatwiej? Czy z WordPressem jest trudniej? Co bierzesz?

MATT CHASE: Myślę, że z WordPressem jest to bardzo łatwe. Porozmawialiśmy więc trochę o – lub wspomniałem o pakiecie węzła skryptów WordPress, który rozprowadzają, który jest po prostu świetnym rodzajem systemu budowania pakietu internetowego w pudełku. Mają też blok WordPress Create, który jest naprawdę szybkim i łatwym sposobem na załadowanie niestandardowego bloku dla witryny opartej na WordPress. Ale jest zbudowany w taki sposób, że wiele kodu kleju, że tak powiem, jest napisane dla ciebie. Więc to już jest sprytne… Mark, wspomniałeś tylko o tych skryptach, kiedy powinieneś. Więc wiesz, czy twój blok robi to zaraz po wyjściu z bramy. Nie musisz nawet o tym myśleć. Więc WordPress sprawia, że ​​tego rodzaju rzeczy są naprawdę łatwe.

MARK DAVOLI: Tak, absolutnie. I jest to oprogramowanie typu open source. Prawidłowy? Można więc zmienić praktycznie wszystko. Z tego powodu znacznie trudniej jest pracować z zamkniętym systemem, aby zoptymalizować Core Web Vitals w porównaniu z WordPress. A kiedy po raz pierwszy ogłoszono Core Web Vitals, jeszcze ich nie było. To było o wiele trudniejsze. Naprawdę przeszli długą drogę, dodając wiele z tych funkcji, szczególnie w przypadku edytora bloków i budowania opartego na blokach itp., Aby naprawdę zoptymalizować tę możliwość selektywnego ładowania zasobów, plików CSS, plików czcionek i tak dalej. Więc tak. To było świetne.

ALEX ZUNIGA: To prawdopodobnie połączenie systemu zamkniętego z otwartym oprogramowaniem. Śmiało, Sanjucta.

SANJUCTA GHOSE: Tak. Tak. I myślę, że dlatego, że jest wielu dostawców usług hostingowych poświęconych WordPressowi. I tak jak powiedziałeś. WordPress jest open source. Istnieje więc wiele optymalizacji związanych z hostingiem witryn WordPress. Myślę więc, że jest tam już dużo wsparcia, jeśli budujesz na WordPressie, co oznacza, że ​​nie musisz wymyślać koła na nowo. Myślę więc, że zdecydowanie łatwiej jest budować na WordPressie, aby zoptymalizować swoje podstawowe wskaźniki internetowe.

ALEX ZUNIGA: Piękne. Rozmawialiśmy więc o tym, jak mierzymy te narzędzia, czego używamy, aby faktycznie ulepszyć nasze podstawowe wskaźniki internetowe, niektóre z narzędzi. Teraz, kiedy mówimy o oczekiwaniach klientów, na jakim etapie nowego projektu zaczynasz rozważać Core Web Vitals jako część swojej kompilacji lub strategii? Czy to prawda, kiedy zaczynasz od swojego podstawowego szablonu? A może jest to coś, co optymalizujesz nieco dalej w historii? Co wy wszyscy robicie?

MATT CHASE: Tak. Myślę, że dla mnie jest to bardziej sposób budowania rzeczy na początek niż coś, co robisz na niezoptymalizowanej stronie internetowej. To od samego początku. I jest tam w każdym wierszu kodu, który piszesz idealnie. Staram się tego nie robić – nie chcę tworzyć dużej, zoptymalizowanej witryny, a potem wrócić później i ją naprawić. Chcę spróbować pisać tak czysto, jak tylko potrafię, od samego początku. A potem zwykle stwierdzam, że robienie tego w ten sposób, wyciskanie tej ostatniej odrobiny soku optymalizacyjnego na końcu jest trochę łatwiejsze.

MARK DAVOLI: Tak. On ma całkowitą rację. Budowę zaczynamy od samego początku. Chodzi mi o to, że są elementy, które nie zdarzają się bliżej końca. Nie zamierzamy przeprowadzać optymalizacji obrazów przed premierą. Ale tak naprawdę nie musisz tego robić nawet w samej kompilacji, ale czasami nawet w procesie projektowania ważne jest, aby pomyśleć o tym, jak witryna jest projektowana, jeśli bierzesz pod uwagę podstawowe wskaźniki sieciowe. Ponieważ z architektonicznego punktu widzenia wdrożenie niektórych projektów jest trudniejsze w porównaniu z innymi. Dlatego zrozumienie tego i edukowanie projektantów w zakresie tego, co może potencjalnie utrudnić wdrożenie, jest bardzo pomocne.

MIKE CRANTEA: I dyktowanie granic. Hej, możesz mieć maksymalnie x telefonów. Nie powinieneś przynosić 25 do stołu ze wszystkimi ich odmianami. To pomaga od fazy projektowania. Poza tym bez pewnych punktów kontaktowych, które mają miejsce w czasie trwania projektu, czasami łatwo jest przejść przez niektóre rzeczy. Jak sprint siedem próśb o dodanie wtyczki quizu do miksu. Jeśli to nie zostanie zaznaczone, znajdziesz to trochę na końcu. Więc moje zalecenia to przetwarzanie co kilka sprintów. Sprawdzamy nasze zautomatyzowane pomiary inscenizacji ewolucji. Co się stało z ostatnimi rzeczami, które zostały zepchnięte do realizacji Czy sprawy zwolniły? Czy musimy podejmować jakieś działania naprawcze z wyprzedzeniem, zamiast reagować pod koniec projektu?

SANJUCTA GHOSE: Tak. Zgadzam się. Bardzo ważne jest, aby zacząć od fazy projektowania, ponieważ lubimy proste rzeczy, takie jak wyskakujące okienko, baner reklamowy lub coś w tym stylu. Czasami robi to ogromną różnicę, być może dla Twojego łącznego wyniku układu. Dlatego dobrze jest wiedzieć z góry, co się wydarzy. Niezależnie od tego, czy pojawi się wyskakujące okienko, czy baner. Nie chcesz też niespodzianek pod koniec projektu. Dlatego uważam, że bardzo ważne jest zaangażowanie klienta lub interesariuszy już na etapie projektowania i poinformowanie ich, że może to mieć wpływ na podstawowe wskaźniki sieciowe, aby mogli podjąć świadomą decyzję.

MARK DAVOLI: Jest to bardzo pomocne także po uruchomieniu, ponieważ gdy tylko Twoja witryna zostanie uruchomiona, czasami może się okazać, że włączymy widżet czatu lub coś w tym rodzaju później. I nagle następuje załamanie. Następnie musisz pomyśleć o tym, jak to zintegrować i zoptymalizować. Tak więc funkcja skryptów opóźniających może wypchnąć większość pikseli reklamowych, które są notorycznie szkodliwe dla zabijania wyniku Core Web Vitals. Ale czasami nie możesz czegoś opóźnić, ponieważ jest to trochę ważne dla tego, czego naprawdę chce klient. Zrównoważyć to najlepiej, jak potrafisz, i upewnić się, że komunikujesz potencjalne skutki. A efektem końcowym jest zdobycie go tak szybko, jak to możliwe. Czasami trzeba poświęcić funkcjonalność. Czasami nie. Ale zdobądź to tak szybko, jak to możliwe, aby zwiększyć te konwersje.

ALEX ZUNIGA: Doskonale. Doskonały. Słyszę więc, że lepsze składniki sprawiają, że strony internetowe są lepsze od samego początku. Nie chodzi o to, że na samym końcu zamierzamy wrzucić kilka podstawowych wskaźników internetowych. To coś, co naprawdę jest sposobem na życie, jeśli najpierw chcesz o tym pomyśleć w ten sposób. Cóż, niesamowite. Więc tylko nasze ostatnie pytanie. Czy kiedykolwiek miałeś problemy z przekazaniem klientom wartości czasu, który poświęcasz na pracę nad Core Web Vitals? Czy to jest coś, na co oni kiedykolwiek naciskają? Czy oni kiedykolwiek nie rozumieją, dlaczego wykonujesz tę pracę?

MATT CHASE: Nie wydaje mi się, żebym kiedykolwiek spotkał się z jakąkolwiek odmową. Jeśli już, to raczej na odwrót. Zwykle to my chcemy występu. Chcemy Core Web Vitals. Dokonajmy tego. Powiem, że nie zawsze się nad tym zastanawiamy – rozmawialiśmy o śledzących pikselach i o tym, jak słyną z obniżania tego wyniku. Ale nikogo to nie obchodzi. Jesteśmy jak piksele, piksele, piksele, piksele. Dlatego ludzie muszą pomyśleć o faktycznym rozważeniu korzyści kosztowych podczas dodawania śledzenia, ponieważ nie jest to tak proste, jak po prostu wrzucić i uzyskać wyniki. Bo jest koszt.

ALEX ZUNIGA: Super.

MIKE CRANTEA: Myślę, że przy występach brakuje cierpliwości. Więc jeśli myślisz, och, zróbmy trochę pracy nad wydajnością, która potrwa kilka sprintów, po pierwszym. Kiedy to widzę? Kiedy to widzę? Planowanie wydawania go iteracyjnie, na przykład zwiększanie jednej funkcji, jednej funkcji, jednej funkcji, zwiększa pewność wpływu, jaki wywiera ta praca. A im bardziej widać, że przekłada się to na konwersje i zmiany, tym szybciej dostrzegana jest wartość bez konieczności poświęcania dużej ilości czasu na pracę edukacyjną.

MARK DAVOLI: Tak. Myślę, że jedną rzeczą, która może być trudna do zrozumienia dla klientów, jest różnica między rzeczywistymi wskaźnikami użytkowników a danymi laboratoryjnymi. Ponieważ wielu z nich może przeprowadzać własne testy i tak dalej. I nie do końca rozumieją. Pomagając im zrozumieć, że część podsumowująca pochodzenie strony, będąca wglądem, jest tak naprawdę tą, której Google używa do efektów, takich jak ranking SEO i tym podobne. Ponieważ wielu z nich szuka tego wyniku i optymalizuje go. A pomagając im zrozumieć, potrzeba 28 dni na zmierzenie wszelkich zmian wprowadzonych w produkcji, zanim uzyskasz pełną gamę tego, w jaki sposób zmiana wpłynęła na rzeczy.

ALEX ZUNIGA: To świetne wezwanie. Świetne wezwanie.

MIKE CRANTEA: I powinienem wymienić jeden z najbardziej zagmatwanych wskaźników. Metryki interaktywności. Te były notorycznie niestabilne. A dla niektórych osób, które bardziej boją się jakichkolwiek różnic w wyniku, czy ta nowa funkcja, którą stworzyliśmy, znacznie spowolniła witrynę? A potem znowu przechodzi test i jest jak wzrost o 10 punktów, a następnie spadek o 10 punktów. Wyjaśnienie tej zmienności jest bardzo czasochłonne. Dlaczego nie jest to tylko jedna liczba, która jest spójna? Cóż, to coś tak trudnego, jak nazywanie rzeczy i buforowanie.

ALEX ZUNIGA: Cóż, wspaniale. Wygląda na to, że naprawdę doceniamy wasz wkład, wszystkie wasze opinie na temat Core Web Vitals. Jak je wykorzystać, czym je mierzyć, jak określić oczekiwania klienta w tym wszystkim. To była naprawdę pouczająca lekcja. Mamy nadzieję, że nasi paneliści dobrze się tutaj bawili. Zdecydowanie cieszymy się, słysząc wszystkie wasze opinie. Mamy nadzieję, że uczestnicy tutaj również otrzymali świetne opinie.

Tak więc wszystkim bardzo dziękuję za poświęcony czas. Cóż, to był nasz panel. Naprawdę chcemy bardzo podziękować wszystkim naszym panelistom. Chcielibyśmy podziękować za udział w tym panelu. Mamy nadzieję, że będziesz się dobrze bawić oglądając resztę naszych sesji DE{CODE}.