
Studia przypadków
ruby-align jest ustawiony na Baseline (Nowo dostępne).
ruby-align jest teraz częścią Baseline
Pobieranie modeli AI za pomocą interfejsu Background Fetch API
Data publikacji: 20 lutego 2025 r. Pobieranie dużych modeli AI w sposób niezawodny jest trudnym zadaniem. Jeśli użytkownicy stracą połączenie z internetem lub zamkną Twoją witrynę lub aplikację internetową, utracą częściowo pobrane pliki modeli i po
Pobieraj zasoby z wyprzedzeniem, aby przyspieszyć przyszłą nawigację
Więcej informacji na temat atrybutu rel=prefetch i sposobu korzystania z niego.
Debuguj przesunięcia układu
Dowiedz się, jak identyfikować i rozwiązywać przesunięcia układu.
Optymalizuj skumulowane przesunięcie układu
Skumulowane przesunięcie układu (CLS) to dane, które określają, jak często użytkownicy zauważają nagłe zmiany treści strony. W tym przewodniku omówimy optymalizację typowych przyczyn CLS, takich jak obrazy i elementy iframe bez wymiarów lub zawartości dynamicznej.
Dostępne są nowe wartości domyślne dla atrybutów CSS scrollbar-color i scrollbar-gutter
Atrybuty CSS scrollbar-color i scrollbar-gutter są dostępne we wszystkich głównych silnikach przeglądarek, co oznacza, że są one dostępne w wersji podstawowej.
Miesięcznik z podsumowaniem danych z stycznia 2025 r.
W pierwszym wydaniu miesięcznego podsumowania Baseline znajdziesz informacje o działalności Baseline w Google i społeczności web developerów w styczniu 2025 r.
Optymalizacja wywołań ogonowych WasmGC i Wasm jest teraz dostępna w wersji podstawowej
Zbiórnik odzyskiwania pamięci w WebAssembly i optymalizacje wywołań końcowych w Wasm są teraz dostępne we wszystkich głównych silnikach przeglądarek, co czyni je elementem domyślnym.
Największe wyrenderowanie treści (LCP)
W tym poście przedstawiamy dane największego wyrenderowania treści (LCP) i wyjaśniamy, jak je mierzyć
Platforma Promise.try jest teraz dostępna jako Baseline
Obietnice.test jest teraz dostępne we wszystkich głównych silnikach przeglądarek, co oznacza, że jest to nowa wersja domyślna.
tworzyć chatboty działające lokalnie i offline;
Data publikacji: 13 stycznia 2024 r. Z pomocą AI, klasycznych modeli systemów uczących się i nowych dużych modeli językowych (LLM) można tworzyć wiele niesamowitych projektów. Dzięki LLM komputery mogą generować nowe treści, pisać podsumowania,
Optymalizuj długie zadania
Poinformowano Cię, że „nie blokujesz wątku głównego” ani nie chcesz dzielić długich zadań do wykonania. Ale co to oznacza?
Stosowanie efektów do obrazów za pomocą właściwości mask-image w CSS
Maskowanie CSS umożliwia użycie obrazu jako warstwy maski. Oznacza to, że jako maski możesz użyć obrazu, SVG lub gradientu, aby tworzyć ciekawe efekty bez użycia edytora obrazów.
Punkt odniesienia 2024: więcej narzędzi dla programistów
zbiór danych web-features, panel stanu platformy internetowej, widżet stanu domyślnego i wiele innych funkcji. Sprawdź punkt odniesienia z 2024 roku.
Leniwe ładowanie filmu
W tym poście wyjaśniamy, czym jest leniwy ładowanie i jakie opcje masz do dyspozycji, aby stosować tę metodę w przypadku filmów.
Wstępnie wczytuj moduły
Wstępne wczytywanie modułów umożliwia deklaratywne ładowanie modułów JavaScript z wyprzedzeniem.
Pomiar autouzupełniania w formularzach przez przeglądarkę
Aby zoptymalizować wrażenia użytkowników, musisz wiedzieć, jak użytkownicy korzystają z formularzy. Autouzupełnianie w przeglądarce odgrywa w tym procesie ważną rolę. Dowiedz się, jak zbierać i analizować dane o tym, jak użytkownicy korzystają z autouzupełniania w formularzach.
Część 2. Tworzenie systemu wykrywania toksycznych treści na podstawie AI po stronie klienta
Wykrywanie toksycznych treści chroni użytkowników i tworzy bezpieczniejsze środowisko online. W drugiej części dowiesz się, jak tworzyć narzędzia AI po stronie klienta, które wykrywają toksyczność i zmniejszają jej występowanie u źródła.
Całkowity czas blokowania (TBT)
W tym poście opisujemy wskaźnik łącznego czasu blokowania (TBT) i wyjaśniamy, jak go mierzyć
Web Vitals
Dane niezbędne do prawidłowego funkcjonowania witryny
Najskuteczniejsze sposoby na poprawę podstawowych wskaźników internetowych
zbiór sprawdzonych metod, które Chrome określił jako największe szanse na optymalizację działania witryny i poprawę podstawowych wskaźników internetowych.
Optymalizacja największego wyrenderowania treści
Szczegółowy przewodnik wyjaśniający, jak rozkładać LCP i określać obszary, które wymagają poprawy.
Wprowadzenie do pomiaru wskaźników Web Vitals
Dowiedz się, jak mierzyć wskaźniki internetowe witryny zarówno w warunkach rzeczywistych, jak i w laboratorium.
Właściwość CSS content-visibility jest teraz dostępna w wersji podstawowej.
Właściwość CSS Content-visibility jest teraz dostępna jako podstawowa.
Sposób określania progów dla podstawowych wskaźników internetowych
Badania i metodologia związane z progami dotyczącymi podstawowych wskaźników internetowych
Podstawowe wskaźniki internetowe w przypadku narzędzi Google
Rosnące znaczenie podstawowych wskaźników internetowych oznacza, że właściciele witryn i deweloperzy mogą coraz bardziej skupić się na wydajności i wygodzie użytkowników. Google udostępnia wiele narzędzi ułatwiających ocenę, optymalizację i monitorowanie stron, ale użytkownicy często nie mają pewności, jak wykorzystać różne źródła danych i jak skutecznie z nich korzystać. W tym przewodniku znajdziesz opis przepływu pracy łączącego różne narzędzia, a także wyjaśnienie, gdzie i w jaki sposób mogą być przydatne w procesie programowania.
Ręczne diagnozowanie powolnych interakcji w module
Sprawdziliśmy dane z pola i okazało się, że interakcje są trochę wolne. W następnym kroku dowiesz się, jak ręcznie testować te interakcje, i poznać przyczyny tych interakcji.
Punkt odniesienia
Z tego artykułu dowiesz się, jak powstał Baseline, jaką rolę odegrał w tym Google i kto jest właścicielem grupy społeczności WebDX.
Pamięć podręczna stanu strony internetowej
Dowiedz się, jak zoptymalizować strony pod kątem błyskawicznego wczytywania za pomocą przycisków Wstecz i Dalej w przeglądarce.
Umieszczanie w nawiasach elementów CSS uległo poprawie dzięki elementom CSSNestedDeclarations.
Zagnieżdżanie CSS staje się znacznie lepsze.
First Input Delay (FID)
W tym poście omawiamy dane o opóźnieniu przy pierwszym działaniu (FID) i wyjaśniamy, jak je mierzyć
Debuguj wydajność w terenie
Dowiedz się, jak przypisywać dane o skuteczności do informacji o debugowaniu, aby łatwiej identyfikować i rozwiązywać problemy związane z analizą
Korelowanie podstawowych wskaźników internetowych i przychodów z reklam z narzędziami Google
Dowiedz się, jak za pomocą narzędzi Google powiązać podstawowe wskaźniki internetowe z przychodami z reklam.
Porównywanie skuteczności właściwości @property w usłudze porównywania cen
Jaki wpływ na skuteczność usługi porównywania cen ma parametr @property?
Czas na leniwe ładowanie elementów iframe poza ekranem.
W tym poście omawiamy atrybut wczytywania oraz sposób jego używania do sterowania ładowaniem elementów iframe.
Miejsce na dane w internecie
Istnieje wiele różnych opcji przechowywania danych w przeglądarce. Która opcja najbardziej Ci odpowiada?
Protokół Web Push Protocol
Interaktywny samouczek krok po kroku, który pokazuje, jak utworzyć serwer, który zarządza subskrypcjami powiadomień push i wysyła żądania internetowych protokołów push do usługi push.
Tworzenie wielu progresywnych aplikacji internetowych w tej samej domenie
Poznaj zalecane i niezalecane sposoby tworzenia wielu progresywnych aplikacji internetowych z wadami i zaletami tej samej domeny.
Co wyróżnia progresywną aplikację internetową?
Co wyróżnia dobrą lub świetną progresywną aplikację internetową?
Co jest potrzebne, aby można ją było zainstalować?
Kryteria progresywnej instalacji aplikacji internetowej.
Obsługa aktualizacji w manifeście aplikacji internetowej w Chrome
Zmiana ikon, skrótów, kolorów i innych metadanych w manifeście aplikacji internetowej PWA.
Dodaj manifest aplikacji internetowej
Manifest aplikacji internetowej to prosty plik JSON, który informuje przeglądarkę o sposobie działania aplikacji internetowej.
Ogranicz ataki typu cross-site scripting (XSS) przy użyciu rygorystycznej zasady Content Security Policy (CSP)
Dowiedz się, jak wdrożyć CSP na podstawie liczb jednorazowych skryptów lub haszów w celu zabezpieczenia przed atakami typu cross-site scripting.
Dostęp do urządzeń w internecie
Z tego artykułu dowiesz się, jak wybrać odpowiedni sprzętowy interfejs API w przypadku danego urządzenia.
Zezwalanie na ponowne użycie klucza dostępu w witrynach w ramach powiązanych próśb o źródło
Dowiedz się, jak korzystać z żądań powiązanych źródeł, aby zezwolić na ponowne użycie klucza dostępu w swoich witrynach.
Wybierz odpowiedni format obrazu
Wybór odpowiedniego formatu obrazu to pierwszy krok do wyświetlania zoptymalizowanych obrazów na Twojej stronie internetowej. Ten post pomoże Ci dokonać właściwego wyboru.
Leniwe ładowanie obrazów na poziomie przeglądarki w internecie
W tym poście omawiamy atrybut „wczytywanie” i sposób jego użycia do kontrolowania ładowania obrazów.
Wskaźniki niestandardowe
Niestandardowe dane pozwalają mierzyć i optymalizować aspekty korzystania z Twojej witryny, które są unikalne dla Twojej witryny.
Pomiar skuteczności i debugowanie za pomocą Google Analytics 4 i BigQuery
Dowiedz się, jak przesyłać dane Web Vitals do usług w Google Analytics 4 i eksportować dane do analizy w BigQuery i Looker Studio.
Sprawdzone metody dotyczące uprawnień internetowych
W tym przewodniku przedstawiamy sprawdzone metody, które powinni stosować właściciele witryn, gdy proszą ich o dostęp do poufnych funkcji (takich jak aparat, mikrofon czy lokalizacja), aby zminimalizować liczbę zbędnych promptów i blokować dostęp.
Sprawdzone metody dotyczące powiadomień o plikach cookie
Dowiedz się, jak powiadomienia o plikach cookie wpływają na skuteczność, pomiar skuteczności i UX.
Dostosuj powiadomienia o multimediach i elementy sterujące odtwarzaniem za pomocą interfejsu Media Session API
Programiści stron internetowych mogą dostosowywać powiadomienia o multimediach i reagować na zdarzenia związane z multimediami, takie jak wyszukiwanie lub śledzenie zmian za pomocą interfejsu Media Session API.
Korzystanie z indeksu tabulacji
Atrybut tabindex służy do jednoznacznego ustawienia pozycji karty elementu.
Znajdowanie powolnych interakcji w terenie
Zanim będzie można odtworzyć w laboratorium powolne interakcje w celu zoptymalizowania interakcji z witryną pod kątem kolejnego wyrenderowania, musisz znaleźć dane terenowe. Z tego przewodnika dowiesz się, jak to zrobić.
Czas do pierwszego bajtu (TTFB)
W tym poście przedstawiamy dane Czas do pierwszego bajtu (TTFB) i sposoby ich pomiaru.
Praktyczne tworzenie promptów dla mniejszych modeli LLM
Dowiedz się, jak dostosowywać prompty, aby uzyskiwać preferowane wyniki w przypadku różnych LLM, modeli i rozmiarów modeli.
Od interakcji do kolejnego wyrenderowania (INP)
W tym poście omawiamy dane dotyczące interakcji z kolejnym wyrenderowaniem (INP) oraz wyjaśniamy, jak one działają i jak je mierzyć, a także przedstawiamy sugestie dotyczące ich poprawy.
Kolory zależne od schematu kolorów CSS z funkcją light-dark()
description: zdefiniuj kolory, które reagują na używany schemat kolorów za pomocą funkcji light-dark().
Wzorce wydajności WebAssembly dla aplikacji internetowych
Z tego przewodnika dla programistów stron internetowych, którzy chcą skorzystać z technologii WebAssembly, dowiesz się, jak wykorzystać Wasm do zlecania zadań wymagających dużej mocy obliczeniowej procesora w postaci działającego przykładu.
Animowane układy siatki CSS
Właściwości `grid-template-columns` i `grid-template-rows` w siatce CSS umożliwiają definiowanie nazw linii i śledzenie rozmiaru kolumn i wierszy siatki. Obsługa interpolacji dla tych właściwości umożliwia płynne przejście między stanami w układach siatki zamiast przyciągania ich w połowie animacji lub przejścia.
Graj w grę z dinozaurem w Chrome na padzie do gier
Naucz się sterować grami internetowymi za pomocą interfejsu Gamepad API.
Atrybut inert
Właściwość bezwładna to globalny atrybut HTML, który upraszcza usuwanie i przywracanie zdarzeń wejściowych użytkownika dotyczących elementu, m.in. zdarzeń skupienia i zdarzeń z technologii wspomagających.
Określanie dostawcy klucza dostępu za pomocą identyfikatora AAGUID
Strony uzależnione mogą określić źródło klucza dostępu, analizując AAGUID. Dowiedz się, jak to działa
Kompilowanie i optymalizacja Wasm za pomocą Binaryen
Naucz się pisać i optymalizować moduły WebAssembly w języku JavaScript przy użyciu interfejsu Binaryen.js API, korzystając z przykładowego syntetycznego języka zabawkowego o nazwie ExampleScript.
Przechwytywanie dźwięku i obrazu w HTML5
Od dawna przechwytywanie dźwięku i obrazu było celem, który stanowił „świętą grotę” programowania stron internetowych. Przez wiele lat musieliśmy polegać na wtyczkach do przeglądarki ( Flash lub Silverlight ). No dalej! HTML5 na ratunek. Może się to
Komponent internetowy <model-viewer>
Komponent internetowy <model-viewer> umożliwia deklaratywne używanie modeli 3D na stronie internetowej.
Szczegółowe informacje dotyczące weryfikacji użytkowników
Dowiedz się, jak używać funkcji „userverification” w WebAuthn
Dlaczego dane dotyczące użytkowania Chrome i RUM różnią się od danych dotyczących RUM?
Dowiedz się, dlaczego dane RUM mogą pokazywać różne wartości podstawowych wskaźników internetowych pochodzących z raportu na temat użytkowania Chrome.
Ułatwienia dostępu dla programistów stron internetowych
Ważne, aby tworzyć witryny, które są przyjazne dla wszystkich i są dostępne dla wszystkich. Możemy zoptymalizować co najmniej 6 głównych obszarów niepełnosprawności: wzrok, słuch, mobilność, funkcje poznawcze, mową i neuronowe.
Wczytywanie JavaScriptu innej firmy
Skrypty firm zewnętrznych zapewniają szeroki zakres przydatnych funkcji, dzięki którym sieć jest bardziej dynamiczna. Dowiedz się, jak zoptymalizować wczytywanie skryptów innych firm, aby zmniejszyć ich wpływ na wydajność.
Zablokuj możliwość tworzenia nowego klucza dostępu, jeśli taki istnieje
Dowiedz się, jak zapobiec tworzeniu nowego klucza dostępu, jeśli taki klucz istnieje już w menedżerze haseł użytkownika.
Praca z IndexedDB
Przewodnik po podstawach IndexedDB.
5 fragmentów kodu CSS, które każdy deweloper interfejsów powinien znać w 2024 roku
Wydajny i stabilny CSS, którego możesz używać z paskiem narzędzi, jest już dostępny.
Optymalizuj czas do pierwszego bajtu
Dowiedz się, jak optymalizować dane pod kątem wskaźnika Czas do pierwszego bajtu.
Z jakich części składa się adres URL?
Jaka jest różnica między hostem, witryną i punktem początkowym? Co to jest eTLD+1? Opisaliśmy to w tym artykule.
Szczegółowe dane logowania dostępne do znalezienia
Dowiedz się, jakie dane uwierzytelniające są wykrywalne i jak stworzyć środowisko dostosowane do potrzeb użytkownika.
Wydajność renderowania
Użytkownicy zauważają, że strony i aplikacje nie działają dobrze, więc optymalizacja wydajności renderowania jest kluczowa.
ResizeObserver: jest podobna do document.onresize dla elementów.
Parametr „ResizeObserver” powiadamia Cię o zmianie rozmiaru prostokąta treści, dzięki czemu możesz odpowiednio zareagować.
Zoptymalizuj kodowanie i rozmiar transferu zasobów tekstowych
Oprócz wyeliminowania niepotrzebnych zasobów do pobrania najlepsze, co możesz zrobić, aby przyspieszyć wczytywanie strony, to zminimalizowanie ogólnego rozmiaru pobieranego dzięki optymalizacji i kompresji pozostałych zasobów.
OffscreenCanvas – przyśpiesz pracę kanw, korzystając z narzędzia internetowego
Ten dokument wyjaśnia, jak używać interfejsu OffscreenCanvas API, aby poprawić wydajność podczas renderowania grafiki w aplikacji internetowej.
First Contentful Paint (FCP)
W tym poście przedstawiamy wskaźnik pierwszego wyrenderowania treści (FCP) i wyjaśniamy, jak je mierzyć
Sieci dystrybucji treści (CDN)
W tym artykule znajdziesz wyczerpujące omówienie sieci dystrybucji treści (CDN). Wyjaśniamy także, jak wybrać, skonfigurować i zoptymalizować konfigurację CDN.
Co wpływa na wygodę wylogowywania się?
Praktyczne wskazówki dla programistów dotyczące tego, co zrobić, gdy użytkownik wyloguje się z witryny.
Time to Interactive (TTI) (Czas do pełnej interaktywności)
W tym poście omówiono dane dotyczące czasu do pełnej interaktywności (TTI) i wyjaśniono, jak je mierzyć
Zoptymalizuj wczytywanie zasobów za pomocą interfejsu Fetch Priority API
Interfejs Fetch Priority API wskazuje względny priorytet zasobów w stosunku do przeglądarki. Może umożliwić optymalne wczytywanie się i poprawić podstawowe wskaźniki internetowe.
Pseudoklasy :user-valid i :user-invalid
Informacje o pseudoklasach :user-valid i :user-invalid oraz o tym, jak ich używać do poprawiania wygody użytkowników podczas weryfikacji danych wejściowych.
Optymalizacja podstawowych wskaźników internetowych z myślą o podejmujących decyzje biznesowe
Dowiedz się, jak osoby podejmujące decyzje biznesowe i inni deweloperzy mogą poprawić podstawowe wskaźniki internetowe.
Szczegółowe informacje o ciągach kodowania base64 w JavaScripcie
Zrozumienie typowych problemów związanych z kodowaniem i dekodowaniem base64 i ich unikanie.
Podsiatka CSS
Podsiatka umożliwia udostępnianie siatki, co pozwala na wyrównywanie zagnieżdżonych siatek do elementów nadrzędnych i równorzędnych.
Skuteczne wczytywanie reklam bez wpływu na szybkość strony
W dzisiejszym świecie cyfrowym reklama internetowa jest kluczowym elementem bezpłatnego internetu, z którego wszyscy korzystamy. Jednak źle zaimplementowane reklamy mogą powodować wolniejsze wczytywanie się strony, co może zniechęcać użytkowników i obniżać zaangażowanie. Dowiedz się, jak skutecznie wczytywać reklamy bez wpływu na szybkość strony, zapewniając płynne wrażenia użytkowników i maksymalizując możliwości generowania przychodów dla właścicieli witryn.
4 często spotykane typy pokrycia kodu
Dowiedz się, czym jest pokrycie kodu, i poznaj 4 typowe sposoby jego pomiaru.
Co to jest testowanie czy nie, perspektywa techniczna
Ustal, co musisz przetestować, a co możesz wykluczyć.
Definiowanie przypadków testowych i priorytetów
Ustal, co przetestować, zdefiniuj przypadki testowe i ustaw priorytety.
Dane o skuteczności skupione na użytkownikach
Dane dotyczące skuteczności skoncentrowane na użytkownikach mają kluczowe znaczenie dla zrozumienia i poprawy wygody korzystania z Twojej witryny w sposób przynoszący korzyści prawdziwym użytkownikom.
Wstępne wczytywanie obrazów elastycznych
Poznaj nowe i ekscytujące możliwości wstępnego wczytywania elastycznych obrazów, aby zadbać o wygodę użytkowników.
Dostosowywanie typografii do preferencji użytkownika za pomocą CSS
Metoda dostosowywania czcionki do preferencji użytkowników, która ułatwia mu czytanie treści.
Piramida czy krab? Opracuj odpowiednią strategię testowania
Dowiedz się, jak łączyć różne typy testów w rozsądną strategię dopasowaną do Twojego projektu.
3 najczęstsze typy automatyzacji testów
Zacznijmy od podstaw. Zapoznanie się z 2 ogólnymi trybami testowania i 3 typowymi typami automatyzacji testów.
Eliminowanie niepotrzebnych plików do pobrania
Należy okresowo kontrolować swoje zasoby, aby mieć pewność, że każdy z nich przyczynia się do poprawy wrażeń użytkowników.
Kompiluję mkbitmap do WebAssembly
Program mkbitmap C odczytuje obraz i wykonuje na nim co najmniej jedną z tych operacji w tej kolejności: odwrócenie, filtrowanie górnoprzepustowego, skalowanie i prognozowanie. Każdą operację można osobno kontrolować oraz włączać i wyłączać. W tym artykule pokazujemy, jak skompilować mkbitmap do WebAssembly.
Co to jest WebAssembly i skąd się wzięła?
Wprowadzenie do WebAssembly (czasami w skrócie Wasm), czyli przenośnego formatu kodu binarnego i odpowiadającego im formatu tekstowego dla programów wykonywalnych, a także interfejsów oprogramowania ułatwiających interakcje między takimi programami a ich środowiskiem hosta.
Bezpieczne przechowywanie danych użytkowników w nowoczesnych aplikacjach internetowych
Jak bezpiecznie wyświetlać treści kontrolowane przez użytkownika w aplikacjach internetowych.
Prywatny system plików źródła
Standard systemu plików wprowadza prywatny system plików pochodzenia (OPFS) jako punkt końcowy pamięci, który jest prywatny dla pochodzenia strony i niewidoczny dla użytkownika. Zapewnia on opcjonalny dostęp do specjalnego rodzaju pliku, który jest
Wdrażanie pliku AVIF na potrzeby bardziej elastycznych witryn
Omówienie sposobu wdrażania formatu AVIF w ekosystemie oraz korzyści związanych z wydajnością i jakością, których programiści mogą oczekiwać od AVIF w przypadku obrazów i animacji.
Optymalizacja interakcji do kolejnego wyrenderowania
Dowiedz się, jak zoptymalizować interakcje w witrynie przed następnym wyrenderowaniem.
Funkcje podstawowe, których możesz używać już dziś
Poznaj niektóre z funkcji dostępnych w aplikacji Baseline.
Jak duże rozmiary DOM wpływają na interaktywność i co można z tym zrobić
Duże rozmiary DOM mogą mieć wpływ na szybkość interakcji. Dowiedz się więcej o zależności między rozmiarem DOM i INP oraz o tym, jak zmniejszyć rozmiar DOM i jak ograniczyć renderowanie, gdy strona zawiera dużo elementów DOM.
Optymalizuj opóźnienie wejściowe
Opóźnienie danych wejściowych może mieć znaczny wpływ na całkowity czas oczekiwania na interakcję i negatywnie wpływać na wartość INP strony. Z tego przewodnika dowiesz się, czym jest opóźnienie sygnału i jak możesz je zmniejszyć, aby zwiększyć interaktywność.
Ocena skryptu i długie zadania
Podczas ładowania skryptów przeglądarka potrzebuje czasu na ich ocenę przed wykonaniem, co może spowodować długie zadania. Dowiedz się, jak działa ocena skryptów i co możesz zrobić, aby nie powodowała długich zadań podczas wczytywania strony.
Renderowanie kodu HTML i interaktywności po stronie klienta
Renderowanie kodu HTML za pomocą JavaScriptu różni się od renderowania kodu HTML wysyłanego przez serwer, co może mieć wpływ na wydajność. Zapoznaj się z tym przewodnikiem i dowiedz się, jaka jest różnica między sobą, a także co możesz zrobić, aby utrzymać wydajność renderowania witryny, zwłaszcza w przypadku interakcji.
Twórz środowisko WordPress w przeglądarce za pomocą WordPress Playground i WebAssembly
Pełna wersja WordPress oparta na języku PHP uruchamiana wyłącznie w przeglądarce z obsługą WebAssembly
Skumulowane przesunięcie układu (CLS)
W tym poście przedstawiamy dane skumulowanego przesunięcia układu (CLS) i wyjaśniamy, jak je mierzyć.
Nowe funkcje dla programistów udostępniane przez WebAssembly
Prezentacja narzędzi dostępnych teraz w internecie dzięki technologii WebAssembly.
PWA w sklepach z aplikacjami
Progresywne aplikacje internetowe można przesyłać do sklepów z aplikacjami, takich jak Sklep Play na Androida czy Microsoft Store.
Co to są mapy źródeł?
Ulepsz debugowanie stron internetowych dzięki mapom źródeł.
6 fragmentów kodu CSS, które każdy programista interfejsów powinien znać w 2023 r.
Wydajny i stabilny CSS, którego możesz używać z paskiem narzędzi, jest już dostępny.
Funkcje trygonometryczne w CSS
Oblicz sinus, cosinus, tangens i inne wartości w CSS.
Efektywne wykonywanie operacji na poszczególnych klatkach wideo za pomocą metody requestVideoFrameCallback()
Metoda requestVideoFrameCallback() pozwala autorom stron internetowych zarejestrować wywołanie zwrotne, które jest wykonywane w krokach renderowania, gdy do kompozytora wysyłana jest nowa ramka wideo.
Najciekawsze momenty społeczności GDE: Lars Knudsen
Jedna z serii wywiadów z członkami programu Google Developers (GDE).
Szybka wskazówka dotycząca CSS. Animowany tekst gradientowy
Stwórzmy animowany efekt tekstu z gradientem za pomocą ograniczonych właściwości niestandardowych i cięcia tła. Otwórz CodePen i utwórz nowy rysik. Utwórz znaczniki dla tekstu. Użyj nagłówka z słowem „Szybki”: Teraz nadajmy body ciemniejszy
Nowe wzorce w aplikacjach do multimediów
W tym poście na blogu prezentujemy nową kolekcję wzorców dla aplikacji multimedialnych.
Tworzę Chrometobera
Jak ta przewijana książka powstała z myślą o dzieleniu się zabawnymi i przerażającymi wskazówkami oraz trikami na tym Chrometoberze.
Tworzenie komponentu etykietki
Podstawowe informacje o tworzeniu dostosowanego do różnych kolorów elementu niestandardowego z etykietą.
Logowanie się za pomocą klucza dostępu przez autouzupełnianie formularzy
Klucze dostępu sprawiają, że konta użytkowników witryny są bezpieczniejsze, prostsze w obsłudze, łatwiejsze w obsłudze i nie wymagają hasła. Z tego artykułu dowiesz się, jak zaprojektować logowanie bez haseł za pomocą kluczy dostępu, aby były odpowiednie dla dotychczasowych użytkowników haseł.
Tworzenie klucza dostępu do logowania się bez hasła
Klucze dostępu sprawiają, że konta użytkowników witryny są bezpieczniejsze, prostsze w obsłudze, łatwiejsze w obsłudze i nie wymagają hasła. Z tego artykułu dowiesz się, jak umożliwić użytkownikom tworzenie kluczy dostępu do witryny.
Tworzenie komponentu pływającego przycisku polecenia (FAB)
Podstawowe omówienie tworzenia elastycznych, elastycznych i dostępnych komponentów FAB.
Sprawdzone metody dotyczące czcionek
Dowiedz się, jak zoptymalizować czcionki internetowe pod kątem podstawowych wskaźników internetowych.
Najciekawsze momenty społeczności GDE: Alba Silvente Fuentes
Jedna z serii wywiadów z członkami programu Google Developers (GDE).
Testowanie kontrastu kolorów w projektowaniu stron internetowych
Omówienie 3 narzędzi i technik testowania i weryfikowania kontrastu kolorów w projektach pod kątem ułatwień dostępu.
Szybka wskazówka dotycząca CSS. Animacja wczytywania
Utwórzmy animowany ładujący element CSS z ograniczonymi właściwościami niestandardowymi i funkcją animation-timing-function Otwórz CodePen i utwórz nowy rysik. Utwórz znaczniki dla naszego ładowarki. Zwróć uwagę na użycie wbudowanych właściwości
Tworzenie głównego menu nawigacyjnego witryny
W tym samouczku opisujemy, jak utworzyć dostępną główną nawigację witryny. Uczysz się semantycznego kodu HTML, ułatwień dostępu oraz tego, jak korzystanie z atrybutów ARIA może czasem przynieść więcej szkody niż pożytku.
Czy to :modal?
Ten poręczny pseudoselektor CSS umożliwia wybieranie elementów modalnych.
Sprawdzone metody korzystania z tagów i menedżerów tagów
Optymalizowanie tagów i menedżerów tagów pod kątem podstawowych wskaźników internetowych.
Styl listy kreacji
Kilka przydatnych i kreatywnych sposobów na dodawanie stylu listy.
Tworzenie iluzji zakrzywionej siatki
Zabawna eksploracja sposobów na odtworzenie złudzenia optycznego za pomocą CSS.
Jak Nordhealth korzysta z właściwości niestandardowych w komponentach sieciowych
Zalety używania właściwości niestandardowych w systemach projektowania i bibliotekach komponentów.
Szczegółowa kontrola nad przekształceniami CSS z poszczególnymi właściwościami przekształcenia
Dowiedz się, jak korzystać z poszczególnych właściwości CSS „przesunięcie”, „obracanie” i skalowanie, aby w intuicyjny sposób podchodzić do przekształceń.
Animacje obramowania CSS
Różne sposoby animowania obramowania w CSS
Jak BBC wdraża mechanizm HSTS w celu zwiększenia bezpieczeństwa i skuteczności
Aby poprawić bezpieczeństwo i wydajność swojej strony internetowej, BBC wdraża mechanizm HSTS. Dowiedz się, co to oznacza i jak HSTS może Ci pomóc.
Dlaczego dane laboratoryjne i polowe mogą się różnić (oraz co należy zrobić w związku z tym)
Dowiedz się, dlaczego narzędzia monitorujące podstawowe wskaźniki internetowe mogą podawać inne wartości i jak interpretować te różnice.
Korzystna sytuacja
GDE Enrique Fernandez Guerra opowiada o modelu open source swojej organizacji pozarządowej HelpDev.
Koniec Internet Explorera
Opis zakończenia obsługi przeglądarki Internet Explorer dla klientów i deweloperów firmy Maersk.com.
Pożegnanie z HTML5Rocks
Miło było Cię poznać.
Przepisy na własne pliki cookie
Dowiedz się, jak konfigurować własne pliki cookie, aby zapewnić bezpieczeństwo, zgodność z różnymi przeglądarkami i zminimalizować ryzyko awarii po wycofaniu plików cookie innych firm.
Synchronizuj odtwarzanie dźwięku i obrazu w internecie
Interfejs Web Audio API umożliwia prawidłowe uzyskanie synchronizacji audiowizualnej.
Użyj stożkowych gradientów, aby utworzyć modne obramowanie
Gradienty stożkowe można wykorzystać do tworzenia ciekawych efektów, takich jak to ładne obramowanie. Ten CodePen stworzony przez Adama Argyle, pierwotnie udostępniony na Twitterze za pomocą tego tweeta, pokazuje, jak użyć gradientu stożkowego do
Wybieranie biblioteki lub frameworka JavaScript
Poznaj decyzje dotyczące korzystania z biblioteki lub frameworka JavaScript.
Implementacja obsługi błędów w przypadku korzystania z interfejsu Fetch API
Wykrywanie błędów podczas pracy z interfejsem Fetch API.
Czym różnią się biblioteki JavaScript od platform?
Poznaj różnice między platformami i bibliotekami w kontekście środowiska JavaScript po stronie klienta.
Interfejs API dla szybkich i atrakcyjnych czcionek internetowych
Najnowsze informacje na temat interfejsu Google Fonts CSS API – jak działa, jak z niego korzystać i jak może efektywnie dostarczać czcionki internetowe.
Przewodnik po terminalu dla programistów interfejsu
Ten materiał pomoże Ci szybko poruszać się po terminalu.
GOV.UK usuwa jQuery ze swojego interfejsu.
Firma GOV.UK zrezygnowała z zależności jQuery z poziomu interfejsu. Nigdy nie zgadniesz, co się stało. (Tak).
Tworzenie komponentu przycisku
Podstawowe omówienie tworzenia elastycznych, elastycznych i przystępnych komponentów.
Nie walcz ze skanerem wstępnego wczytywania przeglądarki
Dowiedz się, czym jest skaner wstępnego wczytywania przeglądarki, jak pomaga w wydajności i co możesz zrobić, aby nie przeszkadzały Ci w korzystaniu z aplikacji.
Sprawdzone metody mierzenia wskaźników internetowych w terenie
Jak mierzyć wskaźniki internetowe za pomocą obecnie używanego narzędzia analitycznego
Tu się pomaga
Ułatwianie tworzenia treści pod kątem internetu.
Znajdowanie odwagi i inspiracji w społeczności programistów
Eksperci Google Developers ds. stron internetowych, którzy opowiadają o tym, jak programy mentorskie pozwoliły im stać się liderami.
Zmienne czcionki w rzeczywistości
Udostępnienie praktycznego przewodnika po zmiennych czcionkach z wieloma przykładami.
Szybkie tworzenie ładnych gradientów CSS za pomocą narzędzia CSS Gradient Creator
To narzędzie Josha W Comeau pozwala bardzo łatwo tworzyć ładne gradienty.
Szczegółowa analiza problemów z najważniejszymi problemami związanymi z tworzeniem stron internetowych
Zbiór uwag na temat najważniejszych problemów, zebranych w ramach kilku indywidualnych rozmów z programistami stron internetowych.
Zadbaj o idealny wygląd swojej witryny dzięki plikowi images.tooling.report
Zapoznaj się ze stanem narzędzi do obsługi obrazów.
Zakres zmiennych globalnych i lokalnych
Dowiedz się więcej o zakresie i sposobie jego działania w języku JavaScript.
Tworzenie komponentu dialogu
Podstawowy przegląd tworzenia dostosowanych do kolorów, responsywnych i dostępnych mini- i megamodali za pomocą elementu ``.
Debugowanie błędów odtwarzania multimediów w internecie
Dowiedz się, jak debugować błędy odtwarzania multimediów w internecie.
Najciekawsze momenty społeczności GDE: Nishu Goel
Jedna z serii wywiadów z członkami programu Google Developers (GDE).
Skutki zbyt częstego leniwego ładowania
Szybkie wczytywanie obrazów w ramach początkowego widoku strony, a pozostałe elementy leniwie wczytując, może poprawić wyniki wskaźników Web Vitals przy jednoczesnym mniejszym wczytywaniu bajtów.
Tworzenie komponentu paska wczytywania
Podstawowe omówienie tworzenia adaptacyjnego i łatwo dostępnego paska wczytywania za pomocą elementu „`”.
Zapisz dane logowania z Formularzy
Formularz rejestracji i logowania powinien być jak najprostszy. Zapisywanie danych logowania z formularzy logowania, aby użytkownicy nie musieli się ponownie logować. Aby zapisać dane logowania użytkowników z formularzy: Zanim przejdziesz dalej,
Chrome i Firefox wkrótce pojawią się w wersji głównej 100
Zmiany w ciągu znaków klienta użytkownika, strategie stosowane w Chrome i Firefoksie w celu złagodzenia skutków tego zjawiska oraz informacje o tym, jak możesz pomóc.
Tworzenie favikony adaptacyjnej
Podstawowe omówienie sposobu tworzenia favikony adaptacyjnej.
Zwiększ bezpieczeństwo i prywatność, aktualizując pamięć podręczną HTTP
Zapomnienie lub niewłaściwe użycie nagłówka Cache-Control może negatywnie wpłynąć na bezpieczeństwo Twojej witryny i prywatność użytkowników. Otrzymuj rekomendacje dotyczące najcenniejszych witryn.
Rysowanie na płótnie w Emscripten
Dowiedz się, jak renderować grafikę 2D na płótnie w sieci WebAssembly za pomocą Emscripten.
Dodatkowe elementy HTML
Dane niezbędne do prawidłowego funkcjonowania witryny
Przenoszenie aplikacji USB do internetu. Część 2. gPhoto2
Dowiedz się, jak pakiet gPhoto2 został przeniesiony do WebAssembly, aby umożliwić sterowanie zewnętrznymi kamerami przez USB z aplikacji internetowej.
Logowanie błędów sieciowych (NEL)
Używaj logowania błędów sieciowych (NEL) do zbierania informacji o błędach sieci po stronie klienta.
Wykrywanie funkcji WebAssembly
Dowiedz się, jak korzystać z najnowszych funkcji WebAssembly, a jednocześnie obsługiwać użytkowników wszystkich przeglądarek.
Przenoszenie aplikacji USB do internetu. Część 1. libusb
Dowiedz się, jak przenieść do internetu kod, który wchodzi w interakcję z urządzeniami zewnętrznymi, za pomocą interfejsów API WebAssembly i Fugu.
Tworzenie komponentu przełącznika motywu
Podstawowe informacje o tworzeniu adaptacyjnego i łatwo dostępnego komponentu przełączania motywów.
Osadzanie fragmentów kodu JavaScript w C++ za pomocą Emscripten
Dowiedz się, jak umieścić kod JavaScript w bibliotece WebAssembly, aby komunikować się ze światem zewnętrznym.
PWA w Oculus Quest 2
Oculus Quest 2 to gogle do rzeczywistości wirtualnej opracowane przez Oculus, oddział firmy Meta. Deweloperzy mogą teraz tworzyć i rozpowszechniać progresywne aplikacje internetowe 2D i 3D, które wykorzystują funkcję wielozadaniowości Oculus Quest 2. Z tego artykułu dowiesz się, jak tworzyć, instalować i testować PWA w Oculus Quest 2.
Projektant budynku
Zobacz proces i narzędzia wykorzystywane do przygotowania kalendarza w świątecznym stylu w Projektcember.
Kalkulator projektanta
Skeomorficzna próba odtworzenia kalkulatora słonecznego w internecie, w którym wykorzystano czujnik oświetlenia zewnętrznego i funkcję nakładki sterującej oknem.
Precyzyjne kopiowanie kodu JavaScript za pomocą funkcjiStructuredClone
Przez najdłuższy czas trzeba było korzystać z obejść i bibliotek, aby utworzyć głęboką kopię wartości JavaScriptu. Platforma ma teraz wbudowaną funkcję „structuredClone()” do szczegółowego kopiowania.
Tworzenie komponentu toastu
Podstawowe omówienie tworzenia adaptacyjnego i łatwo dostępnego komponentu toastu.
Fundusz UI
Ogłaszamy fundusz związany z interfejsem użytkownika w Chrome, który ma zapewniać granty osobom pracującym nad narzędziami do projektowania, CSS i HTML.
Tworzenie komponentu menu gry 3D
Podstawowe omówienie sposobów tworzenia elastycznego, adaptacyjnego i przystępnego menu gry 3D.
Przepływy użytkowników w Lighthouse
Wypróbuj nowy interfejs Lighthouse API, aby mierzyć wydajność i przeprowadzać sprawdzone metody w całym procesie użytkownika.
W kierunku wskaźnika płynności animacji
Dowiedz się więcej o pomiarze animacji, o klatkach animacji i o ogólnej płynności strony.
Wszystko ogłoszone podczas Chrome Dev Summit 2021
Podsumowanie wszystkich najważniejszych ogłoszeń z konferencji Chrome Dev Summit 2021 wraz z linkami do dodatkowych informacji.
Co nowego w PageSpeed Insights
Poznaj najnowsze funkcje PageSpeed Insights, które pomogą Ci dokładniej mierzyć i optymalizować jakość stron oraz witryn.
Podróż Photoshopa w internecie
Przez ostatnie 3 lata pracowaliśmy nad przeglądarką Chrome, której celem jest zwiększenie możliwości aplikacji internetowych. Jedną z takich aplikacji internetowych jest Photoshop. Jeszcze kilka lat temu ciężko sobie wyobrazić ideę uruchamiania oprogramowania tak złożonego jak Photoshop bezpośrednio w przeglądarce. Jednak korzystając z różnych nowych technologii internetowych, firma Adobe wprowadziła obecnie publiczną wersję beta Photoshopa.
Tworzenie komponentu wielokrotnego wyboru
Podstawowe informacje o tworzeniu elastycznego, adaptacyjnego i dostępnego komponentu z możliwością wielokrotnego wyboru do sortowania i filtrowania treści u użytkowników.
Jak ocenić wydajność wczytywania w terenie za pomocą interfejsów Navigation Timing i Resource Timing
Poznaj podstawy korzystania z interfejsów API nawigacji i Resource Timing do oceny szybkości wczytywania stron w terenie.
Bezpieczne manipulacje DOM za pomocą interfejsu Sanitizer API
Nowy interfejs Sanitizer API ma na celu stworzenie solidnego procesora do bezpiecznego wstawiania dowolnych ciągów znaków na stronie. W tym artykule opisujemy interfejs API i wyjaśniamy, jak z niego korzystać.
Sprawdzone metody korzystania z elementów umieszczanych przez inne firmy
W tym dokumencie opisujemy sprawdzone metody związane z wydajnością, które można zastosować podczas wczytywania elementów umieszczonych na stronach innych firm, efektywne techniki wczytywania i narzędzie Terminator przesunięcia układu, które pomaga ograniczyć przesunięcia układu w przypadku popularnych elementów umieszczanych.
Jak architektury SPA wpływają na podstawowe wskaźniki internetowe
Odpowiedzi na najczęstsze pytania na temat usług spa, podstawowych wskaźników internetowych i planów Google mających na celu radzenie sobie z obecnymi ograniczeniami pomiarów.
Szczegółowa analiza zdarzeń JavaScript
preventDefault i stopPropagation: kiedy używać poszczególnych metod i jak dokładnie działają. Obsługa zdarzeń JavaScript jest często prosta. Dotyczy to zwłaszcza prostej (względnie płaskiej) struktury HTML. Sytuacja komplikuje się, gdy zdarzenia
Łączenie zasobów innych niż JavaScript
Dowiedz się, jak importować i łączyć różne typy zasobów z JavaScriptu w sposób działający zarówno w przeglądarkach, jak i w pakietach.
Tworzenie komponentu złożonego z przycisku
Podstawowe omówienie tworzenia dostępnego komponentu podzielonego przycisku.