WordPress Gutenberg melhorou o desempenho do site via @martinibuster

O editor do plug-in de cache do WordPress WP Rocket redesenhou seu site com Gutenberg e melhorou o desempenho do site. Eles descobriram que Gutenberg grava códigos surpreendentemente leves, mas compartilham que há algumas coisas a serem observadas.

Captura de tela da pontuação do PageSpeed ​​Insights

Editar em Gutenberg é mais fácil

O objetivo de Gutenberg tem sido consistentemente criar uma interface de edição que fará é fácil para editores de todos os níveis de habilidade publicar sites.

A criação de uma interface intuitiva diminui a barreira de entrada, capacita quase qualquer pessoa a criar facilmente uma presença na web e o melhor de tudo, ajuda o conteúdo os criadores mantêm o foco na criação de conteúdo em vez de curadoria e preocupação com o código.

De acordo com o página oficial do WordPress Gutenberg :

“ Sem ser um desenvolvedor especialista, você pode criar suas próprias postagens e páginas personalizadas. ”

A página do desenvolvedor WordPress descreve a visão de Gutenberg assim:

“ Gutenberg remodela o editor em uma ferramenta que permite aos usuários escrever publicações ricas e construir belos layouts com alguns cliques-nenhum conhecimento técnico necessário. O WordPress se tornará uma ferramenta de conteúdo poderosa e flexível, acessível a todos. ”

O editor usa um conceito chamado“ blocos ”que podem ser organizados para formar um layout personalizado.

Este foco em tornar mais fácil para qualquer pessoa se concentrar no conteúdo explica por que a equipe de marketing da WP Rocket apreciou instantaneamente a nova interface.

De acordo com WP Rocket:

“Mudar do Editor Clássico para o Gutenberg tem sido fácil para a equipe de marketing. Além do mais, começamos a aproveitar alguns recursos que tornam nosso trabalho mais fácil e rápido. ”

Captura de tela PageSpeed ​​Insight Pontuação da página inicial

Criando com Gutenberg melhor desempenho

WP Rocket relata que construir um site com Gutenberg resultou em um site mais rápido e com melhor desempenho.

Houve duas razões para as páginas que WP Rocket construir com Gutenberg tiveram um desempenho excepcional:

1. HTML mais leve ( integrado ao Gutenberg )
2. CSS e JavaScript sob demanda ( não é um Recurso Gutenberg )

O código HTML mais leve é ​​um recurso pronto para uso do Gutenberg.

Por outro lado, o carregamento de CSS desnecessário também é um recurso embutido de Gutenberg. Por causa disso, WP Rocket criou uma solução alternativa para automatizar CSS sob demanda.

Gutenberg foi projetado para carregar todo o CSS que é necessário para cada bloco de estilo. Portanto, o primeiro desafio foi criar uma maneira de carregar JavaScript e CSS automaticamente e somente quando necessário.

Gutenberg é surpreendentemente robusto

Francamente, fiquei um pouco surpreso que o WP Rocket fez tudo-in em Gutenberg. O motivo do meu espanto foi porque Gutenberg não está totalmente concluído.

A experiência de edição completa do site não deve ser lançada até junho de 2021. No entanto, WP Rocket descobriu que redesenhar todo o seu site com Gutenberg foi a escolha certa.

Pedi à equipe do WP Rocket para compartilhar sua experiência.

Entrevista com o WP Rocket

A equipe de desenvolvimento enfrentou desafios e precisou encontrar soluções alternativas para lidar com eles?

“ Sim!

Em primeiro lugar, não tínhamos nenhuma experiência de desenvolvimento com blocos personalizados de Gutenberg e tudo o que lemos sobre o assunto foi muito desanimador no início.

Nem é preciso dizer que a curva de aprendizado foi bastante íngreme.

Para detalhes: como um plugin de cache, uma das nossas principais preocupações de desenvolvimento era a necessidade de desempenho. A esse respeito, existe uma desvantagem com Gutenberg: a folha de estilo padrão contém todos os blocos nativos CSS.

Isso era um problema, pois o CSS não usado é carregado em todas as páginas (e isso não segue o “Removendo recursos CSS não utilizados ”recomendação do PageSpeed ​​Insights).

