Categorias Dicas e Tutoriais

BLOGGER: COMO REDUZIR CARREGAMENTO – SEO 2018

Faça com que seu blogger seja carregado mais rápido 2018 – Essas dicas oferecem um tempo de carregamento de página rápido, que aumentará suas visualizações gerais de página, diminuirá a taxa de rejeição e, se vinculado a monetização, melhorará seus números de vendas de sites afiliados. Você só tem alguns segundos para deixar sua primeira impressão mais incrível com seu blog.

Eliminar o bloqueio de renderização de Javascripts e CSS

Este é o principal fator que pode degradar sua velocidade de página. O bloqueio de renderização não é nada além de dificultar a renderização da página, o que significa que o conteúdo principal da página será impedido de ser carregado até que os arquivos Javascripts e CSS sejam totalmente carregados.

Em outras palavras, os visitantes da página específica só verão uma página em branco até que esses arquivos sejam carregados. Para ilustrar graficamente o que eu expliquei acima, dê uma olhada na imagem abaixo. Os arquivos de imagem (.png, .jpg, .gif) são o conteúdo da página e o Javascript, os arquivos CSS são os elementos de bloqueio de renderização.

A aparência da barra colorida na linha do tempo expressa que o elemento foi iniciado para carregar em seu navegador. Você não verá arquivos .js & .css no seu navegador. Tudo o que você pode ver é o conteúdo e as imagens. Como você vê no exemplo acima, existem elementos de bloqueio de renderização na página.

Então, como encontrar os elementos de bloqueio de renderização de qualquer página? Vá até o Pagespeed Insights do Google, insira o URL que deseja verificar e clique em Analisar.

Ele listará todos os arquivos JS e CSS de bloqueio de renderização dessa página.

Nota : Os resultados da página inicial podem variar da página Item (página de conteúdo). Portanto, teste sua página inicial e a página de conteúdo.

Como remover os elementos de bloqueio de renderização?

Se pudermos carregar os elementos do conteúdo ao lado dos arquivos JS e CSS, o problema será resolvido. Tecnicamente, esse método é chamado de carregamento assíncrono, também conhecido como Async.

Dependendo do modelo que você usa e dos widgets carregados, essa lista pode aumentar. Mas os elementos mencionados acima são comuns a todos. Os elementos de bloqueio mais comuns são os Javascripts, que possuem a seguinte sintaxe.

<script src = "LOCALIZAÇÃO DO ARQUIVO DE SCRIPT" type = "text / javascript"> </ script>

Portanto, para reduzir o tempo de carregamento, todos os arquivos de script devem ser carregados como assíncronos. Para carregar os arquivos de script, assíncrono, use a seguinte sintaxe.

<script src = "LOCALIZAÇÃO DO ARQUIVO DE SCRIPT" type = "text / javascript" async> </ script>

Como seus arquivos CSS são carregados com o modelo, você não terá nenhuma folha de estilo de bloqueio de renderização diferente do CSS padrão do Blogger.

Nota : Este método funcionará para todos os navegadores suportados pelo HTML 5. Para ampla faixa de compatibilidade, você deve otimizar o código. Aqui estão alguns ponteiros .

Esse método não funcionará para o JS ter retornos de chamada. Por exemplo: posts recentes, widgets de posts relacionados e alguns anúncios.

Remova o CSS padrão do Blogger indesejado e o JS

Ao usar o Blogger, você deve ver os seguintes elementos de bloqueio de renderização ao verificar sua página de itens com o PageSpeed ​​Insights.

https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css
https://www.blogger.com/…&zx=e35e54c0-dccd-405f-aae8-731de51ebc0e
https://www.blogger.com/static/v1/widgets/3401484092-widgets.js
https://apis.google.com/js/plusone.js
https://www.blogger.com/static/v1/jsbin/313381681-comment_from_post_iframe.js

Se você estiver usando um modelo personalizado do Blogger, os dois primeiros arquivos CSS serão indesejados. Se você não usa o Google e os comentários em seu blog, não é necessário o terceiro e o quarto arquivos JavaScript. O último arquivo JS não é necessário, caso você não tenha comentários padrão de blog em seu blog.

No entanto, acredito que você não esteja usando o modelo padrão do Blogger. Então, você não precisa dos dois primeiros arquivos CSS. Não há como remover esses dois arquivos CSS, já que o padrão é carregado pelo Blogger. Mas há uma solução alternativa.

Como remover os arquivos CSS indesejados

OBSERVAÇÃO IMPORTANTE : Se você aplicar o seguinte truque, seu layout será recolhido e todos os gadgets serão listados em uma única linha quando você verificar seu layout usando o painel do Blogger. Mas nada acontecerá com o design geral do seu site. Será parecido com o que parecia antes de você aplicar o truque. Mais tarde, também lhe direi como consertar isso.

