Fala meu pooovo.. faz tempo que não apareço por aqui, mas venho trazendo algo bem legal que pode otimizar sua LP.

Por esses dias finalizei um projeto com sistema de Lazzy Loading totalmente operacional dentro das LP´s do RD.

O que é um Lazzy Loading?

é aquela função que faz a pagina ir carregando de acordo com a navegação do usuário. Isso é fundamental quando a gente pensa na otimização dos recursos de banda (principalmente pelo lado do usuario).

Bom, o scriptzinho que bolei aqui, é beeeeem jaguara mas funciona. Basicamente, ele pega cada coluna do RD e manda ir carregando aos poucos. Isso otimizou legal minhas LP´s aqui..

Segue o script:

na edição avançada, vá em css e cole esse código:

===========================

 [id^="rd-column-"] 

    {

      opacity: 0;

      transform: translateY(50px);

      transition: opacity 0.6s ease-out, transform 0.6s ease-out;

    }

    [id^="rd-column-"].show {

      opacity: 1;

      transform: translateY(0);

    }

===========================

depois disso, vá na em "java script em body" e cole esse

===========================

<script>

    document.addEventListener("DOMContentLoaded", function() {

      const sections = document.querySelectorAll('[id^="rd-column-"]');

      const observer = new IntersectionObserver(entries => {

        entries.forEach(entry => {

          if (entry.isIntersecting) {

            entry.target.classList.add('show');

            observer.unobserve(entry.target);

          }

        });

      }, { threshold: 0.2 });

      sections.forEach(section => observer.observe(section));

    });

  </script>

===========================

NÃO MODIFIQUE NADA - APENAS COLE

você pode fazer tbm o carregamento via sessão (pra mim ficou ruim, mas pra ti pode ser uma boa dependendo a sua estruturação). Para isso, use o code abaixo:

cole esse no css

===========================

 [id^="rd-section-"] 

    {

      opacity: 0;

      transform: translateY(50px); 

      transition: opacity 0.6s ease-out, transform 0.6s ease-out;

    }

    [id^="rd-section-"].show {

      opacity: 1;

      transform: translateY(0);

    }

===========================

e esse no JS

===========================

<script>

    document.addEventListener("DOMContentLoaded", function() {

      const sections = document.querySelectorAll('[id^="rd-section-"]');

      const observer = new IntersectionObserver(entries => {

        entries.forEach(entry => {

          if (entry.isIntersecting) {

            entry.target.classList.add('show');

            observer.unobserve(entry.target); /

          }

        });

      }, { threshold: 0.2 });

      sections.forEach(section => observer.observe(section));

    });

  </script>

===========================

Se tiver gostado dessa dica, me add la no Linkedinho :P

CLICAQUIPRAVEREMEULINKEDIN.COM.BR :-)