Narzędzie Lighthouse w Narzędziach deweloperskich w Chrome dla agentów umożliwia agentowi do kodowania ocenę jakości witryny przez przeprowadzanie na żywo testów dostępności, SEO, sprawdzonych metod i przeglądania przez agenta.
W przepływie pracy opartym na agentach Twój agent kodujący używa audytów Lighthouse do identyfikowania konkretnych, mierzalnych problemów z czasem działania, zamiast losowo przeszukiwać bazę kodu w celu wprowadzenia ogólnych ulepszeń.
To ukierunkowane podejście zapewnia praktyczne porady bezpośrednio w kontekście agenta, dzięki czemu agent do kodowania może znajdować i naprawiać błędy dokładniej niż w przypadku szerokich, statycznych wyszukiwań w bazie kodu.
Audyty Lighthouse koncentrują się na tych głównych kategoriach:
- Ułatwienia dostępu: zapewniają, że Twoja witryna jest dostępna dla wszystkich, w tym dla osób korzystających z czytników ekranu.
- SEO przeprowadza testy techniczne, aby sprawdzić, czy wyszukiwarki mogą znaleźć i zrozumieć Twoje treści.
- Sprawdzone metody: upewnij się, że Twoja witryna jest zgodna z nowoczesnymi standardami tworzenia stron internetowych.
- Przeglądanie przez agenta: sprawdzaj, w jakim stopniu asystenci AI rozumieją Twoją witrynę i wchodzą z nią w interakcje.
Podczas korzystania z Lighthouse pamiętaj o tych kwestiach:
- Obsługa środowisk lokalnych i testowych: agent może przeprowadzić audyt dowolnej strony widocznej w Chrome, w tym lokalnych serwerów deweloperskich i lokalnych plików HTML, do których dostęp uzyskuje się za pomocą protokołu
file://. - Działanie przeglądarki: audyty mogą na chwilę zakłócić widok. Podczas symulacji działania na różnych urządzeniach strona może zmieniać rozmiar lub się ponownie wczytywać.
Sprawdzanie jakości internetu
Aby zintegrować Lighthouse z procesem tworzenia aplikacji, skorzystaj z tych przepływów pracy i przykładów.
Sprawdzanie dostępności
Gdy zmienisz interfejs, poproś agenta o sprawdzenie, czy strona nadal jest dostępna.
Przykładowy prompt:
How can I improve accessibility on this page as measured by Lighthouse?
Przykład wykonania agenta: agent uruchamia audyt Lighthouse z parametrem
formFactor ustawionym na mobile. Analizuje wyniki, np. niewystarczający kontrast kolorów lub brakujące etykiety ARIA, i sugeruje konkretne poprawki kodu.
Sprawdzanie SEO pod kątem widoczności w wyszukiwarce
Wymagania dotyczące technicznego SEO są często wykrywane zbyt późno w cyklu rozwoju. Podczas tworzenia możesz poprosić agenta o znalezienie i usunięcie blokad technicznych.
Przykładowy prompt:
According to Lighthouse audit, how can I improve this page for better discoverability in search?
Przykład działania agenta: Twój agent przeprowadza audyt SEO i wykrywa brakujące metatagi, linki kanoniczne lub tekst opisowy. Może wtedy zaproponować aktualizację kodu źródłowego, aby rozwiązać problem.
Weryfikowanie sprawdzonych metod
Upewnij się, że serwer lokalny lub witryna testowa są zgodne ze sprawdzonymi metodami w zakresie bezpieczeństwa i technologii.
Przykładowy prompt:
Does my site follow best practices as measured by Lighthouse?
Przykład działania agenta: Twój agent sprawdza aspekty techniczne, takie jak użycie protokołu HTTPS, błędy konsoli i wywołania wycofanych interfejsów API zgłoszone przez Lighthouse.
Ogólne ulepszenia witryny
Możesz przeprowadzać pełne audyty Lighthouse w swojej witrynie i określać obszary, które wymagają poprawy, na wczesnych etapach rozwoju.
Przykładowy prompt:
Run a full Lighthouse audit of my site, in mobile and desktop, and suggest improvement areas and possible fixes for any problems you find.
Przykład działania agenta: Twój agent przeprowadza pełny audyt Lighthouse Twojej witryny na urządzeniach mobilnych i komputerach oraz sugeruje zmiany, które mogą poprawić wyniki różnych audytów. Jeśli agent ma pełną wiedzę kontekstową na temat kodu źródłowego, może bezpośrednio sugerować poprawki. Jeśli ma dostęp do odpowiedniego kontekstu, może też sugerować, jak ulepszyć konfigurację serwera lub inną konfigurację backendu.