Я работаю в стартапе в сфере недвижимости старшим застройщиком в Бангалоре, Индия (PropertyShare). И большая часть нашего бизнеса осуществляется через онлайн-каналы, в настоящее время только веб-продукт. Эксперты по цифровому маркетингу считают, что за каждую дополнительную секунду загрузки страницы вы теряете 4–5% трафика и как минимум на 10% увеличиваете показатель отказов. В бизнесе, где размер заявки превышает 10000 долларов, мы не можем позволить себе потерять даже одного вероятного инвестора.
Как компания, занимающаяся недвижимостью, мы хотим, чтобы наши перечисленные объекты выглядели как можно более привлекательно, поэтому бизнес-команда хочет использовать самые лучшие изображения, как правило, размером более 1,5 МБ. Достаточно пары таких изображений, чтобы страница загружалась бесконечно.
Решение проблемы с изображениями -
- Размеры холста около 400 * 300 пикселей, использовались изображения высокой четкости размером более 2000 * 1800 пикселей плюс, благодаря автоматическому масштабированию изображений HTML, это работало нормально. Однако за счет плохого взаимодействия с пользователем и ненужной загрузки данных на стороне клиента. В процессе уменьшения размера изображения и его прогона с помощью инструмента сжатия без потерь размер изображения уменьшился с 1,5 мегабайт до примерно 50–70 килобайт, и все это без ущерба для качества изображения. Используя несколько пакетов Laravel и некоторые инструменты php, этот процесс теперь автоматизирован, поэтому в следующий раз, когда бизнес-команда загрузит большое изображение, серверная часть позаботится об изменении размера изображения и его сжатии.
- Создание трех версий одного и того же изображения и его правильное использование также в значительной степени помогает в оптимизации. Версия в виде эскиза, версия для просмотра списка и полная версия на холсте в настоящее время являются идеальным выбором для торговых площадок.
Наша следующая проблема заключалась в том, что мы использовали много сторонних ресурсов JS и CSS, включая базовые скрипты, такие как jQuery, bootstrap и font-awesome, чтобы назвать некоторые из них. Добавьте ко всему этому множество собственных JS и CSS, написанных собственными силами. Использование средства запуска задач javascript под названием Grunt, устанавливаемого через NPM, помогло нам минимизировать все ресурсы и получить только один файл CSS и один файл JS. Это не только сокращает объем данных, которые должны быть загружены на стороне клиента, но также уменьшает количество запросов, которые поступают на сервер для получения различных отдельных ресурсов. Это необходимо для продуктов, ориентированных на удобство использования.
Мы загружали три видео на нашу домашнюю страницу, что сильно замедляло работу страницы. Иногда в более медленных сетях для полной загрузки страницы требовалось более 20 секунд. Изучив инструменты сетевой отчетности, мы поняли, что youtube нужны собственные ресурсы JS и CSS для воспроизведения этих видео. В качестве исправления мы вызывали эти ресурсы только в том случае, если пользователь нажимал кнопку воспроизведения, таким образом мы сохранили загрузку данных в размере около 1 МБ.
И последнее, но не менее важное: у нас также был GIF, чтобы страница выглядела более интерактивной и удобной для пользователя. Этот GIF размером около 2 мегабайт заставлял изображение загружаться настолько медленно, что несколько кадров автоматически пропускались в более медленных сетях. Чтобы решить эту проблему, мы уменьшили количество кадров в GIF и сжали каждый кадр примерно на 30%, уменьшив размер GIF примерно до 50 КБ.
После всех этих усилий мы снова протестировали наш веб-сайт и, бац, загружали его за 3,8–4,3 секунды в более медленных сетях. Размер домашней страницы был уменьшен с 5+ мегабайт до скудного 1 мегабайта.
Скорость указана в кабельных сетях 200 кбит / с.
На обычных скоростях мы загружаем страницу менее чем за 1,5 секунды, что по отраслевым стандартам очень хорошо.
Тест pingdom показал, что теперь мы были быстрее, чем 85% веб-сайтов, протестированных на их платформе.
Есть вопросы? Напишите мне на [email protected]
Хорошего дня.