Pagespeed e Pagerank
Os métodos de avaliação mudaram a algum tempo (mais drasticamente há 2/3 anos no momento que este texto foi escrito), mas no geral quase ninguém adotou ou se atualizou sobre as mudanças, que progressivamente estão em evolução a todo momento.
Os dois termos acima ainda muito utilizados no mercado mudaram drasticamente de seus conceitos iniciais. Apesar de não inutilizados, são de pouca importância no cenário geral como indicies de relevância, ou hiper-segmentados para pontos específicos de analise.
Os dois termos acima difundidos e populares que perderam relevância pelo Google. Apesar de os conceitos ainda estarem difundidos, são de pouca importância no cenário geral como indicies de relevância.
Pagerank
é o famoso “calculo mágico” que gera uma pontuação para cada site que o Google indexa, interferindo diretamente no posicionamento na pagina de resultados do Google e sua de relevância. Por muitos, mas muitos anos mesmo, era o Graal supra sumo de importância para posicionamento nos buscadores. Utilizando análise por linkbuilding, quantos mais links externos de qualidade apontarem para seu site, maior sua relevância.
Pagespeed
é ferramenta online no qual você pode obter insights sobre performance do seu site, ele gera e sugere dicas de otimização tecnicas, em sua maioria sobre velocidade, reação e bloqueios. É possível utilizar a ferramenta pelo clicando aqui. que está de cara e URL nova pagespeed.web.dev. Por anos foi o principal meio para obter relatórios de performance.
Qual a diferença do Google Lighthouse para o Pagespeed?
O PageSpeed é uma ferramenta online que avalia a performance técnica da página, já o Lighthouse é um mecanismo open-source de sugestão de otimizações de SEO, Conteúdo e Web Vitals. A metrificação do Lighthouse é utilizada como principal metrica nas ferramentas de Otimização como GTMetrix, web.dev/mesure e amplamente adotada entre ferramentas de analise SEO.
Lighthouse,
Web Vitals,
Conteúdos.
O pensamento para os novos métodos de entendimento, relevância, acessibilidade e importância de um site ou pagina mudou! Até achei que demorou muito apesar de ser compreensível a demora, como fazer uma maquina entender relevância de conteúdo e conceito autoral? Dados técnicos são fáceis, agora ate mesmo para nós pode ser uma tarefa complicada de avaliar e ranquear assuntos similares.
Bons tempos do SEO BlackHat e WhiteHat, alguém lembra das trolagens que pessoas sem ter o que fazer colocavam na primeira posição do Google? Quanta maldade.
Comparando com técnicas antigas de pontuação de relevância, hoje não importa se você usa keywords, técnicas de repetição de sinônimos, ou tenta dar aquela engambelada nos buscadores com técnicas da década de 90 que ainda são perpetuadas vigorosamente por ai. O que os buscadores analisam é conteúdo original, autoral, de qualidade e principalmente se o assunto é exatamente o que o usuário quer procurar. E obviamente a performance técnica da página. Conteudo é tudo!
Ou seja, forçar posicionamento por palavras ainda funciona, até você começar a ser encontrado e o Google entender que seu conteúdo é irrelevante e fake forçando técnicas de WhiteHat e BlackHat (se é que ainda existem esses termos, pode chamar de técnicas de SEO). Palavra essa que inclusive deveria ter entendida diferentemente de como “nasceu”, pois SEO só existe em quesitos técnicos nos moldes atuais, conteúdo com aquele B-A-Bá de regrinhas de Mkt já foi gongado.
Lembre-se que posicionar e subir algo é fácil, difícil é você permanecer no topo (o que é outro assunto que você pode ler clicando aqui). Ahh bem lembrado: Das é imediato, posicionamento, se bem feito e contrariando o começo dessa frase, é eterno.
Core Web Vitals
4 pilares principais analisados + meu queridinho, o PWA.
Performance, Acessibilidade, Melhores práticas e SEO. São os grupos principais analisados pelo Lighthouse e amigavelmente chamados de Web Vitals (como próprio nome diz, vitais para qualidade na web)
Performance
Rápido, estável e confiável, desde o momento do clique na URL para acesso, até o carregamento completo.
Acessibilidade e Usabilidade
Pensado para todos, estudos de composição de cor, leitura, tamanho de texto, facilidades de navegação…
Boas práticas
Otimizações, eficiência, segurança, respeito com os dados e o ambiente digital.
SEO e Semântica
Aquele mesmo que me expressei começo do artigo. Ele ainda existe, no ambito técnico, avaliando semânticas, tags, estruturações, etc.
Conceito básico de uso: Lighthouse e GTMetrix
O GTMetrix faz analises de performance que já utiliza do conceito Web Vitals e Engine do Lighthouse. Dispõe de diversas outras informações sobre. Bonus para o ótimo teste de simulação de abertura em conexões e países distintos. É de graça, assim como o Lighthouse do Google.
O Lighthouse possui diversas plataformas de uso, entre elas: plugin para Google Chrome e uma versão web, ambos com recursos limitados. Sugestão de uso fica entre versão em Node e CLI, com diversos recursos avançados. Recomendo CLI se você já esta acostumado com terminal.
Ciclo para otimização se resume a
somente 3 etapas
Coletar e analisar insights apontados pelos relatórios gerados
Aplicar as sugestões cabíveis apontadas
Voltar para o item 1 e começar novamente.
Analise de ciclo continua é um conceito base que pode e deve ser aplicado em qualquer processo para aumento de efetividade, entendimento e melhorias.
Performance, entrega e velocidade
Utilizar uma hospedagem de qualidade na nuvem com serviços balanceados de distribuição, o que irá resolver problemas como FirstBite, velocidade de entrega de dados e por incrível que possa parecer, também ajuda a reduzir custos de trafego.
Se você depende do seu site para gerar renda, como lojas virtuais, portais, venda de serviços, sempre se recorde disso: Seu site é sua fonte de trabalho, invista em uma infra estrutura de alta qualidade. Por que perder um usuário por conta de lentidão é tolice.
Se seu site demora mais de 2 segundos para carregar ou ao menos exibir a informação buscada pelo usuário é jogar acessos fora. Um usuário decide de ate 3 segundos de maneira espontânea se ira seguir navegando no site site ou não.
Utilize formatos de imagem em SVG se vetor ou WebP para bitmap, formatos até 90% mais leves que um JPG e outros. Estamos na era de compressões de imagem com qualidade excelente imagéticas. Forneça o recorte e dimensão das imagens sempre de acordo com o dispositivo utilizado pelo usuário. Fornecer somente 1 arquivo para todas resoluções de tela afeta seus Web Vitals.
Postergue tudo possível para carregamento assíncrono. Em outras palavras, priorize primeiro o carregamento dos itens exibidos antes da rolagem da pagina (lembra da regra dos 2 segundos?) Importante é o que o usuário vê primeiro, itens na rolagem podem vir em segunda prioridade.
Minifique e comprima, se você ja fuçou código-fonte do Google, Facebook ou outros grandes portais e ainda acha que é ilegível por que eles n˜åo querem ser “roubados”, você esta pensando na direção errada. Primeiro que não existe essa de querer “blindar” código fonte, então nem perca seu tempo com isso. O que é feito é super processo de compactação do código original.
Minificação é o processo de retirar espaços, comentários e tags sem utilidade no código, o que gera um código em uma linha só sem indentação. Vejo muito site usando a técnica, o que é ótimo, mas em termos de efetividade em performance, é baixo sua relevância. (Isso n˜åo quer dizer que você não deva fazer, sempre minifique o código).
Compressão é compilação de todo código fonte original (editável para humanos) na qual sano trocados nomes de variáveis, arquivos, e até mesmo re-escrita de códigos. Compressão é um tipo de super mega blaster minification. Ela que torna os códigos ilegíveis para humanos. Conceito geral é se eu uso um nome qualquer no código como “titulo_noticia” ela irá trocar todas referencias dessa variável pela letra “b”, ou seja, reduz drasticamente o numero de caracteres no código compilado final, que por sua vez, reduz o tamanho do arquivo, tempo de carregamento, abertura, e lembrando que computadores adoram coisas enxutas.
Acessibilidade e Semânticas
Todos são importantes e tem o direito terem uma experiencia acessível. Existem regras bem definidas e estudadas pela W3C e Mozilla MDN que definem detalhadamente todas normas de acessibilidade.
Cor não é o que você quer e acha lindo. Cores e combinações devem ser estudadas, tanto para composição de combinações, quanto para acessibilidade que analisa a facilidade de leitura do texto em cor X com fundos Y. Se quiser entender alem, monitores emitem luz, conceitos de cores absolutas como HEX estão começando a acabar. Técnicas como Accents são baseados em pensamentos de emissão de luz, energia e profundidade, como o formato HSLA utiliza, clique aqui para ler mais.
Tamanho de objetos principalmente fontes de texto também entram na regra de estudo acima, tamanhos diferentes com cores diferentes resultam em pontuações distintas.
Facilidade de utilização e recursos de fallback para outras necessidades mais especificas, como navegação preparada para aparelhos de audio, modos Dark e Light Mode, facilidade para interações motoras entre outros também fazem parte do pensamento.
Disposição da informação importa! O assunto é delongo, mas em resumo, você deve exibir de imediato e sem interações do usuário, o que ele esta em busca. Afinal o que tem de mais chato do que ser enganado por um Link-Bait que te incentiva a ler tudo e no final das contas nem fala do prometido?
Boas e melhores praticas éticas
Utilize headers com definição de cache em todos arquivos, principalmente imagens, js e css, e lembre-se arquivos carregados só devem conter o código que ira ser utilizado nela pagina. Ao mesmo tempo: Reduza ao máximo as requisições juntando tudo em um arquivo só.
Pois é… duas regras validas e importantes contraditórias entre elas. Como eu resolvo isso? PWA, service works e tecnologia a favor do usuário. Como você pode resolver isso? Bom ai é com você, sinceramente sem services works e balanceamento em tudo tb não sei. Reforçando a mensagem “Pare e comece a fazer tudo em conceitos PWA”. Kkkkk
Sirva códigos preferencialmente em HTML compilado ou tecnologias como Mode, Vue, React, etc. Paginas dinâmicas só quando for muito necessário, alem de diminuir o valor com processamento e transferencia de dados é muito mais leve e com menor tempo de entrega. Funcionamento lógico seria algo como: você só utiliza paginas dinâmicas, que necessitam de requisição em banco de dados ou estruturação quando algum conteúdo é gerado ou alterado, nesse momento você compila a pagina final em html e cache neles!
Não se esqueça que estamos em um mundo de cadeadinhos verdes nas URLs, certificado é obrigatório não só no seu site, mas em todo ambiente que compõem ele e conexões externas, alguém sem cadeado deixa todo mundo inseguro e os browsers reclamam. Lets encrypt entre outras diversas empresas certificadoras são sempre uma solução bem-vinda, mas lembre-se que são serviços instáveis e que em grandes volumes de acesso se tornam lentos no firstbite.
Layout shift? Sabe aqueles sites que vc abre, o texto aparece de cara e 5 segundos depois tudo muda e vc perde onde estava no texto? É isso, layout shift, que são erros comuns causados por má aplicação de JS, definições (não definidas) de área de elementos que acabam empurrando outros elementos e principalmente erro de carregamento assíncrono.
Responsivo não! Fluido, já se foi a época que existiam 4 tipos de resoluções principais. Se você ainda está no responsivo com quebras de wrapper absolutas (o que podem ser bem aplicadas em alguns casos) a recomendação e fluir! CSS3 e HTML5 já estão por ai a muito tempo e são preparados exatamente para lidar com recursos fluidos (e não, não pense em porcentagem %), são recursos como grid, fontes em tamanho clamp, alturas e larguras medidas pelo tamanho do monitor (vh vm), são muitos recursos que facilitam não só a experiencia do usuário como também menos linhas de quebras de queries para responsivo.
