WPO: с 🐢 на 🐇
Взгляд новичка на то, почему и как оптимизировать производительность веб-сайта
Часть I. Зачем говорить о скорости и производительности сайта?
В сообщении в блоге Crazy Egg они упомянули, что на каждую 1-секундную задержку времени загрузки страницы приходится
- На 11% меньше просмотров страниц
- 16% снижение удовлетворенности клиентов
- Потеря конверсии 7% (влияние как первого, так и второго эффекта)
Мы живем в эпоху, когда все мгновенно. Ожидание в большинстве случаев утомительно. А разочарование приводит к неудовлетворенности.
Все это влияет на доход или основную цель, определенную для каждого проекта.
Это не просто цифры, которые придумала Crazy Egg. Они имеют основу в реальном мире.
Amazon обнаружил увеличение дохода на 1% за каждые 100 мс улучшения скорости сайта.
Walmart обнаружил увеличение конверсии на 2% на каждую 1 секунду улучшения.
Akamai обнаружил, что 52% онлайн-покупателей говорят, что быстрая загрузка страниц важна для их лояльности к сайту.
Помимо просмотров страниц, скорость сайта также влияет на трафик, поскольку Google добавил это в качестве еще одного критерия в свой алгоритм ранжирования в поиске.
В целом, эти цифры ясно показывают, что скорость сайта имеет решающее значение, поскольку она влияет на большинство, если не на все наши KPI.
К сожалению, скорость сайта не имеет большого значения, особенно по сравнению с эстетикой, а иногда и с логикой. Из этих трех скорость занимает третье место как наименее приоритетная.
Но есть способ объединить эстетику, логику и скорость. И сегодня я поделюсь некоторыми рекомендациями и опытом оптимизации внешнего кода нашего сайта.
Часть II. Как? Рекомендации.
Изначально я собирался сказать «диагностировать», но решил, что оптимизация должна быть непрерывным, а не разовым процессом, то есть это должно быть частью жизненного цикла проекта от планирования до обслуживания.
В Планировании мы определим, чего мы хотим достичь и почему? Что важно для проекта? Это сеть? серверы? фронтальный рендеринг? время загрузки? гладкость?
В Планировании мы также установим бюджет производительности. Вес страницы. Запросы. Индекс скорости. Как мы можем лучше всего достичь этого бюджета? Через дизайн. Дизайн – это основа. Дизайн в рамках этого бюджета. Например, если мы хотим, чтобы вес страницы был меньше 4 МБ, давайте разработаем страницу, которая не отображает много изображений, не требует сложных функций JS или не имеет большого количества
сложных стили.
Есть много инструментов, доступных бесплатно (ну, большинство из них). Что нам осталось сделать, так это узнать, что для чего (какой инструмент для какой метрики).
Для нашего сайта это инструменты, которые я использовал до сих пор,
- Chrome Dev Tools. Делает много вещей, но лично я использовал это для просмотра немедленных результатов во время кодирования. Это также иногда используется для получения предложений по оптимизации скорости страницы.
- Google Page Speed Insights. Я использовал это для получения предложений по оптимизации скорости страницы (вместе с CDT), но в основном я использую это для сравнительного анализа.
- Webpagetest.org — для получения диафильма времени загрузки.
- GTMetrix-Это также для бенчмаркинга, но, в отличие от других, мне лично нравится, как он выкладывает ресурсы/изображения, которые необходимо оптимизировать.
- testmysite.thinkwithgoogle.com – тест для проверки удобства сайта для мобильных устройств. также для получения предложения по оптимизации
Установите показатели. Получайте данные постоянно. Сравнивать.
Выработайте привычку.
Часть II. Как это сделать
- Уменьшить размер файла
- Ленивая загрузка
- Используйте svg или спрайты вместо отдельных файлов
- Удалить неиспользуемый css
- Помните о размере файла добавляемых библиотек JS.
- Помните о размере файла используемых шрифтов. Это самое важное, потому что оно включено в каждую загрузку страницы.
- Избегайте перенаправлений
- Оптимизировать запросы
Заключение
Это всего лишь рекомендации. У каждого пробег может быть разным.
Ресурсы
https://blog.crazyegg.com/2013/12/11/speed-up-your-website/