Vá para o modelo → Editar HTML. Pesquisar por <b:skin>. Cortar as regras CSS (tudo) entre <b:skin>e </b:skin>. Agora cole entre <style type='text/css'>e </style>. Isso é tudo. Agora, copie o código abaixo e cole-o entre <head>e </head>e salvar o seu modelo.

& lt; tipo de estilo = & quot; texto / css & quot; & gt;
& lt;! - / *
<b: skin> <! [CDATA [* /]]> </ b: skin>

Depois de executar as etapas acima, vá para o layout no painel do Blogger e você verá um conjunto de gadgets recolhidos em uma linha. Claro que você pode recuperá-lo. Apenas desfaça o que fizemos acima. Isso é excluir o código acima entre <head>e </head>.

Corte as regras CSS que você colou entre <style type='text/css'>e </style>e cole-o entre <b:skin>e </b:skin>. Volte para a atualização de layout uma vez. Os gadgets teriam sido alinhados adequadamente.

Como remover widgets.js

Se você não usa comentários do G +, também é possível remover widgets.js do carregamento. Tudo o que você precisa fazer é procurar </body>e substituí-lo pelo código abaixo.

& lt;! - </ body>
- & gt; & lt; / body & gt;

Eu encontrei os truques acima em algum lugar nos fóruns de produtos do Google. Então, não posso dar créditos adequados para esse truque.

Remover a chave padrão e editar rapidamente os ícones do Blogger do carregamento

Você sabe que nenhuma das solicitações é diretamente proporcional ao tempo de carregamento. Vamos reduzir alguns pedidos indesejados da nossa página. Vá para pingdom , insira qualquer URL de sua postagem no blog e selecione Testar agora. Após o carregamento, procure por chave pressionando ctrl+ F. Se você pudesse encontrar a chave, ela é carregada sempre que uma página de item é solicitada. Pode ter sido ocultado usando estilos CSS quando você visualiza a página da web.

Eu sei que muitos blogueiros tentam alterar suas imagens padrão de blogger, o que é um desperdício de tempo. Usando esse truque, você pode remover imediatamente essas imagens do seu site.

Mas, uma solicitação é uma solicitação que poderia desacelerar seu site um pouco. Como cortá-lo? Também é uma tarefa fácil. Basta excluir os seguintes códigos no seu modelo, não importa onde ocorra.

Depois de uma pesquisa rápida no Google, descobri que muitos sites instruem as pessoas a ocultar esses ícones de chave inglesa e de edição rápida usando a display: noneregra css, que também é inútil. Para impedir que essas imagens sejam carregadas, basta remover os seguintes códigos do seu modelo.

Nota : Sempre que você adicionar um novo widget, a primeira linha do código a seguir será incluída. Então, exclua-o do seu modelo quando você criar um novo widget a partir do layout.

<b: incluir nome = 'quickedit' />
<b: incluir dados = 'post' name = 'postQuickEdit' />

Reduza o máximo possível o número e tamanho das imagens

A velocidade do site também depende do tamanho da página. Quanto maior o tamanho da imagem que você usa em seu conteúdo, maior é o tamanho da página. Então, reduzir o tamanho da imagem ajudaria. Eu uso o aplicativo de código aberto GIMP para reduzir o tamanho das imagens. Se você for usar o GIMP. Este guia deve ajudar.

Além disso, defina a altura e a largura da imagem na tag de imagem para aumentar a velocidade de renderização da imagem. Suponha que você tenha centenas de comentários em uma postagem e, em seguida, 100 solicitações sejam feitas para carregar as fotos (de comentaristas). Assim, você pode até considerar a desativação da imagem do comentarista em seu modelo do Blogger.

Não use fontes personalizadas

Fontes personalizadas podem parecer boas, mas também são elementos de bloqueio de renderização. Fontes personalizadas também causam problemas FOUT . Use fontes simples como Arial, Helvetica, Georgia, Verdana, serif, sans-serif no seu blog. As fontes listadas acima são processadas rapidamente nos navegadores e não precisam de nenhuma folha de estilo ou JS.

Se você quiser usar fontes personalizadas, dê uma olhada no guia sobre dicas para acelerar o carregamento das fontes do Google .

Carregar scripts somente nas páginas necessárias

Carregar scripts indesejados em uma página é inútil. Você pode usar tags condicionais do Blogger para carregar os scripts nas páginas apropriadas.

Por exemplo, você não precisa carregar o script de navegação da página nas páginas de itens. Assim, você pode usar o seguinte código para impedi-lo de carregar quando uma página de item ou uma página estática for carregada. Portanto, o script é executado somente quando a página inicial é solicitada.

