Otimizacao Frontend Wordpress 110814113500 Phpapp01

Otimizao Front-end para WordPress
Quem vos fala

@GugaAlves
Analista de Sistemas Ps Graduado em Gesto Estratgica de Mkt Digital Professor de Mkt Digital e WordPress Scio-Diretor da Agncia Nuva Criador do Tudo Para WordPress Vencedor do #DesafioSEO 09/10 da MestreSeo
O problema
Citao do livro High Performance Web Sites
Duvida?
Tem Soluo?
Vejamos algumas boas prticas para otimizar o tempo de carregamento de uma pgina e aliviar a carga do servidor
ndice
Querys PHP e Acesso ao BD Compresso Zlib Uso de Plugins W3 Total Cache CDN Compresso de .js e .css Otimizao de Imagens CSS Sprites Permalinks
Verso do WordPress Ferramentas Prova dos 9 Bibliografia
Querys PHP e acesso ao BD
Quase todo tema WordPress distribudo de forma que sua configurao seja da forma mais simples possvel. Estes temas vem com alguns cdigos genricos (chamadas de funes do WP), que podem ser facilmente substitudos depois de instal-lo em nosso blog. Isso feito para temas distribudos livremente mas infelizmente muito desenvolvedores acabam fazendo seu uso em projetos especficos tambm, ao invs de otimizar tais itens removendo Querys que fazem chamadas ao BD e retornam sempre o mesmo valor. Remover (ou no fazer uso de) algumas consultas php lhe ajudar a diminuir a carga do servidor e tambm fazer o seu site mais rpido.
Vejamos na prtica!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <link rel=stylesheet type=text/css media=screen href=<?php bloginfo(stylesheet_url); ?>/> <link rel=shorcut icon type=image/png href=<php bloginfo(template_url); ?>/favicon.jpg /> <link rel=alternate type=application/rss+xml title=RSS Feed href=<?php bloginfo(rss_url); ?> />
Precisa mesmo de tantas chamadas para itens e endereos estticos?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel=stylesheet type=text/css media=screen href=http://www.seusite.com.br/wp-content/themes/SeuTema/style.css/> <link rel=shorcut icon type=image/png href=http://www.seusite.com.br/favicon.jpg /> <link rel=alternate type=application/rss+xml title=RSS Feed href=http://www.seusite.com.br/feed/rss />
S nesse pequeno exemplo, temos 21 requisies a menos ! 21 ? Sim a funo bloginfo() faz 4 requisies a cada chamada !
Compresso Zlib
O WordPress, por padro, envia HTML no compactado para o navegador do visitante. Com algumas simples linhas de cdigo adicionado ao seu cabealho, voc pode comprimir a sada do WordPress em at 75% usando tecnologia de compresso Zlib!
Compresso Zlib
- Verifique se seu servidor tem o Zlib ativo atravs do phpinfo();
- Adicione o comando abaixo na 1 linha do header.php <?php ini_set('zlib.output_compression', 'On'); ini_set('zlib.output_compression_level', '1'); ?>
Compresso Zlib
HttpZip Compression Check - http://migre.me/5qeZh
Plugins no WordPress
Um pouco da minha viso
Porque ter muitos plugins pode deixar meu site lento?

A principal razo que nem todos os desenvolvedores criam seus plugins de maneira correta, portanto muitos deles pedem para carregar seus arquivos independente do plugin estar sendo realmente usado ou no.
Quando o WordPress solicita o processamento do wp_header(); e chama tais arquivos e a menos que existam condicionais corretos no cdigo do plugin, informando se deve ser carregado ou no o plugin para determinada pgina/post, o WordPress vai continuar a processar o plugin, chamando consultas de banco de dados para recuperar parmetros que voc definiu no painel, recuperar arquivos PHP adicionais e carregar arquivos .js e .css quando no so necessrios a todos.
Porque ter muitos plugins pode deixar meu site lento?

Todo o processo pode aumentar consideravelmente o tempo de carregamento de seu site, o que vai depender da quantidade de plugins ativos.
Portanto, ative apenas os plugins que forem realmente usados e evite o uso de plugins para funes simples demais. Para funes mais simples, prefira sempre criar suas funes no functions.php e as chamar apenas quando necessrio no seu tema, ok?
#FikDik !
Leia mais sobre o assunto em http://migre.me/5utlJ
Uso de Plugins
Resumindo: Use plugins apenas quando necessrio! No est usando um plugin temporariamente? Desative-o e evite insero de arquivos .css e .js que no esto sendo usados. No vai mais usar tal plugin? Apague-o da pasta! Achas que pode vir a precisar de um plugin novamente? Crie um arquivo .txt, salve na pasta wp-content/plugins e anote nele seus nomes. Se precisar novamente dele, s instalar de novo!
Plugins que no dispenso?

W3 Total Cache Otimizao de .css e .js, cache, CDN.
WordPress SEO SEO, Sitemap.xml, Breadcrumbs, Open Graph Protocol (Facebook). Akismet Ningum gosta de SPAM n? WP-DB-Backup Backup da base de dados sempre cai bem
Redirection Redirecionamentos 301 de maneira rpida (mas se forem poucos redirecionamentos, faa na mo mesmo, no .htaccess)
E alguns outros citados nos prximos slides!
W3 Total Cache
CDN
Content Delivery Network (CDN ou Rede de Fornecimento de Contedo) sistema de computadores interligados em rede atravs da Internet, que cooperam de modo transparente para fornecer contedo (particularmente grandes contedos de mdia) a usurios finais.
Akamai Amazon S3 MaxCDN CoralCDN
W3 Total Cache + MaxCDN - http://migre.me/5sCY0
Compresso de .js e .css

