[ Speed ] Other tech to improve loading resources

[pamelars86]

• [ ] Use a loader icon during loading Ele mostra o logo do Nexo em tela cheia e coloca uma bolinha animada em cada seção, indicando que aquela seção ainda está carregando. Assim a página termina de carregar mais rápido e também o conteúdo não "pula" para baixo quando algo de cima termina de carregar depois. Avaliação do time: Seria só necessário se a tela fosse muito "pesada"

REQUIREMENT

we’ll want the theme to be developed with certain features:

• Progressive Web Apps ( includes https://web.dev/maskable-icon/)
• Service Workers: This will allow caching the whole site but make the browser to refresh a certain page that’s changed. Async functions and resource prioritization

Some references:

• https://www.pwabuilder.com/
• https://developers.google.com/web/fundamentals/primers/async-functions
• https://developers.google.com/web/tools/lighthouse/

Stefano's suggestions (1)

https://web.dev/predictive-prefetching/ -> Uma biblioteca JavaScript que faz prefetch preditivo do conteúdo que o usuário mais terá probabilidade de clicar a seguir, a partir de dados do Analytics.

https://wordpress.org/plugins/predictive-preloader/ -> Este plugin aplica a biblioteca acima no WordPress e é uma possibilidade a se considerar, embora talvez tenhamos possibilidades melhores e quem sabe mais baratas (este custa US$5/mês/site).

https://web.dev/adaptive-loading-cds-2019/ -> Aqui tem algumas técnicas que se baseiam no uso de APIs do navegador para melhorar o carregamento do site em dispositivos de entrada ou conexões lentas. Algumas destas APIs são experimentais, então podemos considerá-las com cautela.

https://web.dev/load-faster-like-proxx/ -> Este artigo também traz algumas técnicas que podem ser bacanas para dispositivos de entrada.

https://web.dev/preload-responsive-images/ -> Este aqui mostra uma das técnicas do artigo acima, o preload, aplicada a imagens.

https://web.dev/native-lazy-loading/ -> E este é outro bem legal também para imagens: lazy-loading usando uma API do navegador. Parece incrível. Uma última coisa nada a ver com velocidade: essa técnica aqui faz o ícone do site que se instala no Android ficar legal em qualquer tema que o usuário escolha -> https://web.dev/maskable-icon/

19/08

Pamela, estes recursos podem ajudar na otimização da velocidade dos sites, alguns dos quais já tratados antes como PWA: https://web.dev/vitals/. No site tem alguns links úteis, inclusive para uma extensão do Chrome que pode ajudar na avaliação.

O Google vai começar a considerar os resultados destes testes para fazer o site subir nas buscas: https://tecnoblog.net/359998/chrome-para-android-vai-rotular-paginas-que-carregam-rapido/.

Aí tem alguns plugins de WordPress que ajudam na implementação, mas não sei se são bons ou necessários, já que vocês já estão trabalhando nisso:

• https://pt.pagespeed.pro/wordpress/
• https://wordpress.org/plugins/web-vitals/
• https://wordpress.org/plugins/core-web-vitals-optimization/

[pamelars86]

24/08 When PWA Plugin is inactive, this warning appears:

However, when I activated the PWA plugin, this error appears:

I don't know why all images are uploaded with "http" instead of "https".