Как скачать лендинг
Web-scraping – извлечение ресурсов из исходного кода.
WebScrapbook Chrome Extension – лучший друг и помощник веб-мастера в копировании страничек.
Без проблем скачает весь исходный код, по пути захватив: аудио, видео, изображеня, шрифты, css стили и многое другое. В настройках можно задать тонкие настройки для скрапинга.
- Система фильтров контента.
- Замена ссылок.
- Визуальное редактирование лендинга.
Купить или скачать лендинг бесплатно
Themeforest.net – большой маркетплейс с шаблонами.
Codecanyon.net – тут и скрипты и шаблоны.
Html5 template free download – бесплатные шаблоны.
Очистка исходного кода
Хорошие редакторы кода, которые мне нравятся:
- Sublime Text
- Visual Studio Code
- Notepad++
- Code Edit (протестить)
Как делаю я: открываю index файл и ищу через поиск следующие паттерны: http | href= | .js | <script .
Ненужные скрипты удаляю, ссылки заменяю. В скрапбуке можно полностью вырезать все скрипты и ссылки, но ленд скорее всего сломается, лучше проходить руками.
Если в ленде подключен jQuery – перекачиваю slim & compressed версию с официального сайта и заменяю старый. После каждого этапа редактирования проверяйте работоспособность лендинга. В финальной версии – полностью проходите весь флоу юзера.
Массовая замена ссылок в файлах
Оптимизация лендинга
Хорошим тоном считается быть в зеленой зоне у page speed гугла. Добиться 100% трудно, но старайтесь быть в диапазоне 70%-80%. Свой блог я выдр#чил почти под 100% :).
Начните оптимизацию с переноса всех js в подвал.
Что бы отметить отправную точку до оптимизации, проверяем страничку в Google Page Speed.
Делаем скриншот сохраняем его и анализируем проблемы. В отчете будет максимально развернуто указаны все ваши проблемы с лендингом и советы по их исправлению. Большинство известных проблем и их решений я описал в данной статье, после выполнения которых, вы будете приятно удивлены результатом.
Есть альтернативный способ проверить вашу страничку, например GTMetrix, но в бесплатной версии есть минус – сервера проверки будут находиться в USA или CANADA, тем самым, занижая показатели TTFB (время до получения первого байта).
Сам сервер и его расположение является основополагающей вещью в оптимизации загрузки странички. Размещайте свои сайты на серверах, максимально близко к вашей целевой аудитории. Обвес в виде CDN не будет лишним.
Изображения
Оптимизация изображений является главным инструментом ускорения загрузки странички. Старайтесь избегать GIF, заменяя на mp4 / webm форматы. Вес фоток и картинок держите до 100кб.
Для оптимизации изображений воспользуемся онлайн сервисами:
- Tinypng.com
- Imagecompressor.com
- Resmush.it – работает через API
Кеширование
Самым оптимальным вариантом кеширования лендингов работающих под PHP – это модуль PHP APCu, который отвечает за кеш локальных данных и доступен в большинстве дистрибутивов из коробки.
Для Nginx можете воспользоваться более тонкой настройкой встроенного кеширования локальных ресурсов.
Хостер
Следующим важным шагом будет выбор хостера, где будет размещаться сам лендинг. Обычно его подбирают ближе к целевому гео, с которым вы будете работать. Я советую вам проверенного хостера HETZNER, его датацентры находятся в Германии и Финляндии.
PS: По моей ссылке вы бонусом на счет, получите бесплатные 20€
CDN
CDN – Content Delivery Network. Подключение данной системы тоже позитивно скажется на скорости загрузки вашей странички. Из бесплатного и популярного решения, могу посоветовать Cloudflare.
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" link rel="prerender" href="https://example. com/about.html"
Lazy Load
Lazy load – отложенная загрузка элемента, до момента непосредственного его использования. Например у вас длинный лендинг содержащий 10 картинок. Когда юзер попадает на страничку, браузеру нет необходимости прогружать в этот же момент все 10 изображений, атрибут “lazy” подгрузит их только в тот момент, когда это будет необходимо. Более подробнее про lazy-load можете почитать тут.
Начиная с 75 версии хрома, атрибут “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.
Онлайн сервисы минификации:
Результат
Если вы воспользовались всеми советами из поста, то у вас будут хорошие результаты, как у меня 🙂