Com o plugin W3 Total Cache voc poder compactar seus arquivos .js e .css. Com isso, ao invs de chamar 5 .js e 4 .css, chame apenas 1 .js e 1 .css, diminuindo o tempo de carregamento
Dica:
Voc pode fazer a compresso pelo plugin e depois copiar os arquivos gerados por ele para usar manualmente, sem o plugin precisar o chamar
14 requisies 271 kb 4.44s
4 reqs 49kb 1.1s
Otimizao de Imagens
WP Smush.it
Usar imagens nos posts sempre uma boa ttica para dar mais vida a matria e aumentar a converso, mas imagens pesadas podem comprometer o tempo de carregamento. O plugin WP Smush.it faz uma compresso automtica de toda imagem enviada pelo Uploader do WP
SEO Friendly Images

Configurando este plugin, as tags ALT e TITLE sero preenchidas de acordo com a configurao feita.
CSS Sprites
Tcnica que consiste em se colocar as vrias imagens de fundo usadas no template do site em um arquivo nico e com a declarao CSS background-position mostrar em cada elemento que recebe uma imagem de fundo uma parte da imagem.
Aprenda como fazer com o mestre @Maujor: http://maujor.com/tutorial/css-sprites.php
CSS Sprites
Exemplo:
Menu da Apple.com
CSS Sprites
Sprite.me
Estrutura da URL
Configurando Permalinks
Estrutura de Permalinks
Como afirma o Codex, podem existir alguns problemas de desempenho com estruturas de permalink comeando com %category%, %postname%, %tag% e %author% O Desempenho seria melhor quando a estrutura da URL tivesse o ID do post, ou comear com uma coisa esttica, como /posts/postname%/ Entretanto...
Para ser honesto, eu no me preocuparia projetos de pequeno e mdio porte.
com isso em
Utilizando uma hospedagem decente e um plugin de cache configurado corretamente, tais problemas de desempenho deixaro de existir.
O que costumo usar:
/%category%/%postname%/
/%postname%/
/materias/%postname%/
Bnus: O que est por vir no WordPress 3.3? http://migre.me/5qY3d
Via @TudoParaWP (Tens mais novidades por l)
Mantenha seu WordPress atualizado sempre !

Com o lanamento de novas verses, o Wordpress continua a melhorar como um todo. A cada atualizao, a equipe WP e toda a comunidade mundial se esforam para deixar o WordPress mais rpida e segura. Entretanto, seu visitante no precisa saber qual verso est sendo usada, pois assim ele poder saber quais falhas ainda esto l. Portanto, remova sempre a verso do WordPress de seu cabealho usando a funo abaixo (no functions.php, claro) remove_action(wp_head, wp_generator);
Quanto tempo devo esperar para atualizar o WP?

Sempre recomendo esperar algumas semanas e ficar de olho no feedback que os usurios da comunidade WordPress esto dando sobre a atualizao. Se voc decidir fazer a atualizao, opte por fazer um teste primeiro em localhost ou algum ambiente especfico para testes, ok?
Mais detalhes em http://migre.me/4CdAh
Ferramentas
Firebug
Yslow
(tools.pingdom.com)
Pingdom Tools
Page Speed
Google
Prova dos 9
Boas dicas mas..
Funciona mesmo?
loco bicho! Que isso fera!

Veja voc mesmo o resultado de nossos testes:
DEPOIS ANTES
De 10.18 para 5.1 segundos de carregamento total do site !

E ainda falta usar CDN e CSS Sprites nesse case, vai melhorar mais!
Bibliografia Recomendada
Sobre o autor: Steve Souders trabalha no Google com web performance e iniciativas open source
E ai, curtiu?
Contatos: twiter.com/GugaAlves twitter.com/TudoParaWP (Pessoal) (Site)
http://br.linkedin.com/in/gugaalves/pt http://www.slideshare.net/gugaalves

Otimizacao Frontend Wordpress 110814113500 Phpapp01

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Otimizacao Frontend Wordpress 110814113500 Phpapp01

Загружено:

Авторское право:

Доступные форматы

Otimizao Front-end para WordPress

Quem vos fala

Citao do livro High Performance Web Sites

Verso do WordPress Ferramentas Prova dos 9 Bibliografia

Querys PHP e acesso ao BD

Querys PHP e acesso ao BD

Precisa mesmo de tantas chamadas para itens e endereos estticos?

Querys PHP e acesso ao BD

HttpZip Compression Check - http://migre.me/5qeZh

Um pouco da minha viso

Porque ter muitos plugins pode deixar meu site lento?

Porque ter muitos plugins pode deixar meu site lento?

Leia mais sobre o assunto em http://migre.me/5utlJ

Plugins que no dispenso?

E alguns outros citados nos prximos slides!

Akamai Amazon S3 MaxCDN CoralCDN

W3 Total Cache + MaxCDN - http://migre.me/5sCY0

Compresso de .js e .css

Compresso de .js e .css

14 requisies 271 kb 4.44s

4 reqs 49kb 1.1s

Compresso de .js e .css

SEO Friendly Images

Aprenda como fazer com o mestre @Maujor: http://maujor.com/tutorial/css-sprites.php

Via @TudoParaWP (Tens mais novidades por l)

Mantenha seu WordPress atualizado sempre !

Quanto tempo devo esperar para atualizar o WP?

Mais detalhes em http://migre.me/4CdAh

Boas dicas mas..

loco bicho! Que isso fera!

De 10.18 para 5.1 segundos de carregamento total do site !

Вам также может понравиться