Skip to main content

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.

Caso você queria se aprofundar sobre o Google PageSpeed, pode dar uma olhada nas leituras aqui e aqui enquanto nosso guia fica pronto.

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.

GTMetrix

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.

Lighthouse
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.

Digital thinker, spacetime enthusiast, human-life philosopher, techno lover, love all-art-kinds and believes that AGI's cames for bettering the world. Work for a digital world made for humans, one qubit at a time.

Vai um cookie ai? Utilizamos alguns cookies para personalizar sua experiência de forma inteligente ao navegar no site. Os dados coletados são anônimos, caso não haja sua autorização explicita para identificá-lo. Aceitando os cookies você concorda com nossa Política de Cookies.

Privacy Settings saved!
Configurações de Privacidade

Vai um cookie ai? Suas informações seguras e no seu controle. Quando você navega neste site, algumas informações e dados diversos podem ser gravados no seu navegador e utilizados por nós para analisar e melhorar sua experiência no site. Você pode controlar as opções de privacidade nessa área.


Esses cookies são necessários para o funcionamento do website e não podem ser desativados. Os cookies abaixo não guardam nenhuma informação pessoal sua.
Os seguintes cookies são utilizados:
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec

Esses cookies são necessários para o funcionamento do website e integrações de contato via formulários, links, mensagens, ligação e outros sistemas, e não podem ser desativados. Os cookies são utilizados somente quando há intenção explícita do usuário em requerer o contato para obter informações adicionais sobre os conteúdos ou serviços. Os cookies e dados são utilizados a partir do momento de envio das informações por algum dos pontos de contato neste website. Os nomes dos cookies podem incluir, mas não se restringindo ou limitando aos abaixo:
  • form_data
  • twilio_data

Recusar todos cookies
Aceitar todos cookies