2022-07-09 10:29:03
Как ускорить загрузку лендов х10?
- Использовать lazy loading.
Коротко из wiki:
Ленивая загрузка - это шаблон проектирования, обычно используемый в компьютерном программировании и в основном в веб-дизайне и разработке, чтобы отложить инициализацию объекта до момента, когда это необходимо.
Простым языком:
Отложенная загрузка тяжелых ресурсов, таких как картинки, гифки и тд. Картинки грузятся с сервера асинхронно при промотке страницы вниз. Таким образом мы избегаем долгой загрузки ленда и не теряем часть целевых юзеров.
Еще проще:
ПРИМЕР САЙТА C LAZYLOAD
Несмотря на то что подобные библы уже существуют (вот самая популярная), приходится вручную править ленд и прописывать атрибуты
![]()
Код python (pip install beautifulsoup4
в консоль прежде чем запустить):
from bs4 import BeautifulSoup
# inputs
index_file = input('insert index file path. Example: "C:\landing\index.html"\n')
gif_file = input('insert loading animation file. Example: loading.gif\n')
lazy_src = 'https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js'
with open(index_file, 'r', encoding="utf8") as index:
code = index.read()
soup = BeautifulSoup(code, 'html.parser')
lazy = soup.new_tag('script')
lazy.attrs['src'] = lazy_src
lazy.attrs['async'] = ''
soup.head.append(lazy)
for img in soup.find_all('img'):
if img.has_attr('class') and img.has_attr('src'):
img['class'] = f'{" ".join(img["class"])} lazyload'
img['data-src'] = img['src']
img['src'] = gif_file
with open(index_file, 'w', encoding='utf8') as index:
index.write(soup.prettify(formatter='html'))
PS: При запуске попросит путь до индексного файла ленда и название анимашки, пока картинки грузятся асинхронно. Эта анимашка должна лежать в папке вашего ленда landing/loading.png
PSS: cdn взят с официального дистрибутива https://www.jsdelivr.com/package/npm/lazyload
795 viewsedited 07:29
Б
