Certificação Magento Frontend – 15 dicas de performance para Front

Olá pessoal segue mais um artigo preparatório para o exame de frontend da Magento para quem visa a certificação, no tópico 7 o guia para certificação prioriza o CSS Look and Feel que significa saber aplicar o CSS no Magento com eficiência para poder tirar o máximo de perfomance sem perder atributos importantes de layout e design.

Segue a tradução de um artigo retirado do link abaixo que faz referencia a um link que não existe mais logo abaixo dele, tratando basicamente de dicas importantes para quem pretende incrementar performance na sua loja ou site através de um CSS otimizado, dicas importantes que serão cobradas em até 9% das questões da prova de certificação Frontend para Magento segundo o Frontend Guide.

Link de Referência:

http://moz.com/blog/15-tips-to-speed-up-your-website

Link de referência do link de referência:

http://www.seomoz.org/blog/15-tips-to-speed-up-your-website

magento-certificacao-imagem-01

Como funciona

Depois de ver alguns tweets e analisando o site SEOmoz , eu decidi escrever algumas dicas e truques que podem diminuir as páginas carregam o tempo , tanto quanto possível . Qualquer motor de busca quer fornecer aos usuários uma excelente experiência de usuário , assim como o Google, e um site rápido melhora a qualidade geral do site e aumenta a satisfação do usuário.

Todo mundo merece uma experiência web rápida.

Algumas das dicas a seguir são bem aplicado por SEOmoz , mas vou explicá-las de qualquer maneira por causa de sua utilidade geral.

” Experiências demonstram que o aumento da latência de busca web 100 a 400ms reduz o número diário de consultas por usuário por 0,6% a 0,2%. Além disso, os usuários buscam mais quanto mais tempo eles estão dentro do seu site.

Para atrasos maiores , a perda de pesquisas persistir por um tempo mesmo depois de latência retorna aos níveis anteriores ” . Google diz .

Vou listar uma série de fatores (+ dicas úteis de Yahoo e Google) e usará SEOmoz como o meu exemplo :

Nota: Fazer um backup antes de iniciar é necessário !

a) Servidor

Escolhendo a hospedagem adequada para o seu site é o primeiro passo para se iniciar um site. Hospedagem com uma configuração profissional pode ser de grande ajuda. Aqui você pode encontrar algumas boas dicas sobre a escolha de hospedagem.

1 . O cache do navegador Leverage

” Expira cabeçalhos dizer ao navegador se um recurso em um site precisa ser solicitada a partir da fonte , ou se ele pode ser obtido a partir do cache do navegador.

Ao definir um cabeçalho Expires para um recurso, como todas as imagens JPEG , o navegador irá armazenar . esses recursos em seu cache a próxima vez que o visitante volta para a página que irá carregar mais rápido , pois o navegador já terão essas imagens disponíveis ” , diz CJ Patrick em um belo artigo sobre como usar expirar cabeçalhos para definir cache : expira cabeçalhos para SEO

Infelizmente , parece que SEOmoz não usa de validade para folhas de estilo e imagens.

2 . Ativar Keep-Alive

” Um sinal de Keep-Alive é muitas vezes enviado em intervalos pré-definidos e desempenha um papel importante na Internet.

Depois de um sinal é enviado , se não houver resposta , o link é considerado baixo e dados futuros serão encaminhados através de outro caminho até o link é de novo ” , diz o wikipedia .

Na verdade, o HTTP Keep-Alive permite conexões TCP para se manter vivo e isso ajuda a reduzir a latência para solicitações subseqüentes .

Então, entre em contato com o seu provedor de hospedagem e dizer-lhes que pensar duas vezes sobre isso!

A maioria das empresas de hospedagem desativar este recurso, (incluindo o exército de SEOmoz ) , porque é um recurso opcional (quando ele transfere menos de 60 bytes por pedido).

3 . Ativar compactação gzip

