Utilização do APO do Cloudflare para guardar um sítio Web WordPress e Aplicativo misto

picockpit.com é a nossa aplicação web Raspberry Pi OS - tem um blogue WordPress (para marketing e suporte de conteúdos) criado num subdirectório, em picockpit.com/raspberry-pi/

O Google Analytics mostrou-me que o blogue PiCockpit estava a carregar mais lentamente em países importantes, como os EUA.

Aqui está uma captura de ecrã de um teste de desempenho, antes de optimizar a página utilizando o Cloudflare:

Como pode ver, a página tem melhor desempenho na Alemanha (onde o servidor está localizado), e pior em Sydney, que está literalmente do outro lado do globo. (TTFB significa tempo para o primeiro byte).

O Google mostra resultados de pesquisa localizados, que incluem factores como a velocidade da página que é vista a partir do país específico em que o resultado da pesquisa é servido.

A fim de obter mais tráfego, queremos acelerar a página inteira.

Porquê o Cloudflare para a aceleração?

Um CDN é um passo útil na direcção certa - aceleraria, mas o Cloudflare oferece algumas características adicionais interessantes:

O Cloudflare oferece muitos servidores de ponta em todo o mundo, e tem baixas latências.

Além de apenas oferecer serviços CDN (caching do seu conteúdo), o Cloudflare também actua como um firewall da web e muito mais!

Configuração de Cloudflare para o seu Website

Para criar Cloudflare para o seu website, terá de ter acesso ao domínio e ser capaz de modificar os seus nameservers. Terá de configurar as entradas DNS correctas para o seu sítio web. O procedimento exacto está para além do âmbito deste artigo.

Oferecemos um serviço de consultoria e podemos fazer este trabalho por si, se estiver interessado.

APO para acelerar o WordPress

O destaque para as páginas do WordPress é a sua Serviço APO(optimizações automáticas da plataforma)

Para citar Cloudflare: "O factor diferenciador chave entre o APO Cloudflare e outras soluções tradicionais de cache de páginas e CDN é a sua capacidade de armazenar directamente HTML estático na fronteira do Cloudflare".

Com APO, instala o Plugin WordPress para WordPress Cloudflareque monitoriza a página e empurra as actualizações para Cloudflare. O Cloudflare, por sua vez, também armazena a saída HTML da sua página WordPress - o que irá acelerar significativamente a página para os seus visitantes. Desta forma, o seu servidor apenas verá pedidos que precisam de ser tratados de forma dinâmica.

Existe um conjunto de regras em torno do APO, que assegurará que as pessoas que iniciam sessão no seu backend WordPress, por exemplo, irão interagir com a sua página real.

Para mim é bastante transparente de utilizar, e é um plugin muito simples de utilizar.

Após a instalação, poderá configurá-lo em Settings/Cloudflare

Inicialmente, terá de iniciar sessão no Cloudflare - especificando o seu endereço de e-mail de início de sessão Cloudflare e uma chave API (gerar aqui a chave API Cloudflare). Depois disso, verá a seguinte interface:

Clique no botão Aplicar, clique no deslizador em Optimização Automática da Plataforma (opcionalmente definir "Cache por Tipo de Dispositivo") - é isso mesmo.

O Cloudflare deve detectar e activar automaticamente o APO, uma vez instalado o plugin. Verificar em Speed/Optimization (Velocidade/Optimização):

Conteúdo misto: Páginas de aplicação e páginas WordPress

picockpit.com é especial, porque não se trata apenas de uma página WordPress. A aplicação principal em picockpit.com utiliza chamadas API backend, carrega páginas dinâmicas, etc. - que o plugin APO Cloudflare não conhece, como é óbvio.

O cache destas páginas no Cloudflare levará a um comportamento aparentemente bizarro - por exemplo, irá carregar o Raspberry Pis de outro utilizador, ou trancá-lo na página, não lhe permitindo sair da sessão, etc.

O que queremos, portanto, é uma forma de desactivar o APO para certas páginas.

Desactivar o APO para certos URLs no Cloudflare

A APO tem integração de regras de página com Cloudflare. Isto significa que certas regras de página podem controlar o APO.

Nota importante: Não há menção às regras Cache que controlam a APO. Na minha experiência, as regras de cache pareciam não ter qualquer efeito!

Por conseguinte, estabelecemos regras de página a fim de desactivar o APO para páginas que não queremos que sejam colocadas em cache.

Navegar para Regras / Regras da Página:

Clique em "Criar Regra da Página" para adicionar uma nova regra. Estabeleci as seguintes regras:

Com regras de página, apenas o primeiro é aplicada a regra da correspondência. Portanto, a minha primeira regra é ter o caching Standard para tudo o que vive no espaço URL do blog, picockpit.com/raspberry-pi

O carácter asterisco (*) é um asterisco:

Depois disso tenho um par de regras "Cache Tudo" para URLs que sei que serão estáticas, por exemplo, incluindo imagens em picockpit e ficheiros JavaScript. Quero que estes sejam servidos também a partir do limite, para acelerar a experiência do utilizador.

Finalmente, tenho uma regra para tudo o resto em picockpit.com:

