Artykuły
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?
Jak skonfigurować formę płatności
Transakcja za pomocą płatności internetowych zaczyna się w momencie, gdy wyświetla się Twoja aplikacja płatnicza. Dowiedz się, jak skonfigurować formę płatności i przygotować aplikację płatniczą dla sprzedawców i klientów do dokonywania płatności.
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ęść 1. AI po stronie klienta do zwalczania toksycznych treści w internecie
"Chroń użytkowników i zapewnij bezpieczniejsze środowisko online dzięki wykrywaniu toksycznych treści. W pierwszej części artykułu przedstawiamy kontekst, w jakim należy stosować AI, aby ograniczać toksyczność na poziomie źródła, czyli na klawiaturze użytkownika."
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
Optymalizacja największego wyrenderowania treści
Szczegółowy przewodnik wyjaśniający, jak rozkładać LCP i określać obszary, które wymagają poprawy.
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.
Pierwsze kroki z mierzeniem wskaźników internetowych
Dowiedz się, jak mierzyć wskaźniki internetowe swojej witryny zarówno w środowisku rzeczywistym, jak i w środowiskach laboratoryjnych.
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.
Porównaj możliwości LLM z podsumowaniem
Oceń wyniki różnych modeli i promptów za pomocą LLM jako techniki oceny. Zamiast polegać na ocenie ludzkiej, weryfikacja modelu jest delegowana do innego LLM.
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ą
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?
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.
Poprawianie wydajności i wygody AI po stronie klienta
Odkryj zalety AI po stronie klienta, w tym krótki czas oczekiwania, niższe koszty po stronie serwera, brak wymagań dotyczących kluczy API, większą prywatność użytkowników i dostęp offline.
Miejsce na dane w internecie
Istnieje wiele różnych opcji przechowywania danych w przeglądarce. Która opcja najbardziej Ci odpowiada?
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.
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.
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.
Co wyróżnia progresywną aplikację internetową?
Co wyróżnia dobrą lub świetną progresywną aplikację internetową?
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.
Co jest potrzebne, aby można ją było zainstalować?
Kryteria progresywnej instalacji aplikacji internetowej.
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.
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.
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.
Wskaźniki niestandardowe
Niestandardowe dane pozwalają mierzyć i optymalizować aspekty korzystania z Twojej witryny, które są unikalne dla Twojej witryny.
Mierzenie i debugowanie skuteczności za pomocą Google Analytics 4 i BigQuery
Dowiedz się, jak przesyłać dane dotyczące wskaźników internetowych do usług Google Analytics 4 oraz eksportować je 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.
Optymalizuj czas do pierwszego bajtu
Dowiedz się, jak optymalizować dane pod kątem wskaźnika Czas do pierwszego bajtu.
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.
Co to jest sztuczna inteligencja?
Skrót AI jest często używany zamiennie do reprezentowania różnych typów technologii, które składają się na dziedzinę AI.
Etyka i AI
Podczas korzystania z narzędzi AI i tworzenia nowych treści należy wziąć pod uwagę wiele kwestii etycznych.
Ulepsz wyszukiwanie w witrynie: odpowiedzi kontekstowe z wykorzystaniem generatywnej AI
Podczas korzystania z narzędzi AI i tworzenia nowych treści należy wziąć pod uwagę wiele kwestii etycznych.
Poznaj zespół AI Web.dev
Poznaj twórców technologii i zespół ds. relacji z deweloperami.
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.
Largest Contentful Paint (LCP)
W tym poście przedstawiamy dane największego wyrenderowania treści (LCP) i wyjaśniamy, jak je mierzyć
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.
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.
Efektywne wczytywanie reklam bez wpływu na szybkość działania strony
W dzisiejszym cyfrowym świecie reklamy online są kluczowym elementem bezpłatnego internetu, z którego wszyscy korzystamy. Niewłaściwie zaimplementowane reklamy mogą jednak spowolnić przeglądanie, frustrować użytkowników i zmniejszać ich zaangażowanie. Dowiedz się, jak skutecznie wczytywać reklamy bez obniżania szybkości strony, zadbać o wygodę użytkowników i zmaksymalizować przychody 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.
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
Bezpieczne przechowywanie danych użytkowników w nowoczesnych aplikacjach internetowych
Jak bezpiecznie wyświetlać treści kontrolowane przez użytkownika w aplikacjach internetowych.
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.
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.
Używanie rozszerzenia Web Vitals do debugowania problemów z podstawowymi wskaźnikami internetowymi
Rozszerzenie Web Vitals wyświetla teraz więcej informacji na potrzeby debugowania, które pomagają zidentyfikować główne przyczyny problemów z podstawowymi wskaźnikami internetowymi.
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
Cumulative Layout Shift (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.
Co to są mapy źródeł?
Ulepsz debugowanie stron internetowych dzięki mapom źródeł.
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.
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).
Nowe wzorce w aplikacjach do multimediów
W tym poście na blogu prezentujemy nową kolekcję wzorców dla aplikacji multimedialnych.
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żyjemy nagłówka z słowem „Szybki”: Teraz nadajmy body ciemniejszy
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ą.
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.
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 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).
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
Testowanie kontrastu kolorów projektu internetowego
Omówienie 3 narzędzi i technik do testowania i weryfikacji dostępnego kontrastu kolorów projektu.
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.
Styl listy kreacji
Kilka przydatnych i kreatywnych sposobów na dodawanie stylu listy.
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.
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
Czym różnią się biblioteki JavaScript od platform?
Poznaj różnice między platformami i bibliotekami w kontekście środowiska JavaScript po stronie klienta.
Wybierz bibliotekę lub platformę JavaScript
Zastanów się nad decyzjami dotyczącymi użycia biblioteki lub platformy JavaScript.
Implementacja obsługi błędów w przypadku korzystania z interfejsu Fetch API
Wykrywanie błędów podczas pracy z interfejsem Fetch API.
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.
Tu się pomaga
Ułatwianie tworzenia treści pod kątem internetu.
Sprawdzone metody mierzenia wskaźników internetowych w terenie
Jak mierzyć wskaźniki internetowe za pomocą obecnie używanego narzędzia analitycznego
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 okna
Podstawowe omówienie tworzenia elastycznych, elastycznych i dostępnych mini i mega modów z elementem „`”.
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).
Wpływ zbyt długiego wczytywania na wydajność
Szybkie ładowanie obrazów w początkowym widocznym obszarze i swobodne leniwe ładowanie reszty – może poprawić wskaźniki internetowe i pozwolić wczytywać mniej 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.
Rysowanie na płótnie w Emscripten
Dowiedz się, jak renderować grafikę 2D na płótnie w sieci WebAssembly za pomocą Emscripten.
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.
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.
Co nowego w PageSpeed Insights
Poznaj najnowsze funkcje PageSpeed Insights, które pomogą Ci dokładniej mierzyć i optymalizować jakość stron oraz witryn.
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.
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.
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.
Importowanie arkuszy stylów za pomocą skryptów modułów CSS
Dowiedz się, jak używać skryptów modułu CSS do importowania arkuszy stylów CSS przy użyciu tej samej składni co moduły JavaScript.
Kolor uzupełniający CSS
Dodaj kolor marki do danych wejściowych w formularzu HTML za pomocą jednego wiersza kodu.
Tworzenie komponentu przełącznika
Podstawowe informacje o tworzeniu elastycznego i dostępnego komponentu przełącznika.
Nagłówki wskazówek dotyczących klienta dotyczące funkcji multimedialnych preferencji użytkownika
Zestaw nagłówków wskazówek klienta umożliwia witrynom opcjonalne pobieranie preferencji użytkownika dotyczących multimediów w momencie wysyłania żądania, co pozwala serwerom wstawiać odpowiednie pliki CSS w kod HTML ze względu na wydajność. Definicje
Tworzenie komponentu menu nawigacyjnego
Podstawowe omówienie sposobu tworzenia elastycznego i łatwo dostępnego komponentu menu nawigacyjnego, które umożliwia użytkownikom poruszanie się po witrynie.
Używanie wątków WebAssembly z C, C++ i Rust
Dowiedz się, jak wdrożyć do WebAssembly aplikacje wielowątkowe napisane w innych językach.
PWA z obsługą strumieniowania offline
Tworzenie PWA ze strumieniowym przesyłaniem danych offline wiąże się z pewnymi wyzwaniami. Z tego artykułu dowiesz się więcej o interfejsach API i technikach, które zapewniają użytkownikom wysokiej jakości korzystanie z multimediów offline.
Schematy mediów
Platformy mediów są dostępne zarówno w formie zastrzeżonej, jak i oprogramowaniu open source. Ich podstawą jest zestaw interfejsów API, które obsługują odtwarzanie dźwięku i filmów w różnych formatach kontenerów i protokołach przesyłania.
Szyfrowanie multimediów
Poznaj koncepcje zarządzania prawami cyfrowymi i poznaj polecenia potrzebne do przejścia z nieprzetworzonego pliku MOV do zaszyfrowanego pliku multimedialnego spakowanego na potrzeby formatu MPEG-DASH lub HLS przy użyciu szyfrowania zarówno Clear Key, jak i Widevine.
Podstawy strumieniowego przesyłania multimediów
Strumieniowe przesyłanie multimediów to metoda ciągłego przesyłania treści multimedialnych z serwera, w której treści te zostały podzielone na części danych, które podczas odtwarzania można połączyć w określonej kolejności za pomocą żądania dotyczącego zakresu za pomocą protokołów takich jak DASH i HLS.
Poruszanie się po polach w aktualizacji rozszerzenia wskaźników internetowych
Rozszerzenie dotyczące wskaźników internetowych pokazuje teraz, jak wygląda sytuacja w Twojej okolicy w odniesieniu do rzeczywistych wrażeń użytkowników w tej dziedzinie.
Dostosowanie rozmiaru CSS do @font-face
Podczas ładowania czcionki internetowej można teraz dostosować jej skalę, aby znormalizować rozmiary czcionek w dokumencie i zapobiegać przesunięciu układu podczas przełączania się między czcionkami.
Tworzenie schematu kolorów
Podstawowe omówienie tworzenia dynamicznego i konfigurowalnego schematu kolorów
Kompresowanie obrazów w witrynie za pomocą formatu AVIF
Wyświetlanie obrazów w rozmiarach na komputery może wykorzystywać 2–4 razy więcej danych, niż jest to konieczne. Zamiast stosować uniwersalne podejście do obrazów, wyświetlaj obrazy w różnych rozmiarach na różnych urządzeniach.
Ewolucja skumulowanego przesunięcia układu w narzędziach internetowych
Od dziś zmiana CLS została wprowadzona w wielu narzędziach internetowych Chrome, takich jak Lighthouse, PageSpeed Insights i Raport na temat wygody użytkowania Chrome.
CSS dla wskaźników internetowych
W tym artykule omawiamy techniki związane z usługami porównywania cen służące do optymalizacji wskaźników internetowych.
Nowe funkcjonalne selektory pseudoklasy CSS :is() i :where()
Te pozornie niewielkie zmiany w składni selektora CSS przyniosą duże efekty.
Nowe szkolenie na temat progresywnych aplikacji internetowych jest już dostępne
Udostępniliśmy nowe, 6-częściowe szkolenie dotyczące progresywnych aplikacji internetowych, które obejmuje nową serię ćwiczeń z programowania, dzięki którym dowiesz się, jak tworzyć niezawodne, możliwe do zainstalowania i funkcjonalne aplikacje PWA.
Nowy sposób responsywny: projektowanie witryn w świecie opartym na komponentach
Funkcje multimedialne oparte na preferencjach użytkownika, zapytania w kontenerach i zapytania o multimedia w przypadku nowych typów ekranów, np. ekranów składanych, pozwolą nam wykorzystać godziny w nowej erze elastycznego projektowania witryn.
Przeprowadź migrację do wskazówek dotyczących klienta użytkownika
Strategie migracji witryny zamiast ciągu znaków klienta użytkownika do nowych wskazówek dotyczących klienta użytkownika.
Excalidraw i Fugu: ulepszanie podstawowych doświadczeń użytkownika
Relacja z przemówienia Thomasa Steinera z Google I/O 2021 zatytułowanego „Excalidraw i Fugu: ulepszone podstawowe czynności użytkownika”
Krótki opis nagłówków zabezpieczeń
Ten artykuł zawiera listę najważniejszych nagłówków zabezpieczeń, których możesz używać do ochrony witryny. Możesz go poznać, aby poznać funkcje zabezpieczeń internetowych i dowiedzieć się, jak wdrożyć je w swojej witrynie, a także uzyskać informacje, gdy potrzebujesz przypomnienia.
Moduły ES w skryptach service worker
Mechanizmy Service Worker mogą używać statycznego importu modułów ES, aby uzyskać dodatkowy kod jako alternatywę dla metody importScripts().
Tworzenie komponentu przewijającego multimedia
Podstawowe informacje o tworzeniu elastycznego widoku przewijanego w poziomie na telewizory, telefony, komputery itp.
Optymalizacja wskaźników internetowych za pomocą narzędzia Lighthouse
Dzisiaj omówimy nowe funkcje narzędzi Lighthouse, PageSpeed i Narzędzia deweloperskie, które pomogą Ci określić, jak możesz poprawić wskaźniki internetowe swojej witryny.
Korzystanie z asynchronicznych internetowych interfejsów API z WebAssembly
Dowiedz się, jak wywoływać asynchroniczne interfejsy internetowe API podczas kompilowania tradycyjnie synchronicznych języków do WebAssembly.
Kontrola skryptów innych firm
Skrypty innych firm, zwane też „tagami”, mogą powodować problemy z działaniem Twojej witryny, a tym samym być celem optymalizacji. Zanim jednak zaczniesz optymalizować dodane tagi, sprawdź, czy nie optymalizujesz tagów, których nie potrzebujesz. Z tego artykułu dowiesz się, jak oceniać żądania nowych tagów, zarządzać nimi i sprawdzać te istniejące.
Dostosuj nakładkę elementów sterujących oknami na pasku tytułu PWA
Dzięki funkcji nakładki elementów sterujących oknami deweloperzy mogą dostosować pasek tytułu zainstalowanych aplikacji PWA, aby wyglądały one bardziej jak aplikacje.
Wypełnianie formularzy haseł jednorazowych w elementach iframe z innych domen za pomocą interfejsu WebOTP API
Interfejs WebOTP API może teraz otrzymywać hasło jednorazowe z elementu iframe.
Pokonywanie barier za pomocą interfejsu DataTransfer API
Obiekt DataTransfer zawiera dane, które są przeciągane podczas operacji przeciągania i upuszczania. Może obejmować co najmniej 1 element danych, w każdym z tych typów danych. Z tego artykułu dowiesz się, co możesz zrobić za pomocą interfejsu DataTransfer API.
Tworzenie animacji podzielonego tekstu
Podstawowe informacje o tworzeniu animacji podzielonych liter i słów.
Rozwijanie wskaźnika CLS
Plany poprawy wskaźnika CLS, aby były bardziej sprawiedliwe w przypadku stron długoterminowych.
Zadowolenie deweloperów stron internetowych
Satysfakcja dla programistów stron internetowych to projekt Google mający na celu zbieranie informacji o potrzebach deweloperów stron internetowych. Celem jest stworzenie bardziej niezawodnej, przewidywalnej i interoperacyjnej platformy internetowej, która pozwala deweloperom inwestować w nią i jej ufać, a także wdrażać nowe funkcje i korzystać z nich w celu rozwijania platformy i firmy.
Tworzenie komponentu Ustawienia
Podstawowe informacje o tworzeniu komponentu ustawień z wykorzystaniem suwaków i pól wyboru.
Debuguj przesunięcia układu
Dowiedz się, jak identyfikować i rozwiązywać przesunięcia układu.
JavaScript: co to znaczy?
Ustalenie wartości argumentu „to” może być trudne w języku JavaScript. Zobacz, jak to zrobić...
Komponenty miniaplikacji
W tym rozdziale znajdziesz szczegółowe informacje na temat komponentów, które są dostępne na wszystkich platformach miniaplikacji.
Stosowanie zasad programowania miniaplikacji do przykładowego projektu
W tym rozdziale przedstawiamy przykładowy projekt zgodny z metodą „programowania miniaplikacji”.
Podsumowanie opinii programisty stron internetowych na temat miniaplikacji
Ten rozdział podsumowuje kolekcję miniaplikacji – myślenie, że nieszablonowe myślenie i inspirowanie się nie tylko z własnej bańki z pewnością może pomóc w budowaniu lepszej przyszłości w internecie.
Programowanie miniaplikacji
W tym rozdziale przedstawiamy sposób programowania miniaplikacji.
Projekty typu open source w miniaplikacji
W tym rozdziale przedstawiamy wybrane interesujące projekty open source aplikacji typu miniaplikacji.
Struktura, cykl życia i grupowanie projektu
W tym rozdziale opisujemy strukturę projektu, cykl życia i łączenie miniaplikacji w pakiety.
Co to jest H5 i QuickApp?
W tym rozdziale przedstawiamy tło dotyczące aplikacji H5 i QuickApp, które różnią się od miniaplikacji.
Znaczniki, styl, skrypt i aktualizowanie miniaplikacji
W tym rozdziale przyjrzymy się opcjom dodawania znaczników, stylów, skryptów i aktualizacji na różnych miniaplikacjach.
Strumienie – kompleksowy przewodnik
Interfejs Streams API umożliwia JavaScriptowi programowy dostęp do strumieni danych otrzymanych przez sieć i przetwarzanie ich zgodnie z potrzebami.
Tworzenie komponentu Karty
Podstawowe omówienie tworzenia komponentu kart podobnego do tych, które można znaleźć w aplikacjach na iOS i Androida.
Przewodnik po włączeniu izolacji zasobów z innych domen
Izolacja od zasobów z innych domen umożliwia stronom internetowym korzystanie z zaawansowanych funkcji, takich jak SharedSlateBuffer. Z tego artykułu dowiesz się, jak włączyć w witrynie izolację zasobów z innych domen.
Żądanie izolacji wydajności przy użyciu nagłówka Origin-Agent-Cluster
Nagłówek Origin-Agent-Cluster odcina dostęp synchroniczny do innych źródeł w tej samej domenie i zawiera wskazówki dla przeglądarki, które przekazują do źródła dedykowane zasoby.
Właściwość współczynnika proporcji CSS
Teraz łatwiej można uzyskać współczynnik proporcji obrazów i elementów dzięki nowej właściwości CSS współczynnika proporcji.
WebRTC jest teraz standardem W3C i IETF
Krótkie omówienie historii, architektury, przypadków użycia i przyszłości WebRTC.
Sprawdzone metody dotyczące karuzeli
Dowiedz się, jak zoptymalizować karuzele pod kątem skuteczności i łatwości obsługi.
Potrzebna opinia: jak ulepszyć dane dotyczące przesunięcia układu w przypadku długotrwałych stron
Poznaj nasze plany dotyczące ulepszenia danych Skumulowane przesunięcie układu i prześlij nam swoją opinię.
Kiedy używać protokołu HTTPS na potrzeby programowania lokalnego
Używanie http://localhost do programowania lokalnego jest zazwyczaj zalecane, z wyjątkiem niektórych szczególnych przypadków. Z tego posta dowiesz się, kiedy w lokalnej witrynie deweloperskiej musisz używać protokołu HTTPS. Zobacz też: jak używać
Używaj protokołu HTTPS na potrzeby programowania lokalnego
Większość czasu http://localhost zachowuje się jak HTTPS na potrzeby rozwoju. Istnieją jednak szczególne przypadki, takie jak niestandardowe nazwy hostów czy używanie bezpiecznych plików cookie w różnych przeglądarkach, w których musisz wyraźnie
Tworzenie komponentu bocznego
Podstawowe omówienie tworzenia elastycznego wysuwanego panelu bocznego
Ćwiczenia z programowania: tworzenie komponentu Sidenav
Dowiedz się, jak utworzyć komponent układu elastycznego wysuwanego panelu bocznego.
Ćwiczenia z programowania: wyśrodkowanie w CSS
Poznaj 5 różnych technik centrowania za pomocą CSS.
Środkowanie w CSS
Poddaj się 5 technikom centrowania, aby sprawdzić, która z nich jest najbardziej odporna na zmiany.
Twoja pamięć podręczna ❤️
Wydajność pierwszego wczytywania jest ważna, ale nie jest to jedyna wskazówka. Użytkownicy, którzy ponownie wczytają Twoją witrynę, skorzystają z pamięci podręcznej, aby uzyskać dostęp do zawartości. Dlatego tak ważne jest, aby witryna działała prawidłowo zarówno pod względem szybkości, jak i poprawności.
Worklety farb w różnych przeglądarkach i Houdini.how
Dowiedz się, jak zaimplementować interfejs Houdini Paint API w różnych przeglądarkach i poznaj świat workletów Houdini dzięki aplikacji Houdini.how.
Ćwiczenia z programowania dotyczące formularzy płatności
Poznaj sprawdzone metody korzystania z formularzy płatności.
Sprawdzone metody dotyczące formularzy jednorazowych SMS-ów
Typowym sposobem na potwierdzenie numeru telefonu użytkownika jest prośba o podanie hasła jednorazowego (hasła jednorazowego) przesłanego SMS-em. W tym poście znajdziesz sprawdzone metody tworzenia formularzy jednorazowych SMS-ów, które zapewnią użytkownikom większą wygodę.
Ćwiczenia z programowania dotyczące formularzy z myślą o rozwiązywaniu problemów
Poznaj sprawdzone metody korzystania z formularzy adresowych
Ćwiczenia z programowania dotyczące formularza rejestracyjnego
Używaj funkcji przeglądarki obsługujących wiele platform, aby stworzyć prosty, bezpieczny, dostępny i łatwy w obsłudze formularz rejestracyjny.
Sprawdzone metody dotyczące formularza rejestracyjnego
Ułatw użytkownikom rejestrację i logowanie się oraz zarządzanie szczegółami konta.
Sprawdzone metody dotyczące formularzy płatności i adresów
Zmaksymalizuj liczbę konwersji, pomagając użytkownikom w szybkim i łatwym wypełnianiu adresów i formularzy płatności.
Automatyzacja audytów za pomocą AutoWebPerf
Nowe modułowe narzędzie, które umożliwia automatyczne zbieranie danych o skuteczności z wielu źródeł.
Przegląd instancji roboczych
Jak mechanizmy robocze i skrypty service worker mogą zwiększyć wydajność witryny oraz kiedy je wykonywać, a kiedy z skryptów service worker.
Dwukierunkowa komunikacja z skryptami service worker
Jak utworzyć dwukierunkowy kanał komunikacji między stroną a skryptem service worker.
Rozgłaszaj aktualizacje stron z skryptami service worker
Jak mechanizmy Service Worker mogą aktywnie komunikować się ze stroną, aby informować o określonych zdarzeniach.
Przewodnik na temat imperatywnego buforowania
Jak komunikować mechanizm wyświetlania okna i skryptu service worker, aby wykonywać zadania związane z wydajnością, buforowaniem i trybem offline.
Wyłącz przyspieszenie myszy, aby zwiększyć komfort grania w gry FPS
Aplikacje internetowe mogą teraz wyłączyć przyspieszenie myszy podczas rejestrowania zdarzeń wskaźnika.
Tworzenie komponentu Relacje
Podstawowe omówienie sposobów tworzenia treści podobnej do Relacji na Instagramie w internecie.
Ćwiczenia z programowania: tworzenie komponentu Relacje
Dowiedz się, jak stworzyć w internecie coś podobnego do relacji na Instagramie.
Leniwe ładowanie na poziomie przeglądarki w systemach CMS
W tym poście znajdziesz wskazówki na temat wdrażania atrybutu wczytywania w systemach zarządzania treścią.
Schemeryzująca tę samą witrynę
Definicja „tej samej witryny” ewoluuje, aby uwzględniać schemat adresu URL, więc linki między wersjami HTTP i HTTPS witryny są liczone jako żądania z innej witryny. Domyślnie przejdź na protokół HTTPS, aby uniknąć problemów, gdy jest to możliwe, lub zapoznaj się z dalszymi informacjami o tym, jakie wartości atrybutów SameSite są potrzebne.
Ćwiczenia z programowania: tworzenie serwera powiadomień push
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.
Ćwiczenia z programowania: tworzenie klienta powiadomień push
Interaktywny samouczek krok po kroku, który pokazuje, jak utworzyć klienta, który subskrybuje powiadomienia push, wyświetla wiadomości push jako powiadomienia i anuluje ich subskrypcję.
Omówienie powiadomień push
Ogólne informacje o tym, czym są powiadomienia push, dlaczego warto z nich korzystać i jak działają.
Pomiary wykorzystania offline
Jak śledzić korzystanie z witryny w trybie offline, aby móc wyjaśnić, dlaczego powinniśmy ulepszyć działanie witryny w trybie offline.
Przykłady animacji CSS o wysokiej wydajności
Pokazanie, jak skuteczne techniki mogą tworzyć złożone i atrakcyjne animacje.
Signed Exchange (SXG)
SXG to mechanizm dostarczania, który umożliwia uwierzytelnianie pochodzenia zasobu niezależnie od sposobu jego dostarczenia.
CSS min(), max() i clamp()
Wartości minimalna, maksymalna i clamp zapewniają zaawansowane funkcje CSS, które pozwalają na bardziej elastyczne dostosowywanie stylu przy mniejszej liczbie blokad kodu. W tym poście pokazujemy, jak kontrolować rozmiar elementów, utrzymywać odpowiednie odstępy i implementować typografię płynną, korzystając z tych dobrze obsługiwanych funkcji matematycznych CSS.
Ulepszenia układu logicznego dzięki skrótom zależnym od przepływu
Nowe skróty właściwości logicznych i nowe właściwości wstawiane w Chromium.
Obsługa żądań dotyczących zakresu w instancji service worker
Upewnij się, że skrypt service worker wie, co robić, gdy żądana jest częściowa odpowiedź.
Jak tworzyć skuteczne animacje CSS
Aby zwiększyć skuteczność animacji CSS, w miarę możliwości używaj właściwości CSS „transform” i „przezroczystość” i unikaj wszystkiego, co może wywoływać układ lub obraz.
Dlaczego niektóre animacje są spowolnione?
Dbanie o dobre animacje to podstawa korzystania z internetu. W tym poście wyjaśniamy, dlaczego niektóre rodzaje animacji są skuteczniejsze od innych.
Steruj przesuwaniem, przechylaniem i powiększaniem kamery
Funkcje przesuwania, przechylania i powiększania w kamerach są wreszcie dostępne w przeglądarce.
Czym są wersje próbne origin przez firmy zewnętrzne?
Testowanie origin pozwala przetestować nową lub eksperymentalną funkcję platformy internetowej. Testowanie źródła przeprowadzonego przez firmę zewnętrzną umożliwia dostawcom treści umieszczanych na stronach wypróbowanie nowej funkcji w wielu
Wycieki pamięci odłączonego okna
Częstym wyciekiem pamięci jest odłączenie okna, które jest szczególnie trudne do znalezienia i naprawienia.
Tworzenie strony zastępczej offline
Dowiedz się, jak w prosty sposób utworzyć aplikację w trybie offline.
Twórz ciekawe kształty obrazów za pomocą właściwości clip-path w CSS
Używając przycinania w CSS, możemy sprawić, że wszystkie elementy naszego projektu nie będą wyglądały jak pudełko. Za pomocą różnych podstawowych kształtów lub SVG możesz utworzyć ścieżkę klipu. Następnie wytnij elementy, których nie chcesz wyświetlać.
Stosuj efekty do obrazów z właściwością CSS's mask-image
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.
Punktory niestandardowe w kodzie CSS ::marker
Za pomocą CSS możesz dostosować kolor, rozmiar lub typ liczb albo punktorów w elementach „” lub „`”.
Pomóż użytkownikom łatwo zmieniać hasła, dodając dobrze znany adres URL do zmiany hasła
Przekierowując żądania na adres /.well-known/change-password na adres URL zmiany hasła, możesz pozwolić użytkownikom na łatwiejszą aktualizację haseł.
Obsługa opcjonalnych danych karty za pomocą skryptu service worker
Po zarejestrowaniu internetowej aplikacji płatniczej może ona przyjmować żądania płatności od sprzedawców. Z tego artykułu dowiesz się, jak zarządzać transakcją płatniczą wykonywanej przez skrypt service worker w czasie działania.
Organizowanie transakcji płatniczych z użyciem skryptu service worker
Po zarejestrowaniu internetowej aplikacji płatniczej może ona przyjmować żądania płatności od sprzedawców. Z tego artykułu dowiesz się, jak zarządzać transakcją płatniczą wykonywanej przez skrypt service worker w czasie działania.
ARIA: trucizna czy antidotum?
Jak kłamstwo w czytnikach ekranu pomaga pozbyć się problemów z ułatwieniami dostępu, chociaż nie potrzymuje soli.
Debugowanie wycieków pamięci w WebAssembly za pomocą Emscripten
Dowiedz się, jak za pomocą WebAssembly wprowadzać do internetu biblioteki napisane w innych językach w bezpieczny i idiomatyczny sposób.
content-visibility: nowa właściwość CSS, która zwiększa wydajność renderowania;
Właściwość CSS content-visibility umożliwia zwiększenie wydajności renderowania treści internetowych przez pomijanie renderowania treści znajdujących się poza ekranem. Z tego artykułu dowiesz się, jak użyć tej nowej właściwości CSS, aby skrócić czas wczytywania początkowego, używając słowa kluczowego auto. Poznasz też specyfikację kontenera CSS i inne wartości widoczności treści, które dają większą kontrolę nad sposobem renderowania treści w przeglądarce.
Odblokowuję dostęp do schowka
Interfejs Async Clipboard API upraszcza kopiowanie i wklejanie, co ułatwia uprawnienia.
Sprawdzone metody dotyczące zasad dotyczących witryn odsyłających i witryn odsyłających
Rozważ ustawienie zasady dotyczącej strony odsyłającej „strict-origin-when-cross-origin”. Zachowuje ona większość użyteczności strony odsyłającej, jednocześnie minimalizując ryzyko wycieku danych z innych domen.
Przeglądarka na Androidzie
Dowiedz się, jak można używać różnych komponentów do renderowania treści internetowych w aplikacjach na Androida.
Tworzenie aplikacji PWA w Google, część 1
czego zespół Bulletin nauczył się o skryptach service worker podczas opracowywania progresywnych aplikacji internetowych (PWA).
Monitorowanie wydajności za pomocą Lighthouse CI
Dowiedz się, jak skonfigurować Lighthouse CI i zintegrować ją z przepływami pracy programisty.
Projektowanie wygody użytkowników kluczy dostępu na kontach Google
Zwiększamy bezpieczeństwo i wygodę użytkowników kont Google.
@property: nadawanie supermocy zmiennym CSS
Dowiedz się, jak implementować niestandardowe właściwości CSS za pomocą pisania semantycznego, wartości zastępczych i innych elementów bezpośrednio w pliku CSS.
Omówienie internetowych aplikacji płatniczych
Dowiedz się, jak dostosować internetową aplikację płatniczą do obsługi płatności internetowych i zapewnić klientom większą wygodę.
Powiązanie szybkości witryny z danymi dotyczącymi firmy
Wykorzystuj testy A/B do oceny wpływu szybkości witryny na dane biznesowe.
Dostarczanie informacji o dostawie i danych kontaktowych z aplikacji płatniczej na Androida
Dowiedz się, jak zmodyfikować aplikację płatniczą na Androida, aby podać użytkownikowi wybrany adres dostawy oraz informacje kontaktowe, gdy sprzedawca poprosi o to za pomocą interfejsu Payment Request API.
Buforowanie skryptu service worker i buforowanie HTTP
Zalety i wady stosowania spójnych lub różnych logiki wygaśnięcia w warstwach pamięci podręcznej instancji Service Worker i warstwach pamięci podręcznej HTTP.
Rejestrowanie internetowej aplikacji płatniczej
Dowiedz się, jak zarejestrować internetową aplikację płatniczą w przeglądarce klienta. Dowiesz się też, jak je debugować.
Obsługa żądań nawigacji
Żądania nawigacji to żądania kodu HTML wysyłane za każdym razem, gdy wpiszesz nowy adres URL na pasku nawigacyjnym lub klikniesz link na stronie. Największy wpływ na wydajność mają mechanizmy Service Worker. Dzięki zastosowaniu mechanizmów Service Worker do odpowiadania na żądania bez oczekiwania na połączenie z siecią możesz zapewnić niezawodne i odporne nawigacje.
Korzystanie z raportu na temat użytkowania Chrome do sprawdzenia skuteczności w terenie
Raport na temat użytkowania Chrome (nieformalnie nazywany „CrUX) to publiczny zbiór danych przedstawiających rzeczywiste wrażenia użytkowników i obecne w milionach stron internetowych. W przeciwieństwie do danych laboratoryjnych dane na temat użytkowania Chrome w rzeczywistości pochodzą od użytkowników, którzy wyrazili na to zgodę.
Idealne renderowanie dzięki urządzeniu devicePixelContentBox
Od wersji Chrome 84 usługa ResizeObserver obsługuje nowy pomiar pola o nazwie device-pixel-content-box, który mierzy wymiary elementu w pikselach fizycznych. Jest to konieczne do renderowania grafiki o doskonałej rozdzielczości, zwłaszcza na ekranach o dużej gęstości.
10 nowoczesnych układów w jednym wierszu kodu CSS
W tym poście wyróżniamy kilka zaawansowanych wierszy CSS, które wykonują ciężkie zadania i pomagają tworzyć solidne, nowoczesne układy.
Podsumowanie transmisji web.dev NA ŻYWO
Podsumowanie najważniejszych wiadomości i aktualizacji ogłoszonych podczas 3-dniowego wydarzenia dla społeczności online oraz przypomnienie o nadchodzących wydarzeniach regionalnych.
Sprawdzone metody dotyczące formularza logowania
Używaj funkcji przeglądarki działających na wielu platformach, aby tworzyć bezpieczne, dostępne i łatwe w obsłudze formularze logowania.
Tworzenie formularza logowania na podstawie funkcji przeglądarki obsługujących wiele platform
Używaj funkcji przeglądarki działających na wielu platformach, aby stworzyć prosty, bezpieczny, dostępny i łatwy w obsłudze formularz logowania.
Stopniowo ulepszaj progresywną aplikację internetową
Dowiedz się, jak stopniowo ulepszać progresywną aplikację internetową tak, aby stała się przydatna we wszystkich nowoczesnych przeglądarkach, a jednocześnie zawiera zaawansowane funkcje przeglądarki obsługujące nowe funkcje internetowe, takie jak dostęp do systemu plików, dostęp do schowka systemowego, pobieranie kontaktów, okresowa synchronizacja w tle, blokada wybudzania ekranu, funkcje udostępniania w internecie i wiele innych.
Narzędzia dla programistów do debugowania problemów z językiem JavaScript w wyszukiwarce Google
Jak debugować problemy SEO na poszczególnych stronach lub w całej witrynie.
Tworzenie elastycznych funkcji wyszukiwania za pomocą Workbox
Jak wdrożyć odporne wyszukiwanie w Workbox przy użyciu synchronizacji w tle i interfejsu Push API.
Dodawanie multimediów do strony internetowej
Umieść plik multimedialny na stronie internetowej, używając tagów i.
Fragmenty tekstu pogrubione linki, do których nikt wcześniej nie linkował
Fragmenty tekstu pozwalają określić fragment tekstu we fragmencie adresu URL. Otwierając adres URL zawierający taki fragment tekstu, przeglądarka może go uwydatnić lub zwrócić na niego uwagę użytkownika.
Niech Twoja PWA przypomina aplikację
Dowiedz się, jak sprawić, aby progresywna aplikacja internetowa wyglądała jak „prawdziwa” aplikacja. Naucz się, jak implementować wzorce aplikacji na danej platformie za pomocą technologii internetowych.
Jak zgłosić błąd w przeglądarce
Informowanie dostawców przeglądarek o problemach znalezionych w przeglądarce, na konkretnym urządzeniu lub na określonej platformie to integralna część ulepszenia platformy internetowej.
Pomiar wydajności za pomocą modelu RAIL
Model RAIL umożliwia projektantom i programistom wiarygodne skoncentrowanie się na zadaniach związanych z optymalizacją wydajności, które mają największy wpływ na wrażenia użytkownika. Dowiedz się, jakie cele i wytyczne wyznacza model RAIL oraz jakich narzędzi możesz używać, aby je osiągnąć.
Przyspiesz nawigację w aplikacji React dzięki szybkiemu linkowi
Quicklink to biblioteka przyspieszająca kolejne ładowanie stron przez pobieranie z wyprzedzeniem linków w widocznym obszarze w czasie bezczynności.
Chroń swoje zasoby przed atakami internetowymi za pomocą funkcji Fetch Metadata
Fetch Metadata to nowa funkcja na platformie internetowej, która umożliwia serwerom ochronę przed atakami z innych domen.
Zmiana kolejności treści
Gdy tworzysz układ za pomocą CSS, musisz uważać, by użytkownicy, którzy korzystają z nawigacji przy użyciu klawiatury, nie przeszkadzali sobie w nawigacji.
Ulepszenia interfejsu Web Animations API w Chromium 84
Tworzenie animacji w internecie stanie się jeszcze prostsze.
Przewodnik dla deweloperów aplikacji płatniczych na Androida
Dowiedz się, jak dostosować aplikację płatniczą na Androida do obsługi płatności internetowych i zapewnić klientom większą wygodę.
Cykl życia transakcji płatności
Dowiedz się, jak sprzedawcy integrują aplikacje płatnicze, jak działają transakcje płatności za pomocą interfejsu Payment Request API i co umożliwia korzystanie z płatności internetowych.
Korzystanie z funkcji płatności internetowych w aplikacjach do wykonywania płatności
Płatności internetowe mają na celu zapewnienie bezproblemowego procesu płatności w internecie. Dowiedz się, jak to działa i jakie są związane z nim korzyści, i przygotuj się do zintegrowania swojej aplikacji płatniczej z płatnościami internetowymi.
Więcej zmiennych opcji czcionek w interfejsie systemu macOS w Chromium 83
W Chromium 80 występowała regresja wagi czcionki w interfejsie systemu w systemie macOS. W Chromium 83 warto poczekać z powodu jego awarii i z nowymi supermocami w postaci rozdzielczości.
Szybko wykonuj swoje zadania dzięki skrótom do aplikacji
Skróty do aplikacji zapewniają szybki dostęp do kilku typowych działań, których użytkownicy często potrzebują.
Jak progresywne aplikacje internetowe mogą pomóc w osiągnięciu sukcesu biznesowego
Opracuj solidny argument przemawiający za Twoją PWA. Dowiedz się, kiedy warto zainwestować i jak możesz zmierzyć jej skuteczność.
Przygotowanie do usunięcia z pamięci podręcznej aplikacji
Szczegóły dotyczące Chrome i innych przeglądarek planują usunąć pamięć podręczną AppCache.
Pamięć trwała
Pamięć trwała może pomóc chronić najważniejsze dane przed usunięciem i zmniejszyć ryzyko utraty danych.
Jak zdefiniować strategię dotyczącą instalacji
Sprawdzone metody łączenia różnych opcji instalacyjnych w celu zwiększenia liczby instalacji oraz uniknięcia konkurencji na platformie i kanibalizacji.
Jak CommonJS zwiększa Twoje pakiety
Moduły CommonJS są bardzo dynamiczne, co uniemożliwia optymalizatorom JavaScript i pakietom przeprowadzanie na ich podstawie zaawansowanej optymalizacji.
Profilowanie aplikacji Web Audio w Chrome
Dowiedz się, jak profilować wydajność aplikacji Web Audio w Chrome, korzystając z „about://tracing” i rozszerzenia **WebAudio** w Narzędziach deweloperskich w Chrome.
Dlaczego zaawansowane funkcje są potrzebne do obsługi zasobów z innych domen
Niektóre internetowe interfejsy API zwiększają ryzyko ataków z kanału bocznego, takich jak Spectre. Aby ograniczyć to ryzyko, przeglądarki oferują izolowane środowisko nazywane izolowanym od zasobów z innych domen. Dowiedz się, dlaczego izolacja zasobów z innych domen jest potrzebna do korzystania z zaawansowanych funkcji, takich jak `SharedSlateBuffer`, `performance.measureUserAgentSpecMemory()` i zegarek w wysokiej rozdzielczości z większą precyzją.
Szybsze wczytywanie stron Next.js i Gatsby dzięki szczegółowemu podziałowi na segmenty
Dowiedz się, w jaki sposób ulepszyliśmy dane wyjściowe kompilacji zarówno Next.js, jak i Gatsby, aby zminimalizować duplikowanie kodu i poprawić szybkość wczytywania stron.
„Ta sama witryna” i „ta sama witryna”
Terminy „same-site” i „same-origin” są często przywoływane, ale często są niewłaściwie rozumiane. Z tej strony dowiesz się, czym są i czym się różnią.
Monitoruj całkowite wykorzystanie pamięci przez strony internetowe za pomocą narzędziameasureUserAgentSpecMemory()
Dowiedz się, jak mierzyć wykorzystanie pamięci przez stronę internetową w środowisku produkcyjnym, aby wykrywać regresje.
Odizolowanie witryny od zasobów z innych domen za pomocą COOP i COEP
Niektóre internetowe interfejsy API zwiększają ryzyko ataków z kanału bocznego, takich jak Spectre. Aby ograniczyć to ryzyko, przeglądarki oferują izolowane środowisko nazywane izolowanym od zasobów z innych domen. Wykorzystanie COOP i COEP do skonfigurowania takiego środowiska i włączenia zaawansowanych funkcji, takich jak `SharedSlateBuffer`, `performance.measureUserAgentSpecMemory()` lub licznik czasu w wysokiej rozdzielczości z większą precyzją.
Blog inżynierski web.dev nr 1: jak tworzymy witrynę i korzystamy z komponentów sieciowych
Z tego pierwszego posta napisanego przez zespół inżynierów web.dev dowiesz się, jak tworzymy witrynę, w tym jak korzystamy z platform Eleventy i komponentów internetowych.
Ulepszyliśmy domyślny styl trybu ciemnego za pomocą właściwości CSS schematu kolorów i odpowiedniego metatagu.
Właściwości CSS schematu kolorów i odpowiadający mu metatag pozwalają programistom wybrać na swoich stronach domyślne motywacyjne ustawienia arkusza stylów klienta użytkownika, takie jak elementy sterujące formularzem, paski przewijania czy kolory systemowe CSS. Jednocześnie funkcja ta zapobiega stosowaniu przez przeglądarki jakichkolwiek przekształceń.
Upewnij się, że Twoja witryna jest dostępna i użyteczna dla wszystkich w okresie pandemii COVID-19
Jak zapewnić, że główna funkcja witryny jest zawsze dostępna, bezpieczna, użyteczna, łatwa do znalezienia i szybka.
Elementy dotykowe z ułatwieniami dostępu
Ważne jest, aby elementy interaktywne miały odpowiednią ilość miejsca, jeśli są używane na urządzeniach mobilnych lub z ekranem dotykowym. Pomoże to wszystkim, szczególnie osobom z niepełnosprawnością ruchową.
Ułatwienia dostępu – kolor i kontrast
Dowiedz się, jak zwiększyć dostępność stron, poprawiając kolory i kontrast.
Naprawianie przeciążonego serwera
Jak określić wąskie gardło serwera i szybko rozwiązać powodowane przez nie problemy, poprawić wydajność serwera oraz zapobiec regresjom.
Elastyczne projektowanie witryn z ułatwieniami dostępu
Wiemy, że elastyczne projektowanie stron to dobry pomysł, by zadbać o wygodę użytkowników na wielu urządzeniach. Warto jednak pamiętać, że responsywność to dobry pomysł, jeśli chodzi o ułatwienia dostępu.
Zapobiegaj lukom w zabezpieczeniach witryn opartych na DOM, korzystając z zaufanych typów
Przedstawiamy zaufane typy – interfejs API przeglądarki zapobiegający opartym na modelu DOM skryptach typu cross-site scripting w nowoczesnych aplikacjach internetowych.
Używanie PWA w aplikacji na Androida
Jak otworzyć progresywną aplikację internetową w aplikacji na Androida.
Zapobiegaj przesuwaniu układu i przebłyskom niewidocznego tekstu (FOIT) dzięki wstępnym wczytywaniu opcjonalnych czcionek
Optymalizując cykle renderowania, Chrome 83 eliminuje przesunięcie układu podczas wstępnego wczytywania opcjonalnych czcionek. W połączeniu z font-displayą: opcjonalny to najskuteczniejszy sposób na zapewnienie bezproblemowego renderowania czcionek niestandardowych.
Jak dystrybuować podpisane wymiany HTTP (SXG) za pomocą nginx
Pobieranie i wyświetlanie plików SXG przy użyciu nginx oraz wyzwania związane z pobieraniem zasobów podrzędnych z wyprzedzeniem.
Jak skonfigurować podpisane wymiany HTTP (SXG) przy użyciu nginx
Jak wygenerować certyfikat TLS z rozszerzeniami SXG, zainstalować narzędzia do generowania plików SXG i skonfigurować nginx do obsługi plików SXG.
Zoptymalizuj obrazy tła CSS za pomocą zapytań o media
Zapytania o multimedia służą do wysyłania obrazów o nieodpowiedniej wielkości. Jest to technika znana jako obrazy elastyczne.
Rozwiązywanie problemów z szybkością witryny w różnych funkcjach
Jak inne działy mogą przyczynić się do sukcesu Twojego projektu optymalizacji szybkości witryny
Przyciąganie przewijane po zmianie układu
Od wersji Chrome 81 przewijaki pozostają przyciągane po zmianie układu strony. Oznacza to, że nie musisz już dodawać detektorów zdarzeń, aby wymusić ponowne przyciąganie.
Jak skonfigurować Signed Exchange przy użyciu programu Web Packager
Dowiedz się, jak obsługiwać Signed Exchange (SXG) za pomocą programu Web Packager.
Jak zapewnić własny proces instalacji aplikacji
Użyj zdarzenia beforeinstallprompt, aby zapewnić użytkownikom niestandardową, bezproblemową instalację aplikacji.
Rzeczywistość rozszerzona: być może już to wiesz
Jeśli już znasz interfejs WebXR Device API, ucieszy Cię informacja, że niewiele się w nim znajduje. Uruchamianie sesji WebXR wygląda prawie tak samo. Realizacja pętli ramki działa w dużej mierze tak samo. Różnice wynikają z konfiguracji, które umożliwiają odpowiednie wyświetlanie treści w rzeczywistości rozszerzonej.
Umieszczanie wirtualnych obiektów w widoku rzeczywistego
WebXR Hit Test API to udoskonalenie rzeczywistości rozszerzonej, które umożliwia umieszczanie obiektów wirtualnych w widoku z prawdziwego świata.
Rzeczywistość wirtualna w internecie pojawia się w części II
Rzeczywistość wirtualna pojawiła się w internecie w Chrome 79. Ta wersja, oparta na interfejsie WebXR Device API, stanowi podstawę dla rzeczywistości rozszerzonej i wirtualnej. Ten artykuł jest drugi z serii, skupiający się na pętli klatek, czyli części sesji XR, w ramach której obrazy są wyświetlane widzowi. Interfejs WebXR Device API będzie wkrótce obsługiwał inne przeglądarki, m.in. Firefox Reality, Oculus Browser, Edge i Magic Leap Helio.
Rozwijanie ekosystemu platformy internetowej
Dowiedz się, jak Chrome inwestuje w wiele narzędzi open source z myślą o rozwijaniu ekosystemu JavaScriptu
Czym są progresywne aplikacje internetowe?
Wprowadzenie do progresywnych aplikacji internetowych (PWA) i 3 filary, które odróżniają je od innych aplikacji internetowych.
Integracja PWA z wbudowanymi interfejsami udostępniania dzięki Workbox
Jak rejestrować trasy w Workbox, aby progresywna aplikacja internetowa wyświetlała się w interfejsach udostępniania na poziomie systemu razem z aplikacjami na poszczególnych platformach.
Obsługa ikon adaptacyjnych w PWA z ikonami z maskowaniem
Ikony z możliwością maskowania to format, który daje większą kontrolę i umożliwia korzystanie z adaptacyjnych ikon w progresywnej aplikacji internetowej. Ikona z maskowaniem może wyglądać świetnie na wszystkich urządzeniach z Androidem.
Ulepszanie odrzucania strony w synchronicznej funkcji XMLHttpRequest()
Często w momencie zamknięcia strony lub aplikacji są widoczne nieprzesłane statystyki lub inne dane. Witryny używają synchronicznego wywołania XMLHttpRequest(), aby strona lub aplikacja była otwarta, dopóki jej dane nie zostaną przesłane na serwer. Wpływa to negatywnie na wrażenia użytkownika i ignoruje lepsze sposoby oszczędzania danych. Aby rozwiązać ten problem, w Chrome 80 wprowadziliśmy niedawno zmianę w specyfikacji.
Podział sieci na wątki za pomocą instancji roboczych modułów
Procesory modułowe ułatwiają odblokowanie wątku głównego przez przeniesienie drogiego kodu do wątku w tle przy jednoczesnym zachowaniu ergonomicznej i wydajności standardowych modułów JavaScript.
Wczytywanie adaptacyjne: poprawianie wydajności internetu na wolniejszych urządzeniach
Poznaj wzorzec wczytywania adaptacyjnego, jak go wdrożyć i jak Facebook, Tinder, eBay i inne firmy wykorzystują wczytywanie adaptacyjne w środowisku produkcyjnym.
Szybkie zmiany narzędzi: najważniejsze informacje z Chrome Developer Summit 2019
Przeczytaj o najnowszych rozwiązaniach związanych z narzędziami do pomiaru szybkości, w tym o nowych danych dotyczących wydajności, aktualizacjach PageSpeed Insights i Raportu na temat użytkowania Chrome (CrUX) oraz statystyk przygotowanych przez Web Almanac na temat analizy ekosystemu internetowego.
Użyj robotów internetowych do uruchamiania JavaScriptu poza głównym wątkiem przeglądarki
Główny wątek przeglądarki jest strasznie przeciążony. Przeniesienie kodu z głównego wątku za pomocą pracowników internetowych może znacznie zwiększyć niezawodność i wygodę użytkowników aplikacji.
Opinia z ankiety na temat optymalizacji obrazów w lecie 2019 r.
Komentarze respondentów ankiety na temat różnych technik optymalizacji obrazów.
Tworzenie serwera powiadomień push
Z tego ćwiczeń z programowania dowiesz się, jak utworzyć serwer powiadomień push.
Integracja z interfejsem użytkownika systemu operacyjnego za pomocą interfejsu Web Share API
Dzięki interfejsowi Web Share API aplikacje internetowe mogą korzystać z takich samych funkcji udostępniania jak aplikacje na danej platformie. Interfejs Web Share API umożliwia aplikacjom internetowym udostępnianie linków, tekstu i plików innym aplikacjom zainstalowanym na urządzeniu w taki sam sposób jak aplikacje na danej platformie.
Podział kodu z dynamicznymi importami w Next.js
Jak przyspieszyć działanie aplikacji Next.js dzięki podziałowi kodu i strategiom inteligentnego ładowania W tym poście opisujemy różne typy dzielenia kodu oraz wyjaśniamy, jak używać dynamicznych importów, aby przyspieszyć działanie aplikacji
Domyślna wydajność w Next.js
Next.js zajmuje się wieloma optymalizacjami w aplikacji React, dzięki czemu nie musisz: Next.js to framework React z wbudowanymi optymalizacjami pod kątem wydajności. Głównym założeniem tej platformy jest zapewnienie, aby aplikacje uruchamiały się
Jak AMP może zagwarantować szybkość działania aplikacji Next.js
Poznaj zalety i zalety obsługi stron AMP w aplikacji Next.js AMP to platforma komponentów internetowych, która gwarantuje szybkie wczytywanie stron. Plik Next.js ma wbudowaną obsługę stron AMP. W tym przewodniku pokrótce opisujemy, jak AMP gwarantuje
Wstępne pobieranie tras w Next.js
Jak Next.js przyspiesza nawigację dzięki wstępnemu pobieraniu tras i jak go dostosować. Z tego artykułu dowiesz się, jak działa przekierowywanie w Next.js, jak jest ono optymalizowane pod kątem szybkości i jak je dostosowywać do swoich potrzeb. W
Rzeczywistość wirtualna w internecie
Rzeczywistość wirtualna pojawiła się w internecie w Chrome 79. Ta wersja interfejsu WebXR Devicer API jest podstawą zarówno rzeczywistości rozszerzonej, jak i wirtualnej. Ten artykuł jest pierwszym z serii, który przedstawia podstawowe pojęcia i opisuje, jak wziąć udział w sesji XR. Interfejs WebXR Device API będzie wkrótce obsługiwał inne przeglądarki, m.in. Firefox Reality, Oculus Browser, Edge i Magic Leap Helio.
Przepisy na ciastka SameSite
Witryny mogą teraz bezpośrednio oznaczać pliki cookie do użytku w innych witrynach. Dowiedz się, jak oznaczać pliki cookie, aby mieć pewność, że własne pliki cookie i pliki cookie innych firm nie przestaną działać po wprowadzeniu tej zmiany.
Czym są pliki cookie
Dowiedz się więcej o działaniu plików cookie i o tym, co to są własne pliki cookie i pliki cookie innych firm.
Szybkie reklamy mają znaczenie
Poznaj wartość szybkich reklam i dowiedz się, jak brać pod uwagę szybkość reklam.
Korzystaj z powiadomień push, aby angażować użytkowników i zachęcać ich do ponownego zaangażowania
Korzystaj z powiadomień push, aby angażować użytkowników dzięki ukierunkowanym i aktualnym informacjom.
Pierwsze kroki z interfejsem Notification API
Z tego ćwiczeń z programowania dowiesz się, jak prosić użytkownika o zgodę i wysyłać powiadomienia.
Używanie skryptu service worker do zarządzania powiadomieniami
Z tego ćwiczeń z programowania dowiesz się, jak zarządzać powiadomieniami za pomocą skryptu service worker.
Naprawianie niestabilności układu
Przewodnik po korzystaniu z WebPageTest do identyfikowania i rozwiązywania problemów z niestabilnością układu.
Techniki przyspieszające ładowanie aplikacji internetowych, nawet na telefonach z podstawową przeglądarką.
Telefony z podstawową przeglądarką zyskują na popularności i są popularne, zwłaszcza na rynkach wschodzących, na których sieć 2G jest normą. Oto jak stworzyliśmy klon mobilnego Minesweepera PROXX – szybko ładujący się na telefonach z podstawową przeglądarką przez 2G.
Bardziej inteligentne właściwości niestandardowe dzięki nowemu interfejsowi API firmy Houdini
Choć zmienne CSS są przydatne, ciężko się z nimi pracować, ponieważ mogą przyjmować dowolną wartość i być zastępowane, a nie można używać razem z nimi przejść. Poziom 1 interfejsu API właściwości i wartości CSS rozwiązuje te problemy.
Dwa sposoby pobierania z wyprzedzeniem: tagi <link> oraz nagłówki HTTP
Dowiedz się, jak przyspieszyć nawigowanie w przyszłości dzięki pobieraniu zasobów z wyprzedzeniem.
Pobieraj zasoby z wyprzedzeniem, aby przyspieszyć przyszłą nawigację
Więcej informacji na temat atrybutu rel=prefetch i sposobu korzystania z niego.
Naprawianie treści mieszanej
Dowiedz się, jak naprawić w witrynie błędy związane z treścią o różnych ustawieniach SSL, aby chronić użytkowników i mieć pewność, że cała treść się wczyta.
Co to jest treść mieszana?
Treści mieszane występują wtedy, gdy początkowy kod HTML jest ładowany przez bezpieczne połączenie HTTPS, a inne zasoby – przez niezabezpieczone połączenie HTTP.
Więcej niż obrazy i podstawowe reklamy wideo w internecie
Badania pokazują, że filmy w internecie zwiększają zaangażowanie i sprzedaż. Nawet jeśli film nie został jeszcze dodany do Twoich witryn, to tylko kwestią czasu, aż to zrobisz.
Dodawanie ikony Apple Touch do progresywnej aplikacji internetowej
Interaktywna prezentacja, która pokazuje, jak określić, która ikona ma się wyświetlać na ekranach głównych iOS.
Odtwarzacz internetowy
Platforma internetowa jest obecnie bardzo dopracowana pod kątem tworzenia gier. Kluczem do stworzenia nowoczesnej gry internetowej jest stosowanie sprawdzonych metod projektowania gier i zarabiania. Ten post zawiera wskazówki, które pomogą Ci osiągnąć ten cel.
Progresywne aplikacje internetowe w witrynach wieloźródłowych
Architektura wielu źródeł wiążą się z wieloma wyzwaniami podczas tworzenia PWA. Poznaj dobre i złe sposoby wykorzystania wielu źródeł oraz sposoby obejścia tego problemu z tworzeniem PWA w witrynach wieloźródłowych.
Zoptymalizuj wczytywanie i renderowanie czcionek WebFont
W tym poście wyjaśniamy, jak wczytywać czcionki WebFonts, aby zapobiec przesunięciu układu i pustym stronom, gdy czcionki WebFonts podczas wczytywania strony nie są dostępne.
Zmniejsz rozmiar czcionki internetowej
W tym poście wyjaśniono, jak zmniejszyć rozmiar czcionek WebFonts używanych w witrynie, tak aby dobra typografia nie oznaczała powolnego działania strony.
Tworzenie progresywnej aplikacji internetowej za pomocą interfejsu wiersza poleceń Angular
Dowiedz się, jak tworzyć progresywne aplikacje w Angular, które można zainstalować.
Efektywne wczytywanie kodu JavaScript innej firmy
Dowiedz się, jak skrócić czas wczytywania i poprawić wygodę użytkowników, unikając typowych błędów związanych z używaniem skryptów innych firm.
Zidentyfikuj powolny kod JavaScript innej firmy
Dowiedz się, jak za pomocą Lighthouse i Narzędzi deweloperskich w Chrome wykrywać wolno działające zasoby innych firm.
Optymalizacja obrazów za pomocą sieci CDN z obrazami
Rozważ użycie sieci CDN z obrazami, by zoptymalizować obrazy w witrynie i ograniczyć koszty przesyłania danych użytkownikom.
Wydajność JavaScriptu innej firmy
W tym poście opisujemy typowe rodzaje kodu JavaScript innych firm oraz występujące w nich problemy z wydajnością. Znajdziesz w nim też ogólne wskazówki dotyczące optymalizowania skryptów zewnętrznych.
Bardziej zaawansowane elementy sterujące formularzem
Nowe funkcje platformy internetowej ułatwiają tworzenie niestandardowych elementów, które działają jak wbudowane elementy sterujące formularza.
Optymalizacja JavaScriptu innej firmy
Dowiedz się więcej o technikach optymalizacji powolnych zasobów innych firm z pomocą Lighthouse.
Nawiąż połączenia sieciowe wcześniej, aby poprawić postrzeganą szybkość stron
Więcej informacji na temat wskazówek dotyczących zasobów rel=preconnect i rel=dns-prefetch oraz korzystania z nich.
Twórz tła w stylu systemu operacyjnego za pomocą filtra tła
Dowiedz się, jak dodawać do elementów interfejsu w internecie efekty tła, takie jak rozmycie i przezroczystość, za pomocą właściwości CSS „tle-filter”.
Dbaj o aktualność treści dzięki funkcji nieaktualnej, działającej w ramach ponownej weryfikacji
Nieaktualny podczas-ponownej weryfikacji pomaga deweloperom zachować równowagę między natychmiastowym ładowaniem treści z pamięci podręcznej a aktualnością – dzięki temu w przyszłości będą wykorzystywane aktualizacje treści z pamięci podręcznej.
Wirtualizacja dużych list za pomocą Angular CDK
Dowiedz się, jak zwiększyć elastyczność dużych list dzięki wdrożeniu przewijania wirtualnego za pomocą pakietu Angular Komponent Dev Kit.
Optymalizowanie wykrywania zmian w Angular
Dowiedz się, jak zoptymalizować wykrywanie zmian w aplikacji Angular, by zwiększyć jej reakcję.
Strategie wstępnego wczytywania trasy w Angular
Dowiedz się, jak korzystać ze strategii wstępnego wczytywania Angular, aby przyspieszyć działanie aplikacji.
Dostosowanie filmu do wyświetlania obrazów na podstawie jakości sieci
Dowiedz się, jak używać interfejsu Network Information API, aby dostosowywać treści na podstawie jakości sieci.
Szybsza nawigacja w internecie dzięki predykcyjnemu pobieraniu z wyprzedzeniem
Podział kodu umożliwia przyspieszenie działania aplikacji, ale może spowalniać późniejszą nawigację. Pobieranie z wyprzedzeniem to skuteczny sposób korzystania z analizy danych do inteligentnego pobierania z wyprzedzeniem tego, co użytkownik prawdopodobnie użyje w następnej kolejności, co pozwala zoptymalizować wykorzystanie sieci.
Kontrola ułatwień dostępu w aplikacji Angular za pomocą Codelyzer
Dowiedz się, jak ułatwić dostęp do swojej aplikacji Angular za pomocą Codelyzera.
Buforowanie z użyciem skryptu service worker Angular
Dowiedz się, jak użyć skryptu service worker Angular do wstępnego buforowania zasobów statycznych w aplikacji.
Budżety wydajności za pomocą interfejsu wiersza poleceń Angular
Dowiedz się, jak używać budżetów wydajności bezpośrednio w interfejsie wiersza poleceń Angular.
prefers-color-scheme: Witaj ciemności, mój stary przyjacielu
Wiele urządzeń obsługuje teraz szeroki system operacyjny w trybie ciemnym lub z ciemnego motywu. W tym poście wyjaśniamy, jak tryb ciemny może być obsługiwany na stronach internetowych, zawiera listę sprawdzonych metod i element niestandardowy o nazwie przełącznik trybu ciemnego, który umożliwia programistom stron internetowych oferowanie użytkownikom sposobu zastępowania ustawień na poziomie systemu operacyjnego na określonych stronach internetowych.
Podział kodu na poziomie trasy w Angular
Dowiedz się, jak zmniejszyć początkowy pakiet aplikacji za pomocą podziału kodu na poziomie trasy.
Pierwsze kroki: optymalizacja aplikacji Angular
Dowiedz się, jak sprawić, aby Twoja aplikacja Angular była szybsza, bardziej niezawodna, wykrywalna, instalowana i dostępna.
Najważniejsze wskazówki dotyczące skuteczności w internecie
Używaj atrybutu srcset, aby automatycznie wybierać odpowiedni rozmiar obrazu.
Komponenty internetowe: tajny składnik, który ma wpływ na funkcjonowanie internetu
Ten post jest podsumowaniem stanu komponentów sieciowych w 2019 roku wygłoszonym przez Kevina Schaafa z zespołu Polymer Project i Caridy Patiño z Salesforce.
Używaj Lighthouse do określania budżetów wydajności
Lighthouse obsługuje teraz budżety wydajności. Funkcję LightWallet można skonfigurować w mniej niż 5 minut. Zapewnia ona informacje o rozmiarze i liczbie zasobów strony.
Aktualizacje interfejsów API płatności internetowych
Od wprowadzenia interfejsu Payment Request API w Chrome 53 i interfejsu Payment Handler API w Chrome 68 wprowadziliśmy sporo zmian w specyfikacjach. Ten post zawiera podsumowanie tych zmian i nadal będziemy je gromadzić.
Wartość prędkości
Przedstawia przychody generowane przez ulepszenia witryny bez uwzględniania czynników zewnętrznych, np. kampanii marketingowych.
Instalacja paska adresu dla progresywnych aplikacji internetowych na pulpicie
Progresywne aplikacje internetowe można łatwo zainstalować dzięki nowemu przyciskowi instalacji na pasku adresu Chrome (omniboksie).
W jaki sposób skuteczność może zwiększyć liczbę konwersji?
Dowiedz się, jaki wpływ na skuteczność witryny mają poszczególne części ścieżki e-commerce.
Jak powiadomić użytkowników, że moją aplikację PWA można zainstalować?
Jak promować instalację progresywnych aplikacji internetowych i sprawdzone metody.
Sposób myślenia skryptu service worker
Dla wielu twórców stron internetowych praca z skryptami service worker jest czymś nowym i nietypowym. W tym poście znajdziesz wskazówki, które pomogą Ci ukierunkować te kwestie.
Wzorce promowania instalacji PWA
Jak promować instalację progresywnych aplikacji internetowych i sprawdzone metody.
Zasady dotyczące obrazów – m.in. szybkie wczytywanie
Obrazy zajmują znaczną ilość przestrzeni wizualnej i stanowią większość pobranych bajtów na stronie internetowej. Skorzystaj z nowych zasad dotyczących funkcji, aby zidentyfikować zbyt duże obrazy.
Wyodrębnianie newralgicznego kodu CSS
Dowiedz się, jak skrócić czasy renderowania przy użyciu krytycznej techniki CSS i jak wybrać najlepsze narzędzie do swojego projektu.
Wyodrębnianie i wbudowanie krytycznego kodu CSS za pomocą wartości krytycznej
Dowiedz się, jak używać klucza krytycznego do wyodrębniania i umieszczania w tekście krytycznego kodu CSS oraz skrócenia czasu renderowania.
Czy długie zadania JavaScript opóźniają czas do pełnej interaktywności?
Dowiedz się, jak diagnozować kosztowne interakcje użytkowników, które utrudniają pracę.
Szybkość na dużą skalę: co nowego w dziedzinie wydajności witryn?
W ramach Google I/O 2019 przedstawiliśmy 3 nowe inicjatywy związane z wydajnością w internecie, które naszym zdaniem przyczynią się do poprawy wrażeń użytkowników.
Przedstawiamy PROXX
PROXX to gra przypominająca sapera, stworzona jako PWA. Działa na wielu różnych urządzeniach i stopniowo wzmacnia wygląd, tym większe możliwości urządzenia.
Objaśnienie plików cookie SameSite
Dowiedz się, jak oznaczać pliki cookie do użytku własnego i innych firm za pomocą atrybutu SameSite. Możesz zwiększyć bezpieczeństwo witryny, używając wartości Lax i Strict – SameSite, by poprawić ochronę przed atakami typu CSRF. Nowy atrybut „None” (brak) umożliwia jawne oznaczanie plików cookie do użytku w różnych witrynach.
Wyszukiwanie wizualne za pomocą zestawu narzędzi Web Perception Toolkit
Czy nie byłoby wspaniale, gdyby użytkownicy mogli przeszukiwać witrynę za pomocą aparatu?
Praktyczna obsługa portali: łatwa nawigacja w internecie
Nowy interfejs Portals API ułatwia obsługę interfejsu, a jednocześnie umożliwia płynną nawigację za pomocą niestandardowych przejść. Z tego artykułu dowiesz się, jak korzystać z portali, by poprawić wrażenia użytkowników w Twojej witrynie.
Adaptacyjne wyświetlanie na podstawie jakości sieci
Interfejs Network Information API pozwala dostosowywać wyświetlane zasoby użytkownikom na podstawie jakości połączenia.
Minifikuj i kompresuj ładunki sieciowe za pomocą brotli
Z tego ćwiczeń z programowania dowiesz się, jak kompresja Brotli może jeszcze bardziej zmniejszyć współczynnik kompresji i ogólny rozmiar aplikacji.
web.dev na konferencji I/O 2019
Z okazji Google I/O 2019 zespół web.dev przygotował szereg aktualizacji, w tym odświeżony interfejs, więcej dokumentów dotyczących Lighthouse i nowego bloga.
Jak mierzyć prędkość?
Rzeczywista wydajność jest bardzo zmienna z powodu różnic dotyczących urządzeń, połączeń sieciowych i innych czynników użytkowników. W tym poście przedstawiamy narzędzia, które pomogą Ci zbierać dane laboratoryjne lub pola do oceny wydajności strony.
Co to jest szybkość?
Szybkość ma znaczenie, ale co właściwie mamy na myśli? Co to znaczy mieć szybką stronę?
Jak utrzymać szybkość?
Marki, które optymalizują szybkość, często szybko odnotowują spadek szybkości. W tym poście pokazujemy, jak zadbać o szybkie korzystanie z aplikacji.
Kontrola ułatwień dostępu za pomocą react-axe i eslint-plugin-jsx-a11y
reakcja-axe to biblioteka, która sprawdza aplikację React i rejestruje wszystkie problemy z ułatwieniami dostępu w konsoli Narzędzi deweloperskich w Chrome. eslint-plugin-jsx-a11y to wtyczka ESLint, która identyfikuje i egzekwuje szereg reguł ułatwień dostępu bezpośrednio w JSX. Stosowanie tych dwóch rozwiązań w połączeniu może zapewnić kompleksowy sposób kontroli w celu znalezienia i usunięcia w aplikacji wszelkich problemów z ułatwieniami dostępu.
Podział kodu za pomocą React.lazy i Susense
Metoda React.lazy ułatwia podział kodu aplikacji React na poziomie komponentu przy użyciu dynamicznego importu. Używaj jej w połączeniu z pozytywnym stanem wczytywania, aby pokazać użytkownikom odpowiednie stany wczytywania.
Wirtualizacja dużych list za pomocą okna reakcji
reakcja to biblioteka, która umożliwia efektywne renderowanie dużych list.
Stosowanie strategii w aplikacji React z użyciem Workbox
Skrzynka robocza jest wbudowana w aplikację Create React i ma domyślną konfigurację, która zapisuje w pamięci podręcznej wszystkie zasoby statyczne aplikacji przy każdej kompilacji.
Dodawanie manifestu aplikacji internetowej za pomocą narzędzia Create React
Funkcja tworzenia aplikacji React domyślnie zawiera plik manifestu aplikacji internetowej. Zmodyfikowanie tego pliku umożliwi zmianę sposobu wyświetlania aplikacji po zainstalowaniu na urządzeniu użytkownika.
Trasy renderowania z wyprzedzeniem z przyspieszeniem reakcji
reag-snap to biblioteka zewnętrzna, która wstępnie renderuje strony w Twojej witrynie w statyczne pliki HTML. Może to skrócić czas pierwszego wyrenderowania w Twojej aplikacji.
Pierwsze kroki: zoptymalizuj aplikację React
React to biblioteka open source, która ułatwia tworzenie interfejsów użytkownika. W tej ścieżce szkoleniowej omówimy różne interfejsy API i narzędzia w ekosystemie, z których warto korzystać, aby poprawić wydajność i użyteczność aplikacji.
Ćwiczenia z programowania: wstępne wczytywanie zasobów krytycznych, które pozwalają przyspieszyć wczytywanie
Z tego ćwiczeń z programowania dowiesz się, jak poprawić wydajność strony przez wstępne wczytywanie i pobieranie zasobów.
preferowanie zmniejszonego ruchu: czasami mniej ruchu oznacza więcej
Zapytanie o multimedia: preferowany jest ograniczony ruch sprawdza, czy użytkownik poprosił o zminimalizowanie ilości animacji lub ruchu stosowanej przez system. Przydają się użytkownikom, którzy potrzebują zminimalizowanych animacji lub wolą takie animacje. Na przykład osoby z chorobą przedsionków często wolą, by animacje były jak najrzadsze.
Odrocz niekrytyczny kod CSS
Dowiedz się, jak opóźnić niekrytyczny kod CSS w celu optymalizacji krytycznej ścieżki renderowania i poprawy pierwszego wyrenderowania treści (FCP).
Zaufanie jest dobre, obserwacja jest lepsza: obserwacja Intersection Observer (wersja 2)
Obserwator skrzyżowań w wersji 2 dodaje możliwość nie tylko obserwowania skrzyżowań, ale również wykrywania, czy w chwili skrzyżowania widoczny był przecinający się element.
Podstawy elastycznego projektowania witryn
Twórz witryny dostosowane do potrzeb i możliwości urządzenia, na którym są wyświetlane.
Konstrualne arkusze stylów
Zbudowane arkusze stylów umożliwiają bezproblemowe tworzenie i rozmieszczanie stylów w dokumentach lub podrzędnych elementach korzeniowych bez obaw o FOUC.
Renderowanie w internecie
Zalecenia dotyczące implementacji logiki i renderowania w aplikacjach.
Korzystanie z rozmiaru pakietu w Travis CI
Zdefiniuj budżety wydajności przy minimalnej konfiguracji i egzekwuj je w ramach przepływu pracy podczas programowania przy użyciu rozmiaru pakietu w ramach Travis CI.
Włącz budżety wydajności w proces tworzenia kampanii
Najlepszym sposobem na kontrolowanie budżetu skuteczności jest jego automatyzacja. Dowiedz się, jak wybrać narzędzie, które najlepiej odpowiada Twoim potrzebom i aktualnej konfiguracji.
Ustawianie budżetów wydajności za pomocą pakietu internetowego
Dowiedz się, jak ustawić budżety wydajności i kontrolować rozmiar pakietu za pomocą pakietu internetowego.
Korzystanie z Lighthouse Bot do ustalania budżetu wydajności
Masz już za sobą ciężką pracę, która pozwoli Ci przyspieszyć działanie. Teraz zautomatyzuj testy wydajności w Travis CI za pomocą Lighthouse Bot, aby utrzymać szybkość.
Emscripten i npm
Jak zintegrować WebAssembly z tą konfiguracją? W tym artykule omówimy na przykład C/C++ oraz Emscripten.
Czy Twoja aplikacja jest zainstalowana? Poinformuje Cię to na stronie getinstalledrelatedApps().
Interfejs API getinstalledrelatedApps() to interfejs API platformy internetowej, który pozwala sprawdzić, czy aplikacja na iOS/Androida/komputer lub PWA jest zainstalowana na urządzeniu użytkownika.
Udostępnianie nowoczesnego kodu w nowoczesnych przeglądarkach w celu szybszego wczytywania stron
Dzięki tym ćwiczeniom z programowania dowiesz się, jak zwiększyć wydajność aplikacji przez zmniejszenie ilości transpilacji kodu.
Dostosowywanie do użytkowników przy użyciu wskazówek klienta
Wskazówki klienta to zestaw nagłówków żądań HTTP, których możemy używać, by zmieniać sposób dostarczania zasobów strony na podstawie charakterystyki urządzenia użytkownika oraz połączenia sieciowego. W tym artykule poznasz wskazówki dla klientów i dowiesz się, jak one działają. Podpowiemy też, jak możesz z nich skorzystać, by przyspieszyć wczytywanie stron.
Nagłówki i punkty orientacyjne
Używając odpowiednich elementów nagłówków i punktów orientacyjnych, możesz znacząco poprawić wrażenia użytkowników korzystających z technologii asystujących.
Sterowanie zaznaczeniem za pomocą indeksu tabulacji
Standardowe elementy HTML mają wbudowane ułatwienia dostępu za pomocą klawiatury. Podczas tworzenia niestandardowych komponentów interaktywnych użyj parametru Tabindex, aby zapewnić dostęp do klawiatury za pomocą klawiatury.
Podstawy korzystania z klawiatury
Wielu różnych użytkowników korzysta z klawiatury do nawigacji w aplikacjach – od użytkowników z tymczasową i trwałą niepełnosprawnością ruchową po użytkowników, którzy korzystają ze skrótów klawiszowych, aby zwiększyć wydajność i wydajność. Dobra strategia nawigacji za pomocą klawiatury w aplikacji zapewnia wszystkim użytkownikom lepsze wrażenia.
Używaj semantycznego kodu HTML, aby łatwiej korzystać z klawiatury
Odpowiednie semantyczne elementy HTML mogą umożliwić spełnienie większości lub wszystkich potrzeb w zakresie dostępu z klawiatury. Oznacza to mniej czasu na żmudną pracę z indeksem kart i więcej zadowolonych użytkowników.
Etykiety i teksty alternatywne
Aby czytnik ekranu przedstawił użytkownikowi interfejs, elementy istotne muszą mieć odpowiednie etykiety lub alternatywne teksty. Etykieta lub tekst alternatywny nadaje elementowi dostępną nazwę, która jest jedną z kluczowych właściwości wyrażających semantykę elementu w drzewie ułatwień dostępu.
Co to jest ułatwienia dostępu?
Witryna z ułatwieniami dostępu to taka, której zawartość jest dostępna niezależnie od niepełnosprawności użytkownika, a jego funkcjonalność może być obsługiwana przez najszerszą możliwą grupę użytkowników.
Semantyka i czytniki ekranu
Czy zdarzyło Ci się zastanawiać, czy technologie wspomagające osoby z niepełnosprawnością, takie jak czytnik ekranu, wie, co przekazywać użytkownikom? Odpowiedź brzmi: technologie te wymagają przez programistów oznaczenia stron za pomocą semantycznego kodu HTML. Czym jednak jest semantyka i jak czytniki ekranu z niej korzystają?
Skoncentrowany styl
Wskaźnik ostrości (często oznaczony pierścieniem ostrości) wskazuje aktualnie wybrany element. Dla użytkowników, którzy nie mogą korzystać z myszy, ten wskaźnik jest bardzo ważny, ponieważ służy jako uzupełnienie wskaźnika myszy.
Zasada dotycząca tego samego źródła i element iframe
Z tego ćwiczeń z programowania dowiesz się, jak działają zasady dotyczące tej samej domeny w przypadku uzyskiwania dostępu do danych wewnątrz elementu iframe.
Kompresowanie obrazów za pomocą Imagemin
Nieskompresowane obrazy wypełniają stronę niepotrzebnymi bajtami. Uruchom Lighthouse, aby sprawdzić możliwości poprawy wczytywania strony przez kompresowanie obrazów.
Naprawianie niejawnych błędów 404
Z tego ćwiczeń z programowania dowiesz się, jak znaleźć niejawny błąd 404, który może uniemożliwić prawidłowe indeksowanie Twojej strony.
Udostępnianie nowoczesnego kodu w nowoczesnych przeglądarkach w celu szybszego wczytywania stron
Podstawową zasadą otwartego ekosystemu internetowego jest tworzenie witryn dobrze działających we wszystkich popularnych przeglądarkach. Wiąże się to jednak z dodatkową pracą w celu zapewnienia, że cały napisany kod będzie obsługiwany w każdej przeglądarce, na którą chcesz kierować reklamy. Jeśli chcesz korzystać z nowych funkcji języka JavaScript, musisz je transpilować do formatów zgodnych wstecznie.
Zasada dotycząca tej samej domeny
Przeglądarka może wczytywać i wyświetlać zasoby z wielu witryn. Jeśli nie ma ograniczeń dotyczących interakcji między tymi zasobami, a haker przejął kontrolę nad skryptem, skrypt może ujawnić wszystko w przeglądarce użytkownika.
Unikaj przebłysków niewidocznego tekstu
Dzięki tym ćwiczeniom z programowania dowiesz się, jak natychmiast wyświetlać tekst za pomocą narzędzia Font Face Observer.
Konfigurowanie zachowania buforowania HTTP
Z tego ćwiczeń z programowania dowiesz się, jak kontrolować sposób buforowania zasobów przy użyciu nagłówków HTTP.
Wyświetlaj elastyczne obrazy
Wyświetlanie obrazów w rozmiarach na komputery może wykorzystywać 2–4 razy więcej danych, niż jest to konieczne. Zamiast stosować uniwersalne podejście do obrazów, wyświetlaj obrazy w różnych rozmiarach na różnych urządzeniach.
Identyfikowanie zasobów wczytywanych z sieci
Aby opracować odpowiednie strategie buforowania aplikacji internetowej, musisz wiedzieć, co dokładnie wczytujesz. Gdy tworzysz niezawodną aplikację internetową, sieć może być narażona na działanie różnych sił ciemności. Musisz zrozumieć luki w zabezpieczeniach sieci, jeśli chcesz radzić sobie z nimi w aplikacji.
Ogranicz ładunki JavaScript dzięki podziałowi kodu
Z tego ćwiczeń z programowania dowiesz się, jak poprawić wydajność prostej aplikacji przez podział kodu.
Wyświetlaj obrazy o prawidłowych wymiarach
Z tego ćwiczeń z programowania dowiesz się, jak wyświetlać obrazy o prawidłowych wymiarach, aby zwiększyć wydajność sieci.
Skrypty service worker i interfejs Cache Storage API
Pamięć podręczna HTTP przeglądarki to pierwsza linia obrony. Niekoniecznie jest to najefektywniejsze czy najbardziej elastyczne podejście, a poza tym masz ograniczoną kontrolę nad okresem przechowywania odpowiedzi w pamięci podręcznej. Jest jednak kilka ogólnych zasad, które pozwalają na rozsądną implementację buforowania bez większego nakładu pracy, dlatego zawsze staraj się ich przestrzegać.
Korzystanie z Imagemin i Webpack
Z tego ćwiczeń z programowania dowiesz się, jak korzystać z komponentu Imagemin w połączeniu z pakietem webpack, aby zoptymalizować pliki JPEG i PNG w celu szybszego pobierania.
Współdzielenie zasobów pomiędzy serwerami z różnych domen (CORS)
Ze względów bezpieczeństwa zasada dotycząca tej samej domeny w przeglądarce blokuje odczyt zasobu z innego źródła. Włączenie CORS pozwala serwerowi poinformować przeglądarkę, że może używać dodatkowego źródła.
Usuń nieużywany kod.
Z tego ćwiczeń z programowania dowiesz się, jak zwiększyć wydajność aplikacji, usuwając wszelkie nieużywane i niepotrzebne zależności.
Kierunek sztuki
Z tego ćwiczeń z programowania dowiesz się, jak wczytywać zupełnie różne obrazy w zależności od rozmiaru wyświetlacza urządzenia.
Zastąp GIF-y filmem
Z tego ćwiczeń z programowania dowiesz się, jak poprawić wydajność, zastępując animowane GIF-y filmem.
Wstępnie wczytuj najważniejsze zasoby, aby przyspieszyć wczytywanie
Gdy tylko otwierasz dowolną stronę internetową, przeglądarka wysyła żądanie dokumentu HTML do serwera, analizuje jego zawartość i przesyła osobne żądania dla wszelkich innych odwołań zewnętrznych. Łańcuch żądań krytycznych reprezentuje kolejność zasobów, które są pobierane przez przeglądarkę i traktowane priorytetowo.
Skrzynka robocza: zestaw narzędzi Service Worker wysokiego poziomu
Workbox to wysokiej jakości zestaw narzędzi Service Worker stworzony na podstawie interfejsów Service Worker i Cache Storage API. Udostępnia zestaw bibliotek gotowych do wykorzystania w środowisku produkcyjnym, umożliwiając dodanie obsługi aplikacji internetowych w trybie offline.
Wyświetlaj obrazy o prawidłowych wymiarach
Wszyscy to znamy – zapomnieliśmy zmniejszyć obraz przed dodaniem go do strony. Obraz wygląda dobrze, ale marnuje dane użytkowników i obniża wydajność strony.
Jak działa wyszukiwarka
Wyszukiwarki to cyfrowa wersja biblioteki. Korzystają one z pełnego indeksu, który ułatwia znajdowanie informacji odpowiednich dla danego zapytania. Znajomość podstaw wyszukiwania pomoże Ci zadbać o to, aby Twoje treści były łatwo dostępne dla użytkowników.
Bezpieczeństwo nie powinno być takie straszne!
Słowo „bezpieczeństwo” odnosi się zwykle do złych wieści. Bezpieczeństwo należy traktować jako pozytywną i niezbędną część procesu tworzenia stron internetowych, tak samo jak „wygoda użytkowników” czy „ułatwienia dostępu”.
Pozwól na instalację
Z tego ćwiczeń z programowania dowiesz się, jak skonfigurować witrynę do zainstalowania, korzystając ze zdarzenia beforeinstallprompt.
Zastosuj błyskawiczne wczytywanie z wzorcem PRPL
PRPL to akronim opisujący wzorzec używany do tego, aby strony internetowe wczytywały się i stały się interaktywne oraz szybsze. Z tego przewodnika dowiesz się, jak każda z tych metod łączy ze sobą poszczególne metody, ale nadal możesz ich używać niezależnie, aby osiągać lepsze wyniki.