” Gzip é o método de compressão mais popular e eficaz atualmente disponível e geralmente reduz o tamanho da resposta em cerca de 70 %. Cerca de 90 % do tráfego da Internet de hoje viaja através de navegadores que pretendem apoiar gzip “, diz Yahoo .

Gzipping reduz o tamanho da resposta de HTTP e ajuda a reduzir o tempo de resposta . É uma maneira fácil de reduzir o peso da página . Você pode habilitá-lo adicionando o seguinte código ao seu arquivo htaccess . :

# Compressa texto , html, javascript , css, xml:
Texto AddOutputFilterByType deflacionar / plain
Texto AddOutputFilterByType deflacionar / html
Texto AddOutputFilterByType deflacionar / xml
Texto AddOutputFilterByType deflacionar / css
Aplicação deflacionar AddOutputFilterByType / xml
AddOutputFilterByType deflacionar application / xhtml + xml
AddOutputFilterByType deflacionar application / rss + xml
AddOutputFilterByType deflacionar application / javascript
AddOutputFilterByType deflacionar application / x- javascript
# Ou, comprimir certos tipos de arquivos por extensão :

SetOutputFilter deflacionar

Ou, use o seguinte código PHP no topo do seu arquivo HTML / PHP:

<? php if ( substr_count ( $ _SERVER

[‘ HTTP_ACCEPT_ENCODING ‘ ], ‘ gzip ‘)) ob_start ( ” ob_gzhandler “); mais ob_start (); ? >

Ou, simplesmente, utilizar plugins para o seu CMS ( como o plugin WP compressão HTTP para WordPress ) .

SEOmoz usa gzip.

No entanto, alguns javascripts externos ( AdRoll , simplificados e CloudFront ) poderia reduzir o tamanho de transferência de mais de 60% usando gzip.

4 . Fazer página de destino redireciona em cache

As páginas móveis redirecionar os usuários para uma URL diferente (por exemplo www.seomoz.org para m.seomoz.org ) para fazer um redirecionamento em cache pode acelerar o tempo de carregamento da página para a próxima vez visitantes tentar carregar site.

Use um redirecionamento 302 com um cache de um dia.

Ele deve incluir um Vary: User-Agent , bem como um Cache- Control: private .

Dessa forma, apenas os visitantes a partir de dispositivos móveis irá redirecionar .

Desde SEOmoz não suporta qualquer versão móvel específico , ele não pode ter esse problema (alguém deve tomar cuidado com o mau comportamento do site da SEOmoz em dispositivos móveis ) !

5 . Use um CDN

Como funciona a CDN

A rede de distribuição de conteúdo (CDN) é uma coleção de servidores web distribuídos em vários locais para satisfazer de forma mais eficiente para os usuários.

O servidor selecionado para a entrega de conteúdo para um usuário específico normalmente é baseado em uma medida de proximidade da rede.

Por exemplo, o servidor com o menor número de saltos de rede ou do servidor com o tempo de resposta mais rápida é escolhida. Como você pode ver na imagem acima , ele carrega a partir de diferentes servidores , com base na região do visitante.

Você pode comparar CDN hospedagem com padrão da web de hospedagem aqui.

Parece que SEOmoz usa Amazon CloudFront para essa funcionalidade e eu tentei MAXCDN , é impressionante também.

Você pode gerenciar seus caches e muitas outras ferramentas úteis em um WordPress usando W3 Total Cache.

b ) Os elementos de conteúdo

Desde que você não tem acesso total a seu servidor, elementos de conteúdo são as coisas mais importantes que você pode manipular . Vamos começar com a fraqueza mais evidente da SEOmoz:

1 . minimizar redirecionamentos

Às vezes, para indicar o novo local de uma URL , controlar os cliques , conectar diferentes partes de um site em conjunto ou de reserva de vários domínios , você precisa redirecionar o navegador a partir de uma URL para outra .