Em nosso caso, descontinuamos vários blocos que não eram usados. Criamos um sistema de enfileiramento personalizado para ter blocos carregados de CSS e JS somente quando necessário. Demoramos apenas alguns minutos para desenvolver este sistema.

Também decidimos não usar o arquivo CSS de Gutenberg. Em vez disso, “migramos” o CSS de que realmente precisávamos para nossa própria folha de estilo, para um arquivo CSS dedicado. Isso funcionou. ”

O Gutenberg parece estar completo e pronto para sites de produção?

“ Bem, conseguimos construir nosso site com Gutenberg (barra o cabeçalho e rodapé). Acho que isso diz algo sobre como Gutenberg evoluiu e sua prontidão.

Com o Edição completa do site planejada para junho de 2021 , acredito que será possível editar todos os elementos de um site usando blocos de Gutenberg.”

Houve uma curva de aprendizado para usá-lo?

“Com certeza. E eu acho que será o caso especialmente para aqueles acostumados a criadores de páginas visuais.

Dito isso, ficamos agradavelmente surpresos com o quão visual Gutenberg realmente é. O back-end oferece uma ótima visualização do front-end, o que significa que mesmo para pessoas que não são especialistas em tecnologia-como eu-é fácil fazer algumas alterações em uma página ou criar novas páginas do zero. ”

Com o conhecimento agora adquirido com a sua experiência, que conselho você daria para quem está pensando em mudar para Gutenberg?

“Vá em frente it!

Nossas duas principais conclusões foram as seguintes:

1. Comece a trabalhar em seu novo web design com Gutenberg em mente. Isso vai economizar muito tempo e você vai acabar sendo mais eficiente. (Isso não é algo que fizemos porque começamos o design sem ter decidido sobre o editor…)
2. Considere cuidadosamente quantos blocos você precisa de acordo com o seu negócio. Pense se todos eles devem ser personalizados ou não. Os blocos fazem uma diferença real ao usar Gutenberg. (Criamos mais de 20 blocos personalizados, o que está longe da média. Você só precisa de alguns).

Quais são as principais considerações a se pensar antes de mudar para Gutenberg ?

“Gutenberg não é necessariamente para todos.

Se você está bem com um tema livre como ele é, então é ótimo. Você pode criar todos os blocos que quiser e desfrutar de Gutenberg.

No entanto, se quiser um design específico e blocos específicos, você precisará de um desenvolvedor para ajudá-lo com o layout. Provavelmente não levará tanto tempo quanto nós.

Ainda assim, tornará o desenvolvimento do seu novo site mais longo e mais caro do que o normal, pois você precisará de ajuda. Você também deve estar ciente da íngreme curva de aprendizado à sua frente.

Dito isso, Gutenberg está realmente no centro do WordPress e, todos os dias, os colaboradores trabalham para melhorá-lo.

Ao escolher outra opção, você corre o risco de ela não ser atualizada quando o WordPress fizer uma alteração. Além disso, sempre será mais fácil encontrar alguém para ajudá-lo com um site WordPress construído com Gutenberg.

Acreditamos que Gutenberg é o futuro do WordPress, além de ser gratuito e de código aberto. ”

Que tipo de editor deveria pensar duas vezes antes de mudar para Gutenberg?

“Isso é algo mencionamos em nossa postagem de blog:

Se você é um freelancer ou dirige uma pequena empresa, ainda pode ficar bem com um criador de páginas que não requer a ajuda do desenvolvedor ou custo extra.

Se você dirige uma empresa maior e precisa de um desenvolvimento específico-então sim, Gutenberg é a solução certa para você, sem mais hesitações. ”

WordPress Gutenberg é o futuro

WP Rocket faz um argumento válido quando afirma que Gutenberg é o futuro. O objetivo é permitir que os editores se concentrem menos no código e mais no conteúdo. A edição completa do site de Gutenberg está programada para estrear em junho de 2021.

Graças a WP Rocket ter escolhido uma para a equipe, agora sabemos que Gutenberg realmente tem uma interface de usuário de edição promissora e pode ajudar a melhorar o desempenho do site.

Citação

Leia o artigo WP Rocket sobre como redesenhar seu site usando Gutenberg:

Por que WP Rocket escolheu Gutenberg e como o desempenho melhorou

Source link