Descrição
Lazy-loading utilizando recurso nativo do browser. Saiba mais sobre o novo atributo loading
ou veja um ticket do core do WordPress, onde está sendo discutida a inclusão de uma implementação semelhante no próprio core do WordPress.
Se o atributo loading
não for suportado pelo navegador, o plugin utiliza um JavaScript fallback baseado na solução IntersectionObserver
. Para o caso do JavaScript está desabilitado, mas o atributo loading
for suportado pelo browser, será adicionada uma variante noscript
do respectivo elemento que também inclui o atributo loading
sem nenhuma alteração adicional.
“Nativo” significa “Rápido”
Se você chegou até aqui, provavelmente está ciente de qual crucial é o desempenho para a experiência e o sucesso de um site. Você também deve saber que o lazy-loading é um recurso essencial para melhorar o desempenho. No entanto, as soluções de lazy-loading até agora ainda adicionavam um pouco de sobrecarga, que já contavam com o carregamento e execução JavaScript personalizado, que pode ser mais ou menos pesado no desempenho.
Este plugin em grande parte acaba com este padrão. Ele se baseia no novo atributo loading
, que torna o carregamento lazy-loading uma funcionalidade nativa do navegador. O atributo já é suportado pelo Chrome e será lançado para outros navegadores ao longo do tempo. A solução sendo “nativa” significa que ela não depende de JavaScript, portanto, tornado sua aplicação mais leve. E “mais leve” significa “mais rápido”.
Por último, mas não menos importante, uma coisa interessante a ter em mente é que esse plugin se aprimorará ao longo do tempo, a medida que mais navegadores implementarem o suporte ao atributo loading
.
Uso
Basta ativar o plugin e todas as suas images e iframes serão carregados com lazy-loading.
Crédito
Este plugin é parcialmente baseado na logica do WP Rig, além utilizar as recomendações web.dev e developers.google.com.
Instalação
- Faça o upload de toda a pasta
native-lazyload
para o diretório/wp-content/plugins/
ou faça o download através do back-end do WordPress. - Ative o plugin através no menu ‘Plugins’ no WordPress.
FAQ
- Onde estão as configurações do plugin?
-
Este plugin não possui tela de configurações. Somente com a ativação, o plugin irá funcionar.
- Como eu posso prevenir de uma imagem ou um iframe ser carregado com lazyload?
-
Você pode adicionar uma classe
skip-lazy
para indicar para o plugin que você deseja desativar o lazy-loading para uma image ou iframe. - Este plugin continuar carregando um arquivo de JavaScript extra! Eu não quero isso.
-
Isto é perfeitamente justo. Observe que o plugin apenas carrega arquivo JavaScript como fallback para quando o navegador do usuário ainda não suporta o atributo nativo
loading
. O arquivo inclui lógica para ainda carregar automaticamente a imagem de maneira não nativa. Se você preferir confiar exclusivamente no atributoloading
e não fornecer nenhum fallback, você pode facilmente desabilitar adicionando a linhaadd_filter( 'native_lazyload_fallback_script_enabled', '__return_false' )
no código base do seu site. - Funciona com AMP?
-
Se você já utiliza AMP, você não precisa deste plugin, AMP já realiza inteligentemente lazy-load de arquivos de mídia, mas mesmo assim o plugin possui compatibilidade para não quebrar páginas AMP, somente por garantia.
- Onde eu devo enviar minha requisição para suporte?
-
Para solicitações regulares de suporte, use o forum de suporte wordpress.org. Se você tiver um problema técnico com o plugin no qual já tem mais informações sobre como corrigi-lo, também pode abrir uma issue no Github
- Como eu posso contribuir com o plugin?
-
Se você tem alguma idéia para melhorar o plugin ou corrigir um bug, fique a vontade para levantar uma issue ou submeter um pull request no Repositório do Github do plugin. Lembrando de seguir as diretrizes de contribuição.
Você pode contribuir com a tradução do plugin. Para começar a contribuir simplesmente visite translate.wordpress.org.
Avaliações
Colaboradores e desenvolvedores
“Native Lazyload” é um software com código aberto. As seguintes pessoas contribuíram para este plugin.
Colaboradores“Native Lazyload” foi traduzido para 16 localizações. Agradecemos aos tradutores por suas contribuições.
Traduzir “Native Lazyload” para o seu idioma.
Interessado no desenvolvimento?
Navegue pelo código, dê uma olhada no repositório SVN ou assine o registro de desenvolvimento via RSS.
Registro de alterações
1.0.2
- Corrige images quebradas que estão usando esquema de URI de dados (por exemplo, images codificadas em base64). Proprietário ieim.
- Corrige as imagens no IE11 não sendo carregadas até o usuário comece a rolar. Proprietário Soean.
- Corrige o script de carregamento de imagem que não funciona no IE10 ou navegadores que não suportam
dataset
.
1.0.1
- Melhore a compatibilidade com outros plugins usando classes mais específicas e somente adicionado-a apenas para fallback de JS.
- Rode lazy-load script no
DOMContentLoaded
quando necessário para melhorar a compatibilidade com plugins como Autoptimize. - Não transforme elementos dentro de uma resposta AJAX devido a falta de previsibilidade do contexto e execução do script.
1.0.0
- Release inicial