Redireciona desencadear uma solicitação HTTP extra e adicionar latência.

Apenas manter redirecionamentos que são tecnicamente necessário e você não pode encontrar qualquer outra solução para isso.

Estas são as recomendações do Google :

Nunca referência URLs em suas páginas que são conhecidos para redirecionar para outras URLs .

Seu aplicativo precisa ter uma maneira de atualizar referências de URL sempre que recursos mudar sua localização.

Nunca exigir mais de um redirecionamento para chegar a um determinado recurso .

Por exemplo, se C é a página de destino , e há dois diferentes pontos de partida , A e B , A e B deve redirecionar diretamente para C , um nunca deve redirecionar intermediária para B.

Minimizar o número de domínios adicionais que emitem redirecionamentos mas na verdade não servem conteúdo. Às vezes, há uma tentação para redirecionar de vários domínios , a fim de reservar espaço para nome e pegar a entrada do usuário incorreto ( com erros ortográficos / URLs digitado incorretamente ) .

No entanto, se você treinar os usuários a pensar que eles possam chegar ao seu site a partir de várias URLs , você pode acabar em um ciclo caro de compra de novos domínios apenas para parar cybersquatters de assumir todas as variantes do seu nome.

2 . Remover seqüências de consulta a partir de recursos estáticos

Você não pode armazenar em cache um link com um “?” em sua URL , mesmo que um Cache-control: cabeçalho público está presente.

O ponto de interrogação atua o mesmo que Ctrl + F5.

Use seqüências de consulta apenas para recursos dinâmicos. SEOmoz está usando dois URLs dinâmicos com “?” por causa de usar KISSmetrics , mas 2-3 consultas são 😉 razoável.

3 . Especificar um conjunto de caracteres

Especificar um conjunto de caracteres em cabeçalhos HTTP para acelerar a renderização do navegador. Isto é feito através da adição de um simples pedaço de código no seu cabeçalho :

Nota: Algumas funções de uso CMSs para conjunto de caracteres ( como o WordPress com < bloginfo php ( ‘charset’ ); ? >).

Sugiro que, se você tem certeza sobre o seu conjunto de caracteres, escrevê-lo em vez de usar as funções PHP.

Isso ajuda a minimizar o tamanho do pedido , de modo a tentar usar HTML em vez de PHP em todos os lugares que é possível.

4 . Minify seus códigos

Remoção de comentários HTML , seções CDATA espaços em branco e os elementos vazios irá diminuir o tamanho da página, reduzir a latência de rede e acelerar o tempo de carga.

Você pode usar ferramentas on-line simples, como Will Peavy minifier , e se você estiver usando o WordPress, Autoptimize pode otimizar e comprimir os seus códigos e suporta CDN também. By the way, SEOmoz poderia salvar 620B comprimindo seu HTML.

5 . Evite solicitações ruins

Diferença entre página optimizada e página de solicitação ruim

Links quebrados resultam em 404/410 erros.

Estes causam pedidos de desperdício.

Corrija suas URLs quebradas ( uma atenção especial para imagens).

Use verificador de links on-line quebrado ou usar o WordPress Link Checker gratuitamente.

Você também pode ler sobre Xenu Link Sleuth e gritando ferramentas no SEOmoz que pode ser realmente útil.

6. Sirva recursos de uma URL consistente

É melhor ouvir a recomendação do Google:

” Para obter recursos que são compartilhados por várias páginas , certifique-se de que cada referência ao mesmo recurso usa uma URL idêntica .

Se um recurso é compartilhado por várias páginas / sites que apontam para o outro, mas são hospedados em diferentes domínios ou nomes de host , é melhor para servir o arquivo a partir de um único nome de host do que a re servir – lo a partir do nome do host de cada documento pai. neste caso , os benefícios podem superar o cache lookup sobrecarga DNS.