Esta vontade Bypass a cache para estas páginas, permitindo-lhes assim carregar dinamicamente a partir do seu servidor.

Sidenote: WebSockets

Cloudflare suporta WebSockets - em que PiCockpit confia (para executar tráfego MQTT desde o frontend JavaScript até ao backend). O Cloudflare afirma que entrarão em contacto com clientes individuaisse a utilização do websocket exceder o que eles consideram justo para qualquer nível de preços.

• Leia mais sobre a utilização do Cloudflare com WebSockets

Resultados dos testes de velocidade de aceleração

Pode usar Ferramenta de desempenho da KeyCDN para analisar diferenças de velocidade (antes / depois):

Antes da aceleração

Após a aceleração

Note que o picockpit.com se tornou um pouco mais lento em Frankfurt (devido ao tráfego ter de passar primeiro pela rede do Cloudflare!), mas tornou-se mais rápido noutras cidades, embora estejamos a substituir-nos.

O caching APO permite-nos acelerar o conteúdo, pelo que o tempo para o primeiro byte (TTFB) é menor. A maioria dos sítios tem agora um estado "verde" na ferramenta de teste.

Depuração de APO / conteúdo misto

As minhas Regras Cache não funcionam com APO?

O meu entendimento actual disto é que para páginas com APO apenas são suportadas Regras de Páginas, não Regras de Cache - por favor comente se tiver uma experiência diferente. (Pelo menos para o conteúdo HTML dinâmico que queremos controlar)

Como posso saber se a APO está activa na minha página?

Ao olhar para o cabeçalhos de resposta a sua página web e o Cloudflare servem.

Pode utilizar ferramentas de desenvolvimento cromadas, ou utilizar tendências de crescimento Verificação do cabeçalho de resposta HTTPque lhe permitirá verificar os cabeçalhos a partir de uma variedade de locais de teste.

Nota importante: ao depurar isto nas suas ferramentas de desenvolvimento cromadas, deve desmarcar a caixa de verificação "Desactivar cache".

Faça também não recarregar páginas usando Ctrl + Click! Cloudflare irá reconhecer isto e servir-lhe a página real a partir do seu servidor (ver abaixo para mais detalhes).

Páginas de desvio de nível de Cache

Para uma página que tenha definido como Cache Level Bypass, deverá ver o seguinte:

cf-apo-via: origem,regras de página
cf-cache-status: BYPASS

A origem,a parte das regras de página mostra que a definiu explicitamente como uma regra de página.

Ficheiros em cache

Para ficheiros em cache (.css, .js, imagens, etc.), verá o seguinte:

cf-cache-status: HIT

Conteúdo WordPress em cache

Para conteúdo WordPress armazenado em cache com sucesso, poderá ver:

cf-apo-via: tcache
cf-cache-status: HIT
cf-edge-cache: cache,platform=wordpress

Conteúdo WordPress ainda não em Cache

Este conteúdo ainda não se encontra na cache (por isso terá um estatuto MISS)

cf-apo-via: origem,miss
cf-cache-status: MISS
cf-edge-cache: cache,platform=wordpress

quando se recarrega este conteúdo, ele deve tornar-se um sucesso:

Carregamento manual de conteúdo em tempo real a partir do seu servidor

Pode forçar o Cloudflare a ir ao seu servidor em vez de lhe servir o conteúdo a partir da cache, pressionando Ctrl enquanto clica no botão de recarga em Cromo.

Os cabeçalhos de resposta serão agora (repare nas regras de não-cache vs. page-rules de cima!):

cf-apo-via: origem,no-cache
cf-cache-status: BYPASS
cf-edge-cache: cache,platform=wordpress

Problemas estranhos

Note que o seu navegador pode estar a carregar algumas páginas / conteúdo do seu cache local. Se se deparar com problemas estranhos, por exemplo, não conseguir sair de uma página, recomendo-lhe que verifique o Desactivar o cache na sua caixa de ferramentas de desenvolvimento, e executar novamente os testes.

O conteúdo aparece sempre como BYPASS e no-cache

• O "Disable cache" é verificado nas suas ferramentas de desenvolvimento? Isto forçará o Chrome a carregar todas as páginas que contornem o cache!
• Recarrega (por hábito?) páginas usando Ctrl + Click? Isto também obrigará o Chrome a obter uma cópia nova, o que por sua vez fará com que o Cloudflare contorne a cache.
• As regras da sua página estão correctamente estabelecidas? Tente desactivá-las / reordená-las. Lembre-se, as primeiro regra que se aplica é utilizada, o resto é ignorado para um determinado URL.

Precisa de serviços de consultoria / apoio em torno da criação de APO e Cloudflare para o seu próprio sítio Web WordPress?

A criação de APO e Cloudflare irá acelerar a sua página e dar-lhe uma melhor visibilidade SEO, e tempos de carregamento muito mais rápidos para os seus visitantes internacionais. Oferecemos serviços profissionais de consultoria para o apoiar nas suas necessidades de aceleração.

Contacte hoje a pi3g, para saber como o podemos ajudar a acelerar o seu sítio Web WordPress!