Landing Page – Как скачать, Очистить и Оптимизировать
Landing page, лендинг, лендос, посадочная страница – это специально-оформленная страница, побуждающая юзера к целевому действию. Обычно на них собирают телефоны и емейлы.
Как скачать лендинг
Web-scraping – извлечение ресурсов из исходного кода.
WebScrapBook Chrome Extension – лучший друг и помощник веб-мастера в копировании страничек.
Без проблем скачает весь исходный код, по пути захватив: аудио, видео, изображения, шрифты, css стили и многое другое. В настройках можно задать тонкие настройки для скрапинга.
- Система фильтров контента.
- Замена ссылок.
- Визуальное редактирование лендинга.
Купить или скачать лендинг бесплатно
- Themeforest.net – большой маркетплейс с шаблонами.
- Codecanyon.net – тут и скрипты и шаблоны.
- Html5 template free download – бесплатные шаблоны.
Очистка исходного кода
Хорошие редакторы кода, которые мне нравятся:
Как делаю я: открываю index файл и ищу через поиск следующие паттерны: http | href= | .js | <script.
Ненужные скрипты удаляю, ссылки заменяю. В скрапбуке можно полностью вырезать все скрипты и ссылки, но ленд скорее всего сломается, лучше проходить руками.
Если в ленде подключен jQuery – перекачиваю slim & compressed версию с официального сайта и заменяю старый. После каждого этапа редактирования проверяйте работоспособность лендинга. В финальной версии – полностью проходите весь флоу юзера.
Оптимизация лендинга
Хорошим тоном считается быть в зеленой зоне у page speed гугла. Добиться 100% трудно, но старайтесь быть в диапазоне 70%-80%. Свой блог я выдрал почти под 100% :).
Начните оптимизацию с переноса всех js в подвал.
Что бы отметить отправную точку до оптимизации, проверяем страничку в Google Page Speed. Делаем скриншот сохраняем его и анализируем проблемы. В отчете будет максимально развернуто указаны все ваши проблемы с лендингом и советы по их исправлению.
Изображения
Оптимизация изображений является главным инструментом ускорения загрузки странички. Старайтесь избегать GIF, заменяя на mp4 / webm форматы. Вес фоток и картинок держите до 100кб.
Для оптимизации изображений воспользуемся онлайн сервисами:
- Tinypng.com
- Imagecompressor.com
- Resmush.it – работает через API
Кеширование
Самым оптимальным вариантом кеширования лендингов работающих под PHP – это модуль PHP APCu, который отвечает за кеш локальных данных и доступен в большинстве дистрибутивов из коробки.
Для Nginx можете воспользоваться более тонкой настройкой встроенного кеширования локальных ресурсов.
CDN
CDN – Content Delivery Network. Подключение данной системы тоже позитивно скажется на скорости загрузки вашей странички. Из бесплатного и популярного решения, могу посоветовать Cloudflare.
Предварительная загрузка элементов
Так же можно добавить rel атрибут загрузки стилей и связанных страничек в код. Более подробно об использовании данных атрибутов написано в статье на хабре и в статье от гугла.
link rel="prefetch" href="/style.css" as="style"
link rel="preload" href="/style.css" as="style"
link rel="preconnect" href="https://example.com"
link rel="dns-prefetch" href="https://example.com"Lazy Load
Lazy load – отложенная загрузка элемента, до момента непосредственного его использования. Например у вас длинный лендинг содержащий 10 картинок. Когда юзер попадает на страничку, браузеру нет необходимости прогружать в этот же момент все 10 изображений, атрибут "lazy" подгрузит их только в тот момент, когда это будет необходимо.
img src="example.jpg" loading="lazy" alt="ленивая загрузка"Очистка неиспользуемого кода
- Открываем лендинг
- Открываем консоль разработчика (Ctrl + Shift + I)
- Переходим во вкладку Sources
- Открываем командное меню (Ctrl + Shift + P)
- Вводим «Coverage» и жмем ниже кнопку RELOAD PAGE
- Прокликиваем css стили: красным отмечаются стили, которые не были использованы для загрузки данной страницы
Объединение файлов
Если у вас больше чем 1 css файл, имеет смысл объединить их.
Онлайн сервисы объединения:
Минификация кода
Сокращайте DOM-структуру. Минификация кода помогает выиграть несколько процентов к скорости загрузки лендинга. Минифицировать можно css, html и js. Я рекомендую минифицировать только CSS.
Онлайн сервисы минификации:
Результат
Если вы воспользовались всеми советами из поста, то у вас будут хорошие результаты, как у меня :)