<b: se cond = 'data: blog.pageType! = & quot; item & quot;' & gt;
<b: se cond = 'data: blog.pageType! = & quot; static_page & quot;'>
<script> SEU SCRIPT DE NAVEGAÇÃO DE PÁGINA </ script>
</ b: if>
</ b: if

Resultados

Depois de aplicar todos os truques acima, agora o gráfico em cascata se torna

A imagem acima explica claramente que todos os elementos de bloqueio de renderização são eliminados e eles são feitos para carregar async.

Explicação: Dê uma olhada mais de perto na imagem, os arquivos de imagem (png, jpg) são carregados ao lado do outro JS. Veja a tabela abaixo, para os resultados.

Antes da otimização Após a otimização
URL http://81zz.blogspot.in/2014/06/test-post-before-optimization.html http://80zz.blogspot.in/2014/06/test-post-after-optimization.html
Insights do PageSpeed Celular: 69

Área de trabalho: 85

Celular: 94

Área de trabalho: 86 (comentários do Blogger ativados)

93 (Comentários do Blogger desativados)

Pingdom Nota: 80

Requests: 54

Tempo de carregamento: 1.83s

Tamanho da página: 673.3KB

Nota: 82

Solicitações: 45

Tempo de carregamento: 1.19s

Tamanho da página: 585.8 KB

GTmetrix Page Speed ​​Grau: 92%

YSlow Grau: 78%

Page load time: 2.61s

Tamanho total da página: 1.2MB

Número total de pedidos: 52

Page Speed ​​Grau: 95%

YSlow Grau: 82%

Page load time: 1.46s

Tamanho total da página: 900KB

Número total de pedidos: 39

WebPagetest

(testado usando o Chrome)

Tempo de carregamento: 3.358s Tempo de carregamento: 2.611s

É o momento perfeito para contar minha história. Eu costumava receber 1000 visitantes (95% do Google) por dia neste blog. Antes de um mês, comecei a veicular anúncios Adversal. Eu usei seus códigos logo acima de cada postagem no blog. Não foi feito para carregar async. Assim, toda vez que um usuário visitava meu blog, o anúncio demorava cerca de 2 segundos para ser carregado e, nesse meio tempo, todos podiam ver o título da postagem.

Dia a dia não há visitantes que chegam ao meu blog reduzidos. Após uma semana, tornou-se 600 / dia (mesmo 95% do Google). Então, trabalhei no código do anúncio. Eu fiz isso carregar em um iframe (depois que todos os elementos da página são carregados). Depois de algum dia, meu tráfego do Google se tornou o que era antes de veicular anúncios. Portanto, o tempo de carregamento da página é obrigatório, pelo menos para todos os novos blogs. Para uma otimização perfeita, considere tudo (ou seja) Não de solicitações, tamanho da página, tamanho e não de imagens usadas..etc.

Eu compartilhei meu trabalho. Se você tiver dúvidas, teste-a por conta própria usando os URLs fornecidos acima. Leia o conteúdo dentro desse artigo também. Quais são os truques que você faz para tornar seu blog mais rápido?

Esta publicação foi modificada pela última vez em 2 de novembro de 2018 05:01

Disqus Comments Loading...

Posts recentes

WhatsApp deixará de funcionar em 2019; confira quais são os celulares!

WhatsApp deixará de funcionar em 2019 para alguns celulares Fizemos a lista dos celulares que o WhatsApp deixará de funcionar em… Leia mais

7 horas atrás

The Day After Tomorrow v1.0.103 APK – Download

Descrição do The Day After Tomorrow The Day After Tomorrow é um jogo móvel de sobrevivência humana no final do vírus.… Leia mais

8 horas atrás

YouTube v13.49.50 APK (Ad-Free, No Root, Black Theme)

Descrição do Youtube Curta seus vídeos e canais favoritos sem o ADS e com o recurso Background Play neste aplicativo… Leia mais

1 dia atrás

Perfect Player Premium v1.4.9.1 APK – Download

Descrição do Perfect Player Premium O Perfect Player Premium é um dos players de IPTV mais bonito e popular entre… Leia mais

1 dia atrás

Audiomack Platinum v4.1.5 APK – Baixar APK Grátis

Descrição do Audiomack Platinum O app do Audiomack Platinum já foi baixado mais de 10 milhões de vezes em menos… Leia mais

4 dias atrás

Fortnite v7.00.0 APK Oficial + Data – Jogo Battle Royale

Descrição do Fortnite - Battle Royale Fortnite é um dos melhores jogos Battle Royale já criado atualmente, com jogabilidade e… Leia mais

4 dias atrás