- Запуск аудиту
- Категорії
- Продуктивність
- Прогресивна веб-програма
- Доступність
- Кращі практики
- SEO
- Маяк CLI та інші інструменти
- Інтерфейс командного рядка
- Маяк як послуга
- web.dev
- Висновок
Чи знаєте ви, що Chrome може виконати комплексний аудит веб-сторінки та проаналізувати багато різних категорій, наприклад, ефективність, SEO, найкращі практики, доступність, відповідність прогресивним веб-додаткам та багато іншого?
Запуск аудиту
У версії 60 Chrome представив нове доповнення до своїх інструментів розробника. Це всеосяжна функція аудиту для веб-сторінок, що працюють від інструменту, що називається Lighthouse. Це відкритий інструмент доступний на GitHub . Щоб виконати аудит, потрібно відкрити Chrome Dev Tools (F12) і вибрати вкладку Audits:
Перед запуском аудиту можна вибрати різні параметри конфігурації. Перш за все, ви можете вибрати категорії, в яких потрібно перевірити цільовий сайт. Якщо вимкнути категорію, аналіз буде швидшим, але давайте збережемо всі категорії зараз. Крім того, можна вибрати, чи повинен Lighthouse перевірити ваш сайт як мобільний або настільний агент. Нарешті, ви можете доручити Chrome емулювати пристрій із повільнішим процесором і повільнішим мережевим підключенням, щоб перевірити, як ваш сайт працює на нижчих рівнях мобільних пристроїв з гіршою можливістю підключення. Варто перевірити, як результати можуть значно відрізнятися від того, що ви відчуваєте на своєму передовому ПК з надшвидким з'єднанням.
Тепер давайте натиснемо Виконати аудит. Chrome аналізує вашу сторінку для різних потенційних проблем у вибраних категоріях. Після проведення аудиту ви отримуєте оцінку в кожній з категорій до 100 пунктів:
Зауважте, що встановлені розширення Chrome можуть мати негативний вплив на результати, тому може бути краще запустити аудіо в режимі анонімного перегляду, коли ці розширення вимкнено.
Категорії
У кожній з категорій оцінка обчислюється на підставі невдалої перевірки, яка пройшла. Ви можете точно побачити, що було успішним, що ні, і можете прочитати подробиці про кожну перевірку. Крім того, деякі категорії містять перелік додаткових ручних перевірок - кроків, які не можуть бути перевірені автоматично, але залишаються важливими та варто перевірити.
Продуктивність
Перша категорія - продуктивність. Безсумнівно, це важлива область, на якій слід зосередитися. Тим більше, що багато користувачів, як правило, мають низьку якість підключення до мережі або доступ до вашого сайту з мобільних пристроїв. Маяк може взяти це до уваги і може імітувати повільне мережеве підключення і повільний процесор. Ви можете бути здивовані, наскільки поганою є ефективність вашого сайту за таких обставин. Це можна налаштувати перед запуском аудиту.
На додаток до рейтингу 0-100 балів, Lighthouse вимірює різні показники продуктивності, які є дуже корисними при визначенні продуктивності, що сприймається користувачем. Це не так важливо, як довго потрібно повністю завантажувати сторінку з усіма дрібними деталями. Що може мати значний вплив на користувальницький досвід, коли перший змістовний контент розфарбований на вашу сторінку і коли він починає бути інтерактивним.
Під метриками можна переглянути перегляд фільмів Так виглядала ваша сторінка під час завантаження. Корисно перевірити, чи ваша сторінка поступово надає певний вміст, а не бути білим протягом найбільшого часу, оскільки користувачі сприймають такі сторінки швидше і рідше залишають сторінки, коли сторінка все ще завантажується.
Але те, що дійсно корисно, що інструмент рекомендує вам різні способи, як збільшити продуктивність у вашому випадку з реальними даними - це скільки часу ви можете реально зберегти, вирішуючи різні питання.
Прогресивна веб-програма
Прогресивні веб-програми - це набір принципів дизайну та рекомендацій Google. Це має призвести до рівномірного користувальницького досвіду, схожого на рідний мобільний додаток. Він використовує службових працівників, тому програма може працювати на низькоякісних мережах або навіть в автономному режимі. А коли в Інтернеті завжди є актуальні дані. Він повинен бути завантажений тільки через HTTPS, використовувати push-повідомлення та забезпечувати відмінний час завантаження та продуктивність. Те, що робить Lighthouse, це тестування вашої програми на Контрольний список PWA .
Щоб дізнатися більше, спробуйте - Ваш перший PWA .
Доступність
Цей розділ охоплює доступність, тобто переконайтеся, що вашу програму можна використовувати якомога більше користувачів. Як правило, це означає, що користувачі з певними порушеннями або обмеженими можливостями мають максимально легкий досвід. Це включає, але не обмежується, забезпечення достатньою кількістю метаданих для читання з екрану - наприклад, атрибути ARIA. Структура вашого контенту також повинна враховувати це, і ви повинні переконатися, що ви використовуєте належні семантичні елементи (наприклад, сильний проти b ). Ваші зображення повинні мати належні атрибути alt, поля форми повинні мати прикріплені елементи етикетки тощо. Цей посібник доступності підсумовує це красиво. Приємно, що Lighthouse може реально проаналізувати вашу сторінку для кольорового контрасту - тобто, він гарантує, що колір тексту легко читається на його тлі.
Кращі практики
Ця категорія містить різні елементи, наприклад, використовуючи застарілі конструкції, HTTP / 2, HTTPS, консольну реєстрацію, обробку полів паролів та багато іншого. Одним з пунктів, які я знайшов дуже цікавим і важливим, є виявлення бібліотек Javascript відомих уразливостей безпеки . Це засновано на інтеграції з інструментом сторонніх виробників Snyk .
SEO
Ця категорія зосереджена на пошуковій оптимізації. Вона охоплює, головним чином, що ваша програма містить достатню кількість метаданих для пошукових систем, таких як мета-теги заголовка HTML, заголовок, ця сторінка не заблокована від індексації, посилання мають описовий текст тощо.
Маяк CLI та інші інструменти
Розширення Google Chrome
Спочатку, до того як Lighthouse була інтегрована як частина Chrome Dev Tools, вона була доступна як окреме розширення Chrome. І це ще є. Це може бути зручно, якщо ви застрягли зі старою версією Chrome. Або Якщо ви хочете спробувати новітні функції Lighthouse. Це пов'язано з тим, що стабільний Chrome не містить найостаннішої версії Lighthouse, а розширення.
Інтерфейс командного рядка
Інтеграція Lighthouse безпосередньо в Chrome є акуратною, однак, вона має свої обмеження. Ви, ймовірно, запустите аудит кілька разів, коли він все ще новий і блискучий або під час початкової розробки. Або коли ви пам'ятаєте зробити це. Але існує постійний ризик того, що нові зміни вплинуть на продуктивність або порушать деякі кращі практики. Набагато краще інтегрувати аудит як частину процесу збирання, щоб автоматизувати весь аудит.
На щастя, маяк доступний як Утиліта командного рядка поширюється як пакет НПМ. Це також зручно для випадків, коли потрібна більш дрібна конфігурація, оскільки вона пропонує більшу налаштування, ніж Dev Tools. Щоб зробити речі ще простішими для вашої збірки, вона пропонує a Плагін Webpack .
Маяк як послуга
Якщо ви хочете, щоб інтеграція Lighthouse була ще простішою, називається інструмент Трео . В основному це маяк як служба. Він пропонує гарну інтеграцію GitHub, а також засоби для розриву збірки, якщо очікування не будуть виконані.
web.dev
Web.dev це новий сайт, запущений Google. Це дозволяє перевірити ваш сайт безпосередньо з веб-переглядача (не використовуючи Інструменти розробника). Це може мати ряд переваг перед використанням інтегрованого маяка. Перш за все, він використовує останню і найкращу версію, на відміну від Dev Tools (в даний час 4.0.0 проти 3.2.0). Потім він більше не залежить від процесора та мережі вашого поточного комп'ютера, оскільки він використовує сервери Google. Це може бути корисним, якщо у вас є повільніша або нестабільна мережа. Якщо ви входите в систему, ви можете побачити графіки розвитку вашого рахунку з часом.
Але що приємно про web.dev є те, що на додаток до вимірювання з маяком, він хостів багато навчальних посібників і статей згруповані в кілька розділів. Вони безпосередньо пов'язані з проблемами, які Lighthouse відстежує і включає безпеку, SEO, доступність, продуктивність та багато іншого. Таким чином ви зможете дізнатися про сучасну веб-розробку та покращити оцінку сторінки в Lighthouse.
Висновок
Маяк пропонує хороший спосіб перевірити веб-додаток на проблеми з продуктивністю, відповідність PWA, SEO, доступність та інші кращі практики. Незважаючи на те, що інструмент добре інтегрований із інструментами розробників Chrome, ви можете розглянути можливість його інтеграції з процесом збирання, щоб постійно перевіряти можливі проблеми.