Performance e otimização no wordpress
Transferir como PPTX, PDF0 gostou57 visualizações
O documento fornece recomendações para otimizar o desempenho de sites WordPress, abordando ferramentas de análise, servidores, plugins, imagens, ícones, recursos externos, cache e construtores de páginas.
Performance e otimização no wordpress
- 1. Performance e otimização no wordpress Daniel Paz www.vistomarketing.com.br
- 2. Daniel Paz Idade: 28 Anos Formação: Marketing Digital Atuo com webdesign desde 2008. Trabalho com clientes de SP, MG, RS, SC, Africa do Sul, Estados Unidos e Portugal. Atuo como desenvolvedor e designer freelancer desde 2014. Atendi empresas como: Shell, Endeavor, Patrulha do Consumidor Controle Publico, Vivo Energy, XEPA, DJ Paulo Pringles, Exército da Salvação, Globo, Cardano, Guarant Co, Caprisun entre outros.
- 3. Por que falar em Performance ? O Google considera o tempo de carregamento como um dos seus fatores de rankeamento, atualmente sites que demoram mais de 2,5 segundos para carregar são considerados lentos, sendo que o recomendado é abaixo de 2 segundos.
- 4. - Ferramentas de análise - Servidor - Plugins - Imagens - Icones - Recursos externos - Cache - Page Builders Pontos a levar em consideração
- 5. Ferramentas de análise Há diversas ferramentas disponíveis no mercado, mas vamos nos limitar a 3 ferramentas especificas. - Google Page Speed - GT Metrix - Light House
- 6. Google Page Speed Sendo o Google o principal buscador, é imprescindível ter o seu site bem avaliado por sua ferramenta, o Google Page Speed utiliza o Light House para fazer análises de desempenho. Os fatores para obter uma boa nota são vários, entre eles podemos destacar: - Usabilidade - Legibilidade - SEO - Performance Os principais fatores de performance são: - Tempo de resposta do servidor - Recursos que impedem a renderização - Tamanho e formato adequado de imagens - Adiar imagens fora da tela - Redirecionamentos de página - CSS e Javascript não utilizado - Códigos de terceiros - Trabalho da thread principal - Recursos estáticos com política de cache - Tempo de execução do Javascript Entre outros ...
- 7. GT Metrix - O Google Page Speed nos dá uma nota devido a performance e nos mostra alguns pontos de melhoria mas não de forma precisa. Para isso precisamos de uma ferramenta mais avançada. - O GTMetrix permite analisar cada request realizado em seu site. - Para iniciar um trabalho de otimização é necessário primeiro analisar onde está a demora no carregamento para assim agir de forma precisa.
- 8. SERVIDOR Um dos principais fatores de otimização é onde o site está hospedado, qual servidor está utilizando, versão do PHP, Cache entre outros fatores.
- 9. Apache, Nginx, Lite Speed, Open Lite Speed A escolha de um bom servidor web é fator imprescindível para uma boa performance. Geralmente designers e programadores optam por servidores compartilhados devido ao baixo custo e o auto-gerenciamento. Existem várias opções de hospedagens compartilhadas e cada uma delas utiliza servidores web diferentes, mas em sua grande maioria utilizam Apache. Caso você queira obter a melhor performance, prefira entre um Dedicado ou VPS e utilize Lite Speed, Open Lite Speed ou Nginx.
- 10. Depende do tamanho do projeto e do orçamento, Hoje o servidor mais otimizado para wordpress é o Lite Speed Enterprise e em segundo lugar o Open Lite Speed. A grande diferença entre a versão paga e gratuita está no poder do cache e na leitura de arquivos .htaccess. Lite Speed ou Open Lite Speed
- 11. Plugins Em termos de performance a recomendação é a menor quantidade de plugins possível. Pois a máxima é, quanto mais plugins, mais requisições e mais tempo de carregamento. A recomendação é utilizar: - Tema leve ou Builder leve - Plugin de Cache - Plugin de segurança - Plugin de Backup - Plugin de LGPD - Plugin de Otimização de imagens
- 12. Imagens Um dos principais fatores de lentidão nos websites são a qualidade, quantidade e o tamanho das imagens. Utilizar imagens leves e em formatos de última geração como o .webp são recomendações do Google para obter a melhor performance. A recomendação para otimização de imagens é o plugin Tiny PNG em conjunto com o plugin webpExpress.
- 13. Icones É comum utilizarmos ícones em nossos projetos, seja para melhorar a usabilidade ou para deixar com um aspecto mais moderno. Porém há um erro comum entre a maioria de designers e desenvolvedores em utilizar bibliotecas de ícones inteiras, tais como Font Awesome, Material Design, Line Awesome entre outras, quando se utiliza apenas alguns ícones no projeto.
- 14. O que fazer ? Há diversas situações, o recomendado é carregar somente os ícones necessários, para esta tarefa podemos utilizar o icoMoon. Em outras situações, por exemplo caso precisarmos apenas de ícones de uma única biblioteca, prefira sempre carregar os arquivos SVG ao invés de arquivos de fonte.
- 16. Plugins de Chat, Facebook, Marketing, entre outros. É muito comum precisarmos de scripts externos para obter funcionalidades em nosso site, tais como chat online, recursos de análise, chatbots, integração com ferramentas de marketing. O grande problema quando utilizamos recursos externos é que precisamos carregar suas bibliotecas. Caso seja possível prefira sempre obter uma cópia dos recursos e carregar localmente em seu servidor.
- 17. Bônus: Flying Images e Flying Scripts Aqui indico 2 plugins que fazem um ótimo trabalho. Flying scripts: Este plugin funciona diferente dos outros plugins, ao invés de atrasar o carregamento de um script externo, ele simplesmente ignora completamente o script por um período definido em sua configuração. Flying Images: Ao invés de atrasar o carregamento de imagens, este plugin permite que você defina quais imagens não devem carregar à partir de uma certa altura da página, eliminando assim requests desnecessários.
- 18. Cache Outro fator imprescindível para obter um site rápido é utilizar um recurso chamado cache, nada mais é que salvar uma cópia do seu conteúdo no servidor e disponibilizar esta cópia para os usuários ao invés de fazer requisições a cada acesso. Existem diversos tipos de cache, podemos citar LS Cache, Varnish, Op Cache.
- 19. Plugin de Cache Há diversos plugins disponíveis na comunidade para esta função, os que indico são: Servidor Apache: WP Super Cache Servidor Nginx: WP Rocket ou W3 Total Cache Servidor Open Lite Speed ou Lite Speed: Litespeed Cache
- 20. Page Builders A facilidade que o Wordpress nos traz na criação de sites é um dos fatores que mais populariza este CMS, a cada dia novos membros entram na comunidade e começam a criar sites de forma fácil e descomplicada. Mas a maioria dos Builders ou construtores de Tema, pecam no quesito performance, os principais problemas é o carregamento desnecessário de bibliotecas de ícones inteiras, múltiplos arquivos de folha de estilo CSS, diversas bibliotecas javascript, e fontes externas.
- 21. Elementor O construtor de temas mais famoso do mercado, o construtor que mais tem cursos disponíveis e o mais fácil sem dúvidas. Além de ser o construtor de temas com mais templates e widgets da atualidade. Mas o mais popular tem alguns problemas, fontes externas, carregamento de biblioteca de icones, diversos arquivos css, bibliotecas JS. Felizmente com o uso de plugins é possível obter uma performance aceitável, tendo o carregamento dentro dos 3 - 2s.
- 22. Gutenberg O editor nativo do Wordpress, poucos recursos e complexo para edição de estilos, porém para programadores a melhor alternativa pois priva o cliente final de modificar o layout/design do projeto. Na utilização deste builder, o recomendado é criar os próprios blocos de conteúdo e utilizar campos personalizados, fornecendo assim apenas formulários para o cliente final.
- 23. Oxygen Um builder novo no mercado e com futuro promissor onde seu diferencial é a facilidade de uso e performance, além da semântica é claro. Um construtor de tema livre de frameworks, bibliotecas de icones e requisições externas. Com possibilidade de edição de códigos PHP no próprio construtor.
- 24. Bonûs Final O que testamos e realmente funciona, nossa receita de bolo! - Servidor VPS Contabo (Melhor Custo x Benefício) - Ambiente Open Lite Speed - WebpExpress - Lite Speed Cache - Flying Scripts - Flying Images - Flying Analytics - CloudFlare