Для оптимизации загрузки веб-страниц с помощью инструментов разработчика можно предпринять следующие шаги:
- Проверить статистику скорости загрузки. 1 Для этого нужно открыть инструменты разработчика в браузере, перейти на вкладку Network и перезагрузить веб-страницу с отключённым кэшем. 1 Так можно увидеть подробную статистику с показателями общего количества запросов, обработанных и переданных данных, времени, затраченного на обработку страницы. 4
- Оптимизировать изображения. 4 Для этого во вкладке Network нужно отфильтровать данные по типу с помощью фильтра Images. 4 После выбора фильтра появятся все файлы изображений и данные о них: имя файла, тип файла, объём переданной информации по сети, вес изображения. 4
- Проверить кеширование файлов. 4 Для этого на вкладке Network нужно выключить настройку Disable Cache, потому что с ней файлы не сохраняются. 4 Затем отключить эту настройку и перезагрузить страницу. 4 Если снова перейти к изображениям, то в столбце Size у многих файлов появится значение memory_cache. 4 Это означает, что файлы не были скачены, а браузер использовал кешированные версии, которые уже есть на устройстве. 4
- Минифицировать файлы. 4 Для этого нужно уменьшить размер файлов путём удаления всех ненужных символов и пробелов в файлах формата HTML, CSS и JavaScript. 4
Также для анализа производительности веб-сайта можно использовать инструмент Lighthouse, который входит в Chrome DevTools. 25