Por exemplo, se ambos mysite.example.com e yoursite . example.com usar o mesmo arquivo JS e links mysite.example.com para yoursite.example.com ( o que exigirá uma pesquisa de DNS de qualquer maneira) , faz sentido apenas para servir o arquivo JS de mysite.example.com . neste forma, o arquivo é provável que já esteja no cache do navegador quando o usuário vai para yoursite.example.com “.

7 . Reduzir pesquisas de DNS

Reduzir pesquisas de DNS

Pesquisas de DNS levam uma quantidade significativa de tempo para procurar o endereço IP para um nome de host .

O navegador não pode fazer nada até que a pesquisa seja concluída.

Reduzir o número de nomes de máquinas únicas pode aumentar o tempo de resposta .

Basta olhar como uma pesquisa de DNS pode demorar cerca de 3 segundos de tempo de carregamento em SEOmoz .

Você pode medir o seu, usando Pingdom Tools .

Eu quero mencionar que, quando eu re-testado a página inicial do SEOmoz.org de um servidor em Dallas, que apresentou melhores resultados do que ele fez antes de começar a escrever este artigo.

Nota : Sprite suas imagens. Isto significa que as imagens de venda que estão carregando cada página de seu site em conjunto para reduzir suas pesquisas de DNS .

SEOmoz combinado lotes de suas imagens em uma só, como esta imagem do sprite .

Você pode encontrar mais informações sobre SpriteMe

c) CSS , JS e imagens

1 . Especifique as dimensões da imagem

Seu navegador começa a processar uma página antes de as imagens são carregadas .

Especificando as dimensões da imagem ajuda a envolver em torno de elementos não substituíveis.

Se nenhuma dimensão são especificados , o seu navegador irá refluir uma vez que as imagens são transferidas .

A fim de fazer isso em elementos , altura uso e especificações etiquetas de largura .

Nota: Não use as dimensões para dimensionar as imagens em tempo real – o usuário ainda será baixar o tamanho do arquivo original , mesmo que a imagem não ocupa tanto espaço na tela.

2 . otimizar imagens

Comentários em arquivo de imagem

As imagens podem conter comentários extras e usar cores inúteis .

Manter tamanhos de imagem a um mínimo é uma grande ajuda para usuários em conexões lentas.

Tente salvar em formato JPEG.

Você pode usar um CTRL + SHIFT + ALT + S atalho para salvar uma imagem otimizada em Adobe Photoshop , use Yahoo! Smush.it , ou se você estiver usando o WordPress , você pode instalar o plugin WP Smush.it .

SEOmoz poderia salvar mais de 50KB , otimizando imagens na página principal , particularmente aqueles no slider.

3 . Coloque o CSS no topo e na parte inferior JS

Colocando stylelsheets no cabeçalho do documento da página proíbe renderização progressiva , de modo que os navegadores irão bloquear a renderização para evitar ter de redesenhar os elementos da página .

Na maioria dos casos, os usuários terão de enfrentar uma página em branco até que a página é carregada completamente .

Isso também ajuda você a fazer uma página web padrão de acordo com os padrões W3 . E , coloque o seu código javascript na parte inferior da página , pelo mesmo motivo .

Existem outras formas de acelerar uma página da web , mas eu tentei escrever sobre os mais importantes que até mesmo blogueiros profissionais ( como o SEOmoz ) às vezes pode esquecer.

É claro que a velocidade do site não é o objetivo principal, mas até mesmo um site ideal com um tempo de carregamento de ruim vai achar que é difícil alcançar o sucesso.

Execute site o mais rápido possível, a fim de alcançar seus objetivos mais rápido.

Agora, deixe-me repetir : não se esqueça de fazer um backup antes de fazer alterações e não se esqueça de compartilhar suas dicas ou perguntas por comentar . 🙂

Bom pessoal este é o artigo que falava espero ter sido de grande valia tê-lo traduzido para vocês

Até mais

2017-01-24T20:25:08+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x