Opinion · 1 min
Improvement on blog performance
30 → 90 on mobile, 55 → 99 on desktop, nothing removed
This morning Google’s PageSpeed gave tunbru.com 30 on mobile and 55 on desktop. The page was blocked for 32 seconds on a phone.
The culprit was the 3D tunnel on the homepage. Google tests on a machine with no graphics card, so the scene was drawn by the processor, every frame, forever. On my laptop it looked smooth. On a phone without a GPU it was a wall.
The fix was not to delete it. The scene now notices when it is being drawn in software and shows a single still frame; anyone with a graphics card still gets the flight. Around it: text is compressed, the voice-call library loads only when you start a call, the second scene loads only when you scroll to it, fonts no longer hold up the first paint, the headline no longer jumps when they arrive, and two scripts now wait until the page is drawn.
| Before | After | |
|---|---|---|
| Mobile score | 30 | 90 |
| Desktop score | 55 | 99 |
| Blocking time, mobile | 32,300 ms | 40 ms |
My opinion: measure on the machine your visitor has, not on yours. The agent only found it once it reproduced Google’s conditions locally, forcing software rendering, and checked every change against them. It is the same rule as the testbed for loops: what you don’t watch under real conditions, you don’t know.
Get the free cheat sheet
Send it to my inboxOpinião · 1 min
Melhoria no desempenho do blog
30 → 90 no telemóvel, 55 → 99 no computador, sem remover nada
Esta manhã o PageSpeed da Google deu ao tunbru.com 30 no telemóvel e 55 no computador. A página ficava bloqueada 32 segundos num telemóvel.
O culpado era o túnel 3D da página inicial. A Google testa numa máquina sem placa gráfica, por isso a cena era desenhada pelo processador, frame a frame, sem parar. No meu portátil parecia fluida. Num telemóvel sem GPU era uma parede.
A solução não foi apagá-la. A cena agora deteta quando está a ser desenhada em software e mostra uma única imagem parada; quem tem placa gráfica continua a ter o voo. À volta: o texto vai comprimido, a biblioteca da chamada de voz só carrega quando inicia uma chamada, a segunda cena só carrega quando chega até ela, as fontes já não atrasam o primeiro ecrã o título já não salta quando elas chegam e dois scripts esperam agora até a página estar desenhada.
| Antes | Depois | |
|---|---|---|
| Pontuação, telemóvel | 30 | 90 |
| Pontuação, computador | 55 | 99 |
| Tempo bloqueado, telemóvel | 32 300 ms | 40 ms |
A minha opinião: meça na máquina que o seu visitante tem, não na sua. O agente só o encontrou quando reproduziu localmente as condições da Google, forçando o desenho em software, e verificou cada alteração contra elas. É a mesma regra do banco de testes para loops: o que não observa em condições reais, não conhece.