otimização de websites
para ganho de
performance & resiliência
wordcamp são paulo 2017
por northon torga
$whoami
northon torga
unix system engineer, se diverte com terminal há 10 anos, foi moderador de movimentados fóruns online e hoje é orgulhosamente membro da Sucuri Security (WAF team).
2
por que ter um website rápido?
buscadores
desde 2010, a velocidade de um website impacta em seu ranqueamento no Google1.
[1] https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
conversão
usuários abandonam com mais frequência websites que levam mais de 3s para carregar2.
[2] http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/
user experience
websites lentos causam má impressão e tendem a ser menos compartilhados nas redes sociais3.
[3] https://www.facebook.com/business/news/improving-mobile-site-performance
3
3 pilares principais
os fatores que mais influenciam na performance de um website
4
1) hospedagem ideal
5
| A | B | C |
data center | tier IV (4), ISO, SOC and PCI DSS | tier III (3) | tier II & I (2 & 1) |
storage | ssd com garantia de IOPS | SAS 15k RAID 10 | disco magnético |
network | 10 gbps+ | 1 gbps | 100 mbps |
caching | redis, memcached & esi cache server based | php caching | - |
extras | B + nginx/litespeed, http/2, CPU burst, 99.9% SLA, plano de recuperação de desastre, ssh/sftp | apache com mpm event, backups automáticos, SSL via SNI | - |
2) caching setup
6
cdn cache
full page cache
opcache
db cache
3) qualidade do conteúdo
tema
use temas simples, de preferência frameworks como o Odin, GeneratePress, OceanWP, etc
plugins
evite plugins inseguros, desatualizados ou que consumam recursos demais
imagens
use sprites, font icons, SVG e quando necessário o uso de imagens, lembre-se de otimizá-las
integracões
software as services como sistemas de busca, comentários, chats e similares podem reduzir a pressão em seu servidor
mimificação & gzip
reduza o número e o peso de assets através de mimificação e compreensão para economizar banda e ciclo de processamento
async/lazyload
melhore a experiência do usuário ao evitar carregar Javascripts no meio do processo de renderização da página web
7
“A simplicidade é o último grau de sofisticação”
Leonardo da Vinci
"" –
8
como testar?
externamente
GTMetrix, WebpageTest, Pingdom, Pagelocity, LoadImpact, Loader.io, Blazemeter, etc
internamente
xdebug (localmente), query monitor, p3 profiler, siege & netdata, curl, web server response time log, etc
9
agradecimentos
Obrigado a todos que permitiram a realização desta palestra:
10