Lighthouse w Narzędziach deweloperskich w Chrome dla agentów umożliwia agentowi kodowania ocenę jakości witryny przez przeprowadzanie na żywo kontroli stanu pod kątem dostępności, SEO, sprawdzonych metod i przeglądania przez agenta.
W przypadku przepływu pracy z agentem agent kodowania 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, co pozwala agentowi kodowania dokładniej znajdować i naprawiać błędy niż w przypadku szerokich, statycznych wyszukiwań w bazie kodu.
Audyty Lighthouse koncentrują się na tych głównych kategoriach:
- Ułatwienia dostępu (a11y): zapewniają, że witryna jest użyteczna dla wszystkich, w tym dla osób korzystających z czytników ekranu.
- SEO: przeprowadza kontrole techniczne, aby mieć pewność, że wyszukiwarki mogą znaleźć i zrozumieć Twoje treści.
- Sprawdzone metody: sprawdza, czy witryna jest zgodna ze standardami tworzenia nowoczesnych stron internetowych.
- Przeglądanie przez agenta: mierzy, w jakim stopniu asystenci AI mogą rozumieć Twoją witrynę i wchodzić z nią w interakcje.
Podczas korzystania z Lighthouse pamiętaj o tych kwestiach:
- Obsługa lokalna i środowiska testowego: 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://. - Zachowanie przeglądarki: audyty mogą na krótko zakłócić widok. Narzędzie może zmieniać rozmiar strony lub ją przeładowywać, ponieważ symuluje różne urządzenia.
Audyt jakości stron internetowych
Aby zintegrować Lighthouse z procesem tworzenia, użyj tych przepływów pracy i przykładów.
Sprawdzanie dostępności
Gdy zmienisz interfejs użytkownika, 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ładowe wykonanie przez agenta: agent uruchamia audyt Lighthouse z parametrem formFactor ustawionym na mobile. Analizuje wyniki, takie jak niewystarczający
kontrast kolorów lub brakujące etykiety ARIA
,
i sugeruje konkretne poprawki kodu.
Audyt SEO pod kątem widoczności w wyszukiwarce
Wymagania techniczne dotyczące SEO są często wykrywane zbyt późno w cyklu tworzenia. Możesz poprosić agenta o znalezienie i usunięcie blokad technicznych podczas tworzenia.
Przykładowy prompt:
According to Lighthouse audit, how can I improve this page for better discoverability in search?
Przykładowe wykonanie przez agenta: agent przeprowadza audyt SEO i identyfikuje brakujące metatagi, linki kanoniczne lub tekst opisowy. Następnie może zaproponować aktualizację kodu źródłowego w celu rozwiązania problemu.
Sprawdzanie zgodności ze sprawdzonymi metodami
Upewnij się, że serwer lokalny lub witryna testowa są zgodne ze sprawdzonymi metodami dotyczącymi bezpieczeństwa i technologii.
Przykładowy prompt:
Does my site follow best practices as measured by Lighthouse?
Przykładowe wykonanie przez agenta: agent sprawdza aspekty techniczne, takie jak użycie HTTPS, błędy w konsoli i wycofane wywołania API zgłaszane przez Lighthouse.
Ogólne ulepszanie witryny
Możesz przeprowadzać pełne audyty Lighthouse w swojej witrynie i określać obszary, które można ulepszyć, na wczesnych etapach tworzenia.
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ładowe wykonanie przez agenta: agent przeprowadza pełny audyt Lighthouse w Twojej witrynie 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ą o kodzie źródłowym, 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.