Проверка производительности сайта — измерение скорости, с которой веб-сайт загружается и реагирует на ввод пользователя. В статье рассмотрим показатели и метрики, на которые нужно обращать внимание.
Как проходят тесты в компании «Веб-Фокус»:
- Минификация, объединение статичных файлов CSS, JavaScript, html для сокращения количества HTTP запросов
- Обработка графики. Уменьшение размеров до необходимых и объединение в CSS-спрайты
- Настройка кэширования. Клиентские приложения не будут повторно раз загружать статичные файлы при повторном посещении или перезагрузке страницы
- Настройка сервера. Оптимизация логики серверного кода, перенос части статичных файлов на CDN, установка сжатия Gzip
- Скрипты с ресурсоемкими вычислениями на стороне клиента ставятся на асинхронную загрузку для предотвращения блокировки рендеринга
- Оптимизация для старых браузеров
Проблемы производительности
Важно понимать, как тестирование производительности сайта помогает в обеспечении лучшего взаимодействия для пользователей. Количество времени, которое пользователь ждет, прежде чем потерять фокус, составляет примерно от 0,3 до 3 секунд. Необходимо стремиться показать некоторый контент пользователю менее чем за 3 секунды. Список распространенных показателей производительности веб-сайтов, которые нужно измерить, и проблем, на которые следует обратить внимание:
- Ресурсы, которые загружаются слишком медленно. Это может быть что угодно, от шрифтов и изображений до различных плагинов и файлов JS, которые замедляют загрузку сайта.
- TTB (Time to first byte) и FMP (First meaningful paint). Время до первого байта и первая значимая отрисовка — два важных показателя, на которые нужно обращать внимание. Показатели покажут, когда сайт начнет загружаться и когда сайт начнет отображать информацию.
- Время загрузки, количество запросов и размеры страниц. Картинки, анимации, логотипы, видео, таблицы стилей и разметки грузятся с сервера и перед размещением на сервер рекомендуется оптимизировать. Скорость загрузки зависит от размера файла.
- Заголовки HTTP. Заголовки HTTP — язык взаимодействия клиента с сервером, отправляя информацию назад и вперед через запрос или ответ. Необходимо анализировать ответы и запросы, чтобы убедиться, что пользователь получает и отправляет правильные, корректные сообщения. Также пригодится, во время отладки различных возможных ошибок.
Скорость веб-сайта: основные концепции анализа производительности сайта
Основные концепции, лежащие в основе оптимизации скорости веб-сайта:
- Большое время загрузки. Один из наиболее важных аспектов оптимизации сайта — это скорость загрузки сайта. Существует множество причин, по которым сайт загружается медленно, и одна из них — сервер. Измерение времени до первого байта позволит узнать о наличии проблем со временем отклика сервера.
- Код блокировки рендеринга. Еще одна причина, по которой страница загружается медленно, заключается в том, что есть JavaScript код, блокирующий отображение сайта. Существует несколько способов отложить выполнение кода, блокирующего рендеринг. Когда браузер достигает тега, который загружает JavaScript из удаленного источника, движок ждет полной загрузки файла (синхронная загрузка), прежде чем продолжить рендеринг веб-сайта. Установка флага “async” говорит браузеру загружать скрипты асинхронно, не блокируя работу страницы. Когда тест производительности сайта проводится разработчиками компании «Веб-Фокус», сайт заказчика проверяется на всех браузерах и смартфонах. Для старых браузеров, которые не понимают атрибут “async”, мы перемещаем скрипты в конец разметки и ставим перед закрытием “body”.
- При оптимизации CSS, цель — сделать его меньше. Существует два способа: удалить все ненужные классы или минимизировать файл CSS. При минимизации, удаляются ненужные символы из файлов. Уменьшение применяется не только к CSS. Удаляются ненужные символы из Javascript и HTML. Символы пробела (пробел и клавиша ввода), комментарии и разделители блоков помогают при разработке и повышают читаемость кода, но для работы сайта лучше использовать минифицированные версии.
- HTTP-запросы. При загрузке веб-сайта, к серверам отправляется серия запросов. На каждый запрос будет ответ, и у каждого сервера установлен лимит одновременных запросов. Чем больше запросов клиентов придется обрабатывать серверу, тем больше времени потребуется на ответ. Запросы трудно отследить, количество запросов колеблется в большую и меньшую сторону, особенно, если работа ведется со сторонними сервисами. HTTP-запросы используются веб-браузером для извлечения различных частей страницы, таких как изображения, таблицы стилей и сценарии с веб-сервера. Каждый запрос с использованием HTTP / 1.1, будет иметь некоторые накладные расходы при установлении соединения между браузером и удаленным веб-сервером. Кроме того, браузеры ограничены на количество параллельных сетевых запросов и, если в приложении слишком длинная очередь запросов, некоторые будут заблокированы.
- Если изображения не сжаты или используется слишком высокое разрешение, работа сайта замедляется. Веб-сайты иногда используют изображения с разрешением 2x или даже 3x, поэтому хорошо отображаются на дисплеях высокой плотности, таких как экраны retina. Но если пользователи не используют дисплей HiDP, то происходит трата пропускной способности и увеличиваете время загрузки для посетителей, особенно если они находятся на медленных мобильных соединениях передачи данных. Указание нескольких размеров изображений позволит браузеру выбрать подходящее изображение в зависимости от разрешения экрана. Используйте JPEG для изображений с большим количеством цветов (например, фотографий), а PNG-для более простой графики или при наличии прозрачных элементов на картинке.
- CDN оптимизирует доставку статических файлов CSS, изображений, шрифтов и JavaScript для посетителей и используют географически распределенные серверы. Ближайший к посетителю сервер будет обслуживать соединение и передавать файлы, время загрузки, контента и системных файлов будет одинаковым, независимо от местоположения пользователя. При отправке статических файлов с собственных серверов время загрузки увеличивается, когда пользователи физически далеко от сервера.
Проверка производительности сайта, проведенная компанией «Веб-Фокус», дает нашим клиентам низкие показатели отказов, высокие коэффициенты конверсии, высокий рейтинг в органическом поиске, сокращая время загрузки страницы.