Como usar BunnyCDN para imagens adaptáveis ShortPixel
ShortPixel Adaptive Images usa seu próprio CDN, que não oferece desempenho consistente. Este guia lhe dirá como configurar Coelho CDN para imagens adaptativas ShortPixel.
O que é ShortPixel?
CurtoPixel é um serviço/plugin de compactação de imagem. Ele compacta todas as suas imagens na mídia WordPress automaticamente, com a melhor qualidade e taxa de compactação.
Embora ShortPixel apenas comprima imagens, Imagens adaptativas ShortPixel compactar imagens, redimensionar e entregá-las como WebP dinamicamente a partir de seu próprio CDN.
Por que CoelhoCDN?
Um dos CDN mais rápidos com mais de 37 pops e extremamente barato!
Você pode ler minha análise e comparação aqui:
Leia também
Configurar BunnyCDN para imagens adaptáveis ShortPixel
Crie uma conta em Coelho CDN se você ainda não criou.
Vá para 'Pull Zones' e crie uma nova.
No nome do host, insira o nome desejado. No URL de origem, digite “https://no-cdn.shortpixel.ai/”.
Agora vá para as configurações do ShortPixel Adaptive Images -> Avançado.
No URL da API, insira o nome do seu put no seguinte formato:
Feito! Suas imagens agora serão veiculadas via BunnyCDN + ShortPixel Adaptive Images!
Você também pode adicionar seu próprio subdomínio personalizado ao BunnyCDN (opcional).
Comente abaixo se você tiver alguma dúvida ou feedback. Eu leio e respondo a cada um deles em 8 horas!
Um blogueiro e desenvolvedor, compartilhando tudo que aprendi sobre como otimizar sites WordPress para velocidade
Como usar BunnyCDN para imagens adaptáveis ShortPixel
Se a maioria dos seus visitantes vem de sites do Google (orgânicos) ou de mídia social, provavelmente eles estão visitando diretamente a versão HTTPS.
Como acelerar o redirecionamento de HTTP
Mas e se houver visitantes que visitam diretamente o seu site inserindo o domínio no navegador?
No meu caso, costumo digitar “wps”, o Chrome sugere “wpspeedmatters.com” e pressiono enter.
Por padrão, o navegador envia a solicitação para “http://wpspeedmatters.com” e posteriormente redireciona para “https://wpspeedmatters.com”.
Por que HTTP para HTTPS é lento?
Se você configurou https nas configurações do WordPress, o WP cuidará do redirecionamento.
Mas isso será feito por PHP.
Dependendo do seu provedor de hospedagem e da carga, o redirecionamento via PHP pode ser lento. É melhor descarregá-lo do PHP.
Como acelerar o redirecionamento de HTTP
Etapa 1: configurar o servidor Web para redirecionamento HTTPS
Configurar servidores web como Nginx/Apache/LiteSpeed para fazer o redirecionamento será sempre mais rápido que PHP.
Apache/LiteSpeed
Se você possui um servidor web Apache/LiteSpeed, adicione o seguinte código ao .htaccess arquivo:
RewriteEngine On RewriteCond %HTTPS off RewriteRule ^(.*)$ https://%HTTP_HOST%REQUEST_URI [L,R=301]
Nginx
No Nginx, adicione a seguinte configuração:
server listen 80; server_name domain.com www.domain.com; return 301 https://domain.com$request_uri;
nuvemflare
Se você estiver usando Cloudflare, as coisas são muito fáceis. Vá para configurações de SSL/TLS -> Certificados de borda e habilite 'Sempre usar HTTPS'.
Como acelerar o redirecionamento de HTTP
Opcionalmente, habilite 'Reescritas automáticas de HTTPS'.
Dica Adicional
Você também pode adicionar uma meta tag para informar ao navegador para usar HTTPS para todas as solicitações dentro de uma página.
Como acelerar o redirecionamento de HTTP
Etapa 2: habilitar HSTS
HSTS ou HTTP Strict Transport Security é um cabeçalho de resposta.
Em palavras simples, isso informa ao navegador “ei, este site terá HTTPS para X não. dias, então use HTTPS por padrão”.
Então, da próxima vez que alguém entrar em “wpspeedmatters.com” ou “http://wpspeedmatters.com”, o navegador abrirá diretamente “https://wpspeedmatters.com”.
O HSTS também tem alguns benefícios de segurança, ataque MitM (ataque Man in the Middle).
Apache/LiteSpeed
Adicione o seguinte código a .htaccess arquivo:
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Nginx
No Nginx, adicione a seguinte configuração:
server listen 443 ssl; add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
nuvemflare
Em configurações SSL/TLS -> Certificados de Borda e Habilitar HSTS.
Configure-o conforme abaixo:
Verifique o HSTS
Você pode verificar se está funcionando ou não verificando o cabeçalho da resposta:
Você também pode visitar https://hstspreload.org/ para verificar o mesmo.
Etapa 3: enviar para a lista HSTS do Chrome
Mesmo que você tenha habilitado o HSTS, o usuário que visitar seu site pela primeira vez terá um redirecionamento de HTTP para HTTPS.
Mas o Chrome mantém um lista de sites habilitados para HSTS codificado no navegador (outros navegadores também usam esta lista). Portanto, se o seu site for adicionado a essa lista, chega de redirecionamentos!
Como acelerar o redirecionamento de HTTP
Vá para https://hstspreload.org/ e envie seu domínio.
Conclusão
Muitas vezes vi o redirecionamento levar cerca de 1s em alguns provedores de hospedagem compartilhada. Isso pode afetar seu FCP, FMP etc.
Freqüentemente testamos a versão HTTPS em ferramentas de teste como GTmetrix, Informações do Google PageSpeed. Mas os usuários que visitam diretamente nosso site podem ser HTTP.
No meu caso, cerca de 30% dos visitantes são ‘diretos’.
Comente abaixo se você tiver alguma dúvida ou feedback. Eu leio e respondo a cada um deles em 8 horas!
Resultados de pesquisa melhores e mais rápidos
Recentemente, ativei o 'Acompanhamento de pesquisa de sites' no Google Analytics para ver o que as pessoas estão pesquisando em meu blog.
Os resultados foram bastante interessantes. Uma boa porcentagem das palavras-chave de pesquisa contém erros de digitação que resultaram em zero resultados de pesquisa!
Aqui estão alguns exemplos:
Então pesquisei bastante e acabei usando Algolia.
O que é Algolia?
Resultados de pesquisa melhores e mais rápidos
Algolia é uma “Pesquisa como serviço”. Você fornece o conteúdo a eles e eles fornecem uma API para pesquisa.
Por que Algolia no WordPress?
Descarregar pesquisa do WordPress – Cada vez que você pesquisa uma palavra-chave no WordPress padrão, a palavra-chave é pesquisada na tabela MySQL, o que é uma tarefa que consome muitos recursos, especialmente se houver muitos posts.
Resultados de pesquisa mais rápidos (extremamente rápidos) – Como mencionei acima, a pesquisa padrão consome muitos recursos e pode rapidamente se tornar lenta em sites grandes. Algolia pode obter resultados em <5ms!
Melhor experiência do usuário – Sugestões automáticas, tolerância a erros de digitação, resultados instantâneos, palavras-chave em destaque e muito mais.
Antes e depois de usar a pesquisa Algolia
Esta é a aparência dos meus resultados de pesquisa antes e depois quando o usuário digita “coelho" (significou "coelhinho" ou "Coelho CDN“)
AntesDepois
Preços da Algolia
Você pode encontrar o preço detalhado aqui.
O plano gratuito diz “para projetos pessoais e não comerciais”. Meu blog é comercial, então entrei em contato com o suporte para saber se posso usar o plano gratuito.
Aqui está o que eles disseram: "O plano gratuito é para uso não comercial, mas é mais um termo legal do que qualquer outra coisa. Você pode usar o plano gratuito, desde que exiba o logotipo Algolia na página de resultados de pesquisa“.
Como implementar a pesquisa Algolia no WordPress
Obtenha as chaves da API Algolia
Inscreva-se para Algolia e obtenha as chaves API (um aplicativo será criado automaticamente).
Por padrão, será definido como “Não usar Algolia”. Escolha “Usar Algolia no backend” ou “Usar Algolia com Instantsearch.js”.
Algolia no back-end vs Instantsearch.js
Eu uso opções de “backend” neste blog, principalmente porque funciona bem com o meu tema e não injeta nenhum JavaScript.
Aqui está a diferença:
Processo interno
Pesquisa instantânea.js
Interface de pesquisa
Do tema
IU Algolia
Logotipo da Algolia
Adicionar via código personalizado
Ativar/desativar no plugin
Tolerante a erros de digitação
✅
✅
Resultados instantâneos
❌
✅
autocompletar
❌
✅
Arquivo JS extra
❌
✅
Conclusão
Implementar Algolia não se trata apenas de obter resultados mais rápidos, mas de proporcionar uma melhor experiência ao usuário. Me arrependo de não ter feito isso antes!
Você está planejando usar Algolia? Avise.
Comente abaixo se você tiver alguma dúvida ou feedback. Eu leio e respondo a cada um deles em 8 horas!
O prêmio para a página que mais solicita fontes da web vai para um site que fez 718 solicitações de fontes da web!
Almanaque da Web
Sim, alguns designers/desenvolvedores são preguiçosos e adicionam todas as fontes possíveis para deixar o site bonito.
Mas e quanto ao desempenho?
Assim como qualquer outra otimização, as fontes precisam de alta prioridade, pois o texto é provavelmente a primeira coisa que o usuário vê em um site.
Este guia mostrará diferentes métodos para otimizar o Google Fonts, especialmente para WordPress.
Use fontes do sistema
Você notou que as fontes em Médio.comadministrador do WordPress, GitHub carrega tão rápido?
Bem, todos eles usam fontes do sistema.
/* System Fonts as used by GitHub */ body font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/* System Fonts as used by Medium and WordPress */ body font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
As fontes do sistema são fontes pré-instaladas em todos os sistemas operacionais. Seu navegador não precisa fazer solicitações HTTP extras para baixar folhas de estilo ou arquivos de fontes.
Sim, zero solicitações!
O texto abaixo é renderizado na fonte do sistema:Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição tipográfica. Lorem Ipsum tem sido o texto fictício padrão da indústria desde 1500, quando um impressor desconhecido pegou uma prova de tipos e a misturou para fazer um livro de espécimes de tipos. Ela sobreviveu não apenas a cinco séculos, mas também ao salto para a composição tipográfica eletrônica, permanecendo essencialmente inalterada. Foi popularizado na década de 1960 com o lançamento de folhas Letraset contendo passagens de Lorem Ipsum e, mais recentemente, com software de editoração eletrônica como Aldus PageMaker, incluindo versões de Lorem Ipsum.
Nada mal, certo? 😏
Você não terá muitas opções de design, mas se quiser o melhor desempenho, vá em frente!
Limitar famílias e pesos de fontes
Existem várias otimizações que mencionei abaixo. Mas limitar as famílias de fontes é o mais importante. Idealmente, você não deve ter mais de 2 (máximo 3) famílias de fontes.
Da mesma forma, cada fonte terá pesos diferentes. Começa de 100 a 900. Incluir cada peso resultará em um arquivo de fonte adicional para download. Portanto, limite também o número de espessuras de fonte.
Se você estiver incorporando fontes diretamente do Google Fonts, poderá selecionar diferentes pesos como este:
Aqui está um exemplo de escolha de famílias de fontes e pesos em Oxigênio:
Créditos: WPDevDesign
Use fontes variáveis (novo!)
Como mencionei acima, para cada peso de fonte, o navegador precisa baixar arquivos de fontes separados. Portanto, se você incluir 400 e 700, dois arquivos de fontes serão baixados.
Mas em fontes variáveis, uma única fonte pode se transformar em qualquer espessura de fonte.
Aqui está uma demonstração (tente alterar a espessura da fonte):
Leia mais sobre fontes variáveis: https://web.dev/variable-fonts/.
Você pode filtrar fontes em Fontes do Google que suportam fontes variáveis:
Para você entender melhor, aqui está a diferença:
Família de fontes, peso(s)
Tamanho de fonte normal
Tamanho de fonte variável
Robô, 400
16KB
20 KB
Robô, 400 + 700
30 KB
35 KB
Robô, 400 + 700 + 900
43 KB
35 KB
Robô, 300 + 400 + 700 + 900
57 KB
35 KB
Robô, 100 + 300 + 400 + 700 + 900
59 KB
35 KB
Aqui está um exemplo de fonte variável com pesos de 100 a 900:
[email protected]" rel="stylesheet"/>
Combine fontes do Google
A combinação do Google Fonts reduzirá as solicitações HTTP. Não terá um grande impacto no desempenho com http/2. Mas ainda assim, uma boa prática a considerar.
Antes de combinar:
Depois de combinar:
Se você estiver usando FlyingPress ative “Otimizar Google Fonts” e ele cuidará dessa otimização.
Corrigir flash de texto invisível
Se você analisou seu site usando o Google PageSpeed Insights, você pode ter visto este erro “Garantir que o texto permaneça visível durante o carregamento da webfont”
Existe um exibição de fonte Propriedade CSS que informa se deve mostrar uma fonte substituta ao carregar a fonte ou torná-la completamente invisível. Se o usuário estiver em uma conexão lenta e você não tiver habilitado o substituto, o usuário poderá não ver o texto por algum tempo, também chamado de Flash de Texto Invisível (FOIT).
No Google Fonts, adicionar “&display=swap” no final do URL corrigirá esse problema.
Antes de adicionar troca:
Depois de adicionar troca:
FlyingPress pode corrigir esse problema automaticamente. Também desenvolvi um plugin independente para isso: Trocar exibição de fontes do Google.
Leia também
Carregar fontes do Google de forma assíncrona
O navegador deve esperar até que o CSS e seus arquivos de fontes estejam prontos para renderizar a página? Na minha opinião, o Google Fonts não deveria bloquear a renderização, já que uma fonte substituta pode ser exibida enquanto isso.
Vamos carregar o Google Fonts de forma assíncrona. Adicione o seguinte código a
:
Isso informa ao navegador para pré-carregar o Google Font em segundo plano (sem bloqueio de renderização) e o disponibiliza como uma folha de estilo quando estiver pronto.
Fontes embutidas do Google
Existem diferentes formatos de arquivo para fontes, como ttf, otf, woff, woff2 etc. O Google Fonts CDN é bastante inteligente para fornecer diferentes arquivos de fontes com base no dispositivo do usuário.
Mas se você deseja oferecer suporte apenas a navegadores modernos, em vez de vincular à folha de estilo, incorpore diretamente o conteúdo CSS.
O formato de fonte mais recente “woff2” é geralmente suportado (exceto IE e Opera Mini). Ele também terá o menor tamanho de arquivo.
Antes:
Depois (não minificado):
Dessa forma, seu navegador pode reduzir uma cadeia HTTP e baixar o arquivo de fonte imediatamente.
Adicionar dicas de recursos
Se você observar atentamente o CSS da fonte do Google, a folha de estilo será baixada de “https://fonts.googleapis.com/”. No entanto, após baixar o arquivo CSS, cada arquivo de fonte é baixado de “https://fonts.gstatic.com”.
O navegador precisa fazer outra pesquisa de DNS após baixar a folha de estilo. Isso pode adicionar um pequeno atraso.
Ao adicionar dicas de recursos, podemos dizer ao navegador que “vou me conectar a esta URL em breve, então prepare-a 😉”.
Antes de pré-conectarDepois de pré-conectar
Adicione a seguinte linha a
:
Mas por que auto-hospedar? As fontes do Google são entregues a partir de seus CDNs super rápidos e podem já ter sido armazenadas em cache no navegador, certo?!
O tempo de cache do navegador para folhas de estilo é apenas 24 horas e 1 ano para arquivos de fontes.
Embora as fontes sejam entregues a partir de seu CDN, são necessárias duas pesquisas DNS adicionais e várias solicitações HTTP encadeadas.
Os navegadores começaram a implementar o cache de chave dupla. O que significa que se o site A baixar uma fonte e armazená-la em cache, ela não estará disponível para o site B. O Safari já implementou isso. O Chrome está prestes a ser lançado. Você pode ler mais sobre isso aqui.
A auto-hospedagem pode aproveitar sua conexão existente (http/2).
Portanto, é sempre melhor hospedar o Google Fonts por conta própria!
Antes da auto-hospedagemDepois da auto-hospedagem
Como auto-hospedar Google Fonts no WordPress?
Meu Deus, meu Deus O plugin pode auto-hospedar Google Fonts. Mas achei difícil de usar. Temos que pesquisar manualmente as fontes ou detectar automaticamente abrindo páginas.
Se você estiver usando FlyingPress, ative “Otimizar fontes do Google”. Ela cuidará da auto-hospedagem, combinação e tudo mais para você!
Conclusão
Na web em geral, o Google Fonts domina com o uso de 75%. Eles se esforçaram ao máximo para otimizá-los. Mas isso não significa que não haja mais espaço para otimizar.
Muitas das otimizações podem ser feitas facilmente instalando FlyingPress como auto-hospedagem, pré-carregamento, fonte substituta, combinação, carregamento assíncrono, etc. Mas nenhum plugin será capaz de otimizar suas escolhas de design.
Adicione as fontes que você realmente precisa, filtre os pesos desnecessários das fontes e, se possível, hospede-as automaticamente.
Comente abaixo se você tiver alguma dúvida ou feedback. Eu leio e respondo a cada um deles em 8 horas!
Quando comecei a codificar em JavaScript em 2013, pensei que jQuery era o “JavaScript” real e que jQuery deveria ser incluído em todas as páginas para executar meu código JS.
Caros desenvolvedores de plug-ins
Mas por que? Porque todo código que copiei do StackOverflow funcionou somente após importar o jQuery! 😅
O que há de errado com jQuery
jQuery tem 90 KB, mas quando reduzido tem apenas 32 KB.
Isso é tão pequeno. Um bom CDN pode entregar isso em menos de 50ms!
Mas não se trata do tamanho. jQuery tem cerca de 10 mil linhas de código. Você pode não estar usando nem 10% dele.
Cada linha deve ser analisada e avaliada pelo navegador, o que consome muitos recursos. Este processo afeta o tempo de renderização, especialmente em dispositivos móveis.
Para ver a diferença real, aqui está a mesma funcionalidade escrita em jQuery puro e JavaScript vanilla:
jQuery:
JavaScript baunilha:
Aqui está a diferença de desempenho:
Enquanto jQuery levou 2,4s, JavaScript puro levou apenas 0,8s. Isso mostra Vanilla JavaScript é 4x mais rápido que jQuery.
Alguns anos atrás, escrever funções padrão em JavaScript vanilla era uma dor e o jQuery tornou nossas vidas mais fáceis.
Mas os navegadores da web evoluíram muito. A maioria das funções que você escreveu em jQuery podem ser escritas em JavaScript puro.
Aqui estão alguns exemplos:
A maioria das funções que usei acima são amplamente suportadas em todos os principais navegadores.
Caros desenvolvedores de plug-insCaros desenvolvedores de plug-ins
Geralmente é o Internet Explorer e o Opera Mini, que não suportam alguns deles.
Se ainda quiser oferecer suporte a esses navegadores antigos, você pode detectar o navegador e adicionar polyfills. Aqui estão alguns polyfills para essas funções comuns:
Suporte do navegador para querySelector:
Suporte do navegador para fetch:
Todo mundo está se mudando, exceto WordPress
Graças ao avanço feito nas ferramentas de desenvolvimento front-end e no suporte do navegador, agora podemos descartar o jQuery como uma dependência, mas você nunca notaria o contrário
Caros desenvolvedores de plug-ins
Bootstrap 5 – postagem no blog
Caros desenvolvedores de plug-ins
Como eu disse antes, a web e o JavaScript estão evoluindo rapidamente. Da mesma forma CSS.
Muitas funções que eram feitas via JavaScript agora são feitas via CSS. Isso proporciona outro aumento de desempenho.
Caros desenvolvedores de plug-ins
Algumas delas que podem ser feitas em CSS puro:
Saí do desenvolvimento de sites WordPress há cerca de seis anos.
Depois disso, construo principalmente sites usando ReactJS, VueJS e outros geradores de sites estáticos. Foi divertido. Tenho controle total sobre tudo. Quando eu implanto, eu uso Netlificar ou serviços de hospedagem estática semelhantes e, após atualizar o conteúdo, simplesmente o envio para o GitHub. Em poucos segundos, meu site está ativo em diferentes servidores de borda em todo o mundo. O CDN armazenará em cache todas as páginas e arquivos estáticos. Não preciso me preocupar com minificação, cache, otimização de imagem, etc. Todos são apenas uma forma de alternância. Adorei a experiência!
Voltei ao WordPress para criar um blog sobre desenvolvimento. Sim, geradores de sites estáticos podem fazer isso. Mas não quero reinventar a roda e já sou um grande fã do WordPress.
Voltando de sites estáticos, otimizar o WordPress é complicado. Quando saí do WordPress novamente, estava usando o W3 Total Cache!
Fico feliz em ver que existem novos plug-ins de cache no mercado, como WP Rocket, cache LiteSpeed, Swift Performance etc. Todos são ótimos, mas configurá-los ainda é doloroso e o desempenho ainda está longe de sites estáticos.
Quando voltei ao WordPress para o meu blog, perguntei a um dos provedores de hospedagem mais caros: “Ei, tenho tráfego dos EUA e da Índia, meu servidor está nos EUA, então o TTFB para a Índia é bem alto”.
Eles responderam: “haverá latência de rede, pois seu site WordPress está no servidor dos EUA”.
Eu senti algo errado. Muitas atualizações aconteceram nas tecnologias Cloud e parece que o WordPress ainda está atrasado.
Precisamos de uma solução completa que possa funcionar como sites estáticos, sem deixar de lado as vantagens do WordPress. Deve ser fácil de configurar também. Diferente do W3 Total Cache!
Por que não mais alguns plug-ins Flying *
Quando comecei a construir uma solução completa chamada FlyingPress, alguns deles perguntaram “por que não criar mais plugins pequenos como você fez antes, que executam bem uma funcionalidade, como módulos. Então podemos escolher de acordo…”
Um maior número de plugins cria mais conflitos. Se você estiver em nosso grupo no Facebook, poderá ver postagens todos os dias em que um dos meus plug-ins entra em conflito com algum outro plug-in de cache.
Por exemplo, ao usar Imagens voadoras e Scripts Voadores juntos, temos que analisar o HTML duas vezes, o que consome um pouco de recursos. Se for um único plugin que faz ambos, teremos que analisar o HTML apenas uma vez.
Outro exemplo, quando você ativa o plugin Cache Enabler, ele começa a capturar HTML antes dos Flying Scripts (já que 'C' começa antes de 'F' na ordem dos plugins). Então isso cria conflitos!
Precisamos de uma solução única que cuide de tudo, sem criar conflitos, sem consumir muitos recursos, sem precisar de um especialista em otimização de velocidade.
O que é FlyingPress
FlyingPress é uma solução completa para sites WordPress que cuida de tudo. Do cache de páginas, CDN à otimização de imagens.
Qualquer não-técnico deve ser capaz de criar sites WordPress super-rápidos sem precisar de muitos tutoriais ou vários plug-ins para otimização de velocidade.
Deve automatizar todas as otimizações possíveis para que os usuários não tenham muitas dores de cabeça.
Como o FlyingPress otimiza os principais sinais vitais da Web
O FlyingPress desde o início foi para uma melhor experiência do usuário. Escrevemos inteiramente a geração crítica de CSS e outras bibliotecas do zero para obter o melhor desempenho.
Tanto o cache WP Rocket quanto o LiteSpeed geram CSS crítico. Mas nunca fiquei feliz com seus resultados.
Aqui está a comparação das principais métricas vitais da web em meu blog (www.wpspeedmatters.com) usando diferentes plug-ins de cache:
Foguete WP:
Cache LiteSpeed:
FlyingPress:
Se você observar atentamente as capturas de tela geradas, notará algumas coisas:
Sem mudanças de layout – Como você pode ver nas capturas de tela, o FlyingPress a partir do segundo quadro é renderizado com qualquer mudança de layout. Evitar essas mudanças de layout ajuda a reduzir as mudanças cumulativas de layout.
Renderização rápida – Enquanto o cache WP Rocket e LiteSpeed exibiam a postagem do blog imagine o 6º quadro, o FlyingPress mostrava-o a partir do próprio segundo quadro, sem nem mesmo a necessidade de espaço reservado. FlyingPress usa várias técnicas como pré-carregar imagens acima da dobra, excluir imagens acima da dobra do carregamento lento, usar carregamento lento nativo, nossa própria biblioteca de carregamento lento JS super-rápida, etc.
FlyingCDN – Otimizações em tempo real!
Já transferimos 90% das otimizações externamente. Ao ativar VoandoCDNvocê pode descarregar a redução de CSS/JS e a otimização de imagem para CDN.
Aqui estão alguns dos recursos:
Cloudflare x FlyingCDN
Cloudflare é um proxy CDN+. FlyingCDN é apenas um CDN. Portanto, FlyingCDN não é uma alternativa ao Cloudflare. Você pode usar Cloudflare junto com FlyingCDN.
FlyingCDN oferece muitos recursos que atualmente não estão disponíveis no Cloudflare ou são muito caros.
Um exemplo é a replicação geográfica. Ele replicará arquivos em diferentes regiões para que haja latência muito baixa, mesmo para arquivos não armazenados em cache.
Aqui está uma comparação dos recursos FlyingCDN e Cloudflare:
nuvemflare
VoandoCDN
Preços de largura de banda
Livre
US$ 3/100 GB
Replicação geográfica
❌
✔️
Roteamento PoP mais próximo
Plano de negócios (US$ 200/m)
✔️
Compressão de imagem
Plano Pro (US$ 20/m)
✔️
Conversão WebP
Plano Pro (US$ 20/m)
✔️
Imagens redimensionadas para celular
Plano de negócios (US$ 200/m)
✔️
Por que não há plano ilimitado ou LTD
Muitos dos plug-ins pagos no ecossistema WordPress oferecem um plano ilimitado e, às vezes, LTD (ofertas vitalícias) também.
Não sou contra planos ilimitados ou LTD. Funciona muito bem para alguns produtos, e até administrei o LTD em minha startup anterior.
No entanto, isso não é possível no FlyingPress.
Como mencionei antes, FlyingPress não é apenas um plugin. Realizamos muitas tarefas que consomem muitos recursos, como remover CSS não utilizado em nosso cluster de servidores do Google Cloud. Portanto, nossos custos de servidor são bastante altos. Planos ilimitados ou LTD são muito arriscados.
Também queríamos evitar abusos ao usar a mesma conta por várias pessoas.
Caso semelhante para LTD, nos ajuda a ganhar dinheiro rápido. Mas colocará o negócio em risco no longo prazo. Quero que o FlyingPress seja um negócio sustentável.
Mais de 100 sites? Contate-nos para preços personalizados.
Não vamos parar por aqui.
Ainda não estamos perto do objetivo de entregar páginas HTML de servidores de borda com latência <30 ms em todo o mundo, não importa em qual hospedagem você esteja ou onde esteja a localização do seu servidor. Nosso TTFB Optimizer é um trabalho em andamento e será uma virada de jogo no WordPress.
Nós apenas montamos o porão.
https://w3b.com.br/por-que-criei-o-flyingpress-como-ele-e-diferente/?feed_id=4929&_unique_id=6639601ccdf15
Saí do desenvolvimento de sites WordPress há cerca de seis anos.
Depois disso, construo principalmente sites usando ReactJS, VueJS e outros geradores de sites estáticos. Foi divertido. Tenho controle total sobre tudo. Quando eu implanto, eu uso 
