На связи Денис Житняков, основатель Dolphin. Сегодня я покажу как быстро и без технических навыков ускорить загрузку лендинга почти в 5 раз!
Я взял первый же лендинг, который попался под руку в M1-shop.
Увесисто, не так ли? 9,7 мегабайт для страницы — это очень неслабо. Давай посмотрим, что скажет нам Chrome.
Шаг 0. Замер скорости
Для замеров буду использовать обычный хром, его инспектор сети. Тебе нужно:
- Перейти на страницу
- Нажать Ctrl+Shift+I или Cmd+Alt+I
- Перед тобой откроется инспектор
- Перейти на вкладку Сеть
- Выбрать галочку «Отключить кэш»
- Обновить страницу
Само собой, нужно замерять скорость страницы, которая уже размещена на хостинге. Лендинг, который лежит у тебя на компе, загрузится моментально.
В результате в самом низу инспектора сети ты увидишь цифры:
Нас интересует две из них (отметил стрелками) — объем загруженных данных и время полной отрисовки страницы.
Запомни — мы начинаем ускорение с показателя 3,3 мегабайта и 3,5 секунды.
Шаг 1. Жмем изображения
Обязательный и очень простой пункт. Ничто не совершенно, и картинки лендинга могут начать весить в несколько раз меньше, если попросить TinyPNG поджать их.
Ищешь абсолютно все картинки, которые есть в папке с лендингом. Жмешь их, скачиваешь сжатые версии и копируешь назад в папку лендинга, заменяя старые версии
Выгода в зависимости от самих изображений может составить от несколько сотен килобайт до пары мегабайт. Как бы то ни было, это максимально быстрый, простой и бесплатный способ ускориться.
Результат:
- 3,3 MB ⇒ 2,9 MB
- 3,5 сек ⇒ 3,3 сек.
Шаг 2. Ленивые картинки
Немного теории
На лендинге обычно много картинок. Индикатор загрузки страницы в браузере будет крутиться до тех пор, пока все содержимое страницы (стили, шрифты, картинки и т.д.) не будет загружено.
До этого момент скрол на странице может подтормаживать, отрисовка самой страницы может происходить с задержкой. Грубо говоря, посетитель может наблюдать белый или мерциющий экран первые несколько секунд.
А если в верстке используется какой-нибудь кастомный шрифт, то задача на загрузку этого шрифта может оказаться в очереди ниже, чем подгрузка тяжелых картинок. Таким образом в первые секунды на экране у посетителя будут тексты не тем шрифтом — это может выглядеть некрасиво, и от этого может поехать верстка.
Что это такое?
Ленивая подгрузка картинок позволяет разгрузить очередь по простой логике — мы будем загружать картинки только по мере необходимости в их отображении. Как только скрол страницы начнет приближаться к месту, где используется картинка, пойдет запрос на ее загрузку.
Для включения такой логики на странице придется немного покопаться в коде.
Если ты технически подкован, то можешь ознакомиться с доками по lazy load
Включаем ленивые картинки
- Открывай файл index.html в любом текстовом редакторе
- Открывай режим Поиск и замена
- Искать
<img
- Заменять на
<img loading="lazy"
Результат:
- 3,3 MB ⇒ 1,6 MB
- 3,5 сек ⇒ 1,6 сек.
Шаг 3. CloudFlare
CloudFlare — очень крупный сервис для обслуживания твоих доменов и улучшения скорости доставки контента твоих сайтов/страниц до конечных посетителей. На самом деле этот сервис заслуживает отдельной статьи, но здесь я упоминаю его только в контексте ускорения сайта.
Одним словом, CloudFlare делает магию. Просто подключи свой домен к этому сервису, и твои старания из первых двух шагов будут вознаграждены еще x3 ускорением
Почему это так? Честно говоря, наполовину я сам не знаю, а на другую половину не хочу тебя грузить 😉
К слову, если бы я не выполнил первые два шага, а ограничился бы просто одним CloudFlare, то время отрисовки составило бы 1,7 сек. Поэтому не пренебрегай сжатием картинок и их «ленивой» загрузкой.
Результат:
- 3.3 MB ⇒ 1.6 MB (+106%)
- 3.5 s ⇒ 0.6 s (+483%)
Послесловие
Нормально, если тебе лень делать это все самому. Просто скидывай эту статью фрилансеру в качестве инструкции
Без сомнений, это не сделает тебя богаче в несколько раз. Но вполне может сделать тебя богаче на 5-10%. И я буду дико рад, если это случится.
Обо мне
Владелец и разработчик сервисов для арбитражников:
Dolphin | dolphin.ru.com | Автоматизация Facebook Ads
Dolphin TikTok | tiktok.dolphin.ru.com | Автоматизация TikTok Ads
Dolphin Anty, сoming soon 🔥 | Антидетект браузер
Подписывайся на мой блог, там будет много интересных статей по технической части арбитража и о работе антидетект браузеров. Будем на связи!
Читайте также:
-
7 способов снизить стоимость рекламы в Facebook*
-
Как продвинуть PDF в топ выдачи: 7 советов Ahrefs
-
Обновление нашей самой горячей вертикали — ГОРОСКОП НА 2022 год!
-
Топ 5 небанальных источников трафика в арбитраже
-
Как выбирать и анализировать офферы? Почему eCPC — это главное?
-
Инвестиции в криптовалюту для начинающих — 3 платформы для инвестиций
Еще можно посмотреть css и js, и если они в нескольких раздельных файлах — эти файлы можно объединить в один css и один js, css код отвечающий за «шапку» сайта и первый экран можно так же вынести прямо в теги style в разделе head — ускорит отображение первого контента для пользователя и скажется положительно как для рейтинга, так и для реального пользователя.
Можно так же проверить соответствие разрешения картинок их реальному отображаемому размеру — часто бывает что фото дядечки на фото может быть fullhd, хотя на сайте нужно всего лишь 638*457рх например, и если подогнать фактический размер под реально требуемый — первый пункт может выдать еще бОльший результат. Так же если все что можно перевести из jpg/png в SVG — это так же уменьшит вес на несколько сотен килобайт (например желтые и черные полосы под надписями скорее всего в png, их можно перегнать в svg).