Як виявити мертвий код на веб-сторінці за допомогою інструментів розробника в браузері Google Chrome

Виявлення та видалення мертвого коду на веб-сторінці — це важлива частина оптимізації сайту. Мертвий код – це частина коду, який більше не використовуються або не впливає на функціональність веб-сторінки. Видалення такого коду має кілька переваг:

• Підвищення продуктивності: Зменшення обсягу коду знижує час завантаження сторінки та покращує чуйність сайту.
• Зниження навантаження на сервер: Менше даних для передачі зменшує навантаження на сервер і мережу, що особливо важливо для сайтів з високим трафіком.
• Поліпшення безпеки: Мертвий код може містити застарілі або вразливі ділянки, видалення яких підвищує загальну безпеку сайту.
• Спрощення підтримки та розробки: Чистий, актуальний код легше підтримувати і розвивати, що знижує витрати на розробку.

Виявити мертвий код нам допоможе DevTools у Google Chrome.

Крок 1: Відкрийте інструменти розробника

1. Відкрийте Google Chrome.
2. Перейдіть на сайт, який хочете проаналізувати.
3. Натисніть Ctrl+Shift+I (Windows/Linux) або Cmd+Option+I (Mac) для відкриття інструментів розробника. Також можна клікнути правою кнопкою миші на сторінці та вибрати «Переглянути код».

Крок 2: Використання панелі «Coverage»

1. Перейдіть на вкладку «Coverage» в інструментах розробника. Якщо цієї вкладки немає:
   • відкрийте меню «three dots» у правому верхньому кутку інструмента розробника;
   • виберіть «More tools», а потім «Coverage».
2. Натисніть кнопку «Record» в панелі Coverage.

Крок 3: Перезавантаження сторінки

1. З перезавантаженням сторінки (натисканням F5 або Ctrl+R), Coverage відстежуватиме, які частини коду завантажуються і використовуються.
2. Зачекайте, поки сторінка повністю завантажиться і завершить виконання всіх скриптів.

Крок 4: Аналіз результатів

1. У таблиці покриття ви побачите список файлів із зазначенням відсоткового вмісту використовуваного коду.
2. Якщо якийсь файл має низький відсоток використання, це може означати, що частина коду в цьому файлі є «мертвою».

Крок 5: Пошук мертвого CSS

1. На вкладке Elements выделите элементы страницы.
2. В правой части окна, во вкладке Styles, вы можете видеть CSS, применяемый к элементам.
3. Если CSS правило не применяется к элементам страницы, это может указывать на мертвый код.

Шаг 6: Тестирование и удаление мертвого кода

1. На вкладці Elements виділіть елементи сторінки.
2. У правій частині вікна, у вкладці Styles, ви можете бачити CSS, що застосовується до елементів.
3. Якщо CSS правило не застосовується до елементів сторінки, це може вказувати на мертвий код.

Видалення мертвого коду може істотно поліпшити швидкість завантаження сайту.

Ось кілька способів, як це відбувається:

1. Зниження загального обсягу завантажуваних даних: Менше коду – менше даних для завантаження.
2. Зменшення часу рендерингу: Менше CSS і JavaScript – швидше обробка та рендеринг сторінки.
3. Скорочення числа запитів: Видалення невикористовуваних файлів може знизити кількість HTTP-запитів.

Ці зміни в сукупності можуть значно підвищити продуктивність сайту і поліпшити користувацький досвід.