Содержание:
Как скачать лендинг
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 можете воспользоваться более тонкой настройкой встроенного кеширования локальных ресурсов.
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.
Онлайн сервисы минификации:
Результат
Если вы воспользовались всеми советами из поста, то у вас будут хорошие результаты, как у меня 🙂