Como o host do blog está localizado no exterior, embora seja usado o clássico CN2 GIA, a velocidade é muito mais rápida do que a de um host VPS colocado em uma sala de informática americana comum. No entanto, escrever artigos requer a inserção de um grande número de imagens, e o WordPress tem. muitos plug-ins instalados (consulte: Resumo dos plug-ins do WordPress para escavação de sites) fazem com que o navegador faça um número muito grande de solicitações de acesso à página.
Se for um VPS doméstico, como Tencent Cloud, Alibaba Cloud, etc., já tem uma vantagem de velocidade, então desde que você esteja disposto a gastar dinheiro para aumentar a largura de banda do host, a velocidade do acesso doméstico ainda é garantido. As salas de computadores host VPS estrangeiros fornecem largura de banda muito grande, mas as linhas são propensas a congestionamentos durante os horários de pico da Internet à noite, o que pode afetar a experiência do site.
Portanto, se o seu host estiver localizado no exterior como Dizhanfou e houver muitas imagens de páginas da web, JS, CSS e outros arquivos, você deve tentar otimizá-lo, como reduzir solicitações, compactar imagens, mesclar JS e CSS, compactar páginas HTML, etc. Este artigo tem como objetivo principal compartilhar a experiência de otimização de imagem: configuração do formato de imagem webp do site e experiência de efeito de aceleração.
Para obter mais experiência e dicas sobre otimização de sites, confira:
- Principais tecnologias de aplicação e recursos de suporte de blogs – resumo dos métodos de otimização de sites e servidores
- O espaço DirectAdmin habilita OpCache e aceleração de cache redis - WP habilita cache redis
- A Cloudflare bloqueia automaticamente IPs maliciosos no firewall e alterna automaticamente para um script de proteção de 5 segundos para evitar ataques CC
PS: Atualizado em 3 de setembro de 2019, o formato WebP é adequado para sites de imagens e álbuns de fotos. Aqui estão dois programas adequados para indivíduos criarem álbuns de fotos: ImgURL Pro e Chevereto.
PS: Atualizado em 29 de setembro de 2019, O componente Nginx PageSpeed desenvolvido pelo Google pode realizar um conjunto completo de otimização de imagem, como conversão automática de webP e adaptação automática às solicitações do navegador. Referência: servidor PageSpeed. artefato de otimização-Nginx implanta o módulo ngx_pagespeed e experiência de efeito acelerada.
1. Quais são as vantagens e desvantagens das imagens WebP?
1.1 Maximizar a compactação de imagem
Se não houver muito espaço para otimização de imagens nos formatos JPEG, PNG e GIF, as imagens WebP após compactação sem perdas são 26% menores do que as imagens PNG após compactação com perdas são comparadas com indicadores de qualidade equivalentes. em 25% a 34%.
Na imagem abaixo, podemos ver que o webp com perdas pode compactar um PNG de mais de 40 kb para menos de 10 kb e garante a qualidade da imagem - é indistinguível a olho nu. Para obter detalhes sobre os efeitos de aceleração do navegador de PNG e Webp, consulte: https://isparta.github.io/compare-webp/index.html. (Clique para ampliar )
WebP também suporta conversão de imagens GIF. Em outras palavras, o tamanho das imagens animadas no formato webp será menor. Comparação: https://isparta.github.io/compare-webp/index_a.html#12, conforme mostrado abaixo:
1.2 Alguns navegadores antigos não são compatíveis
A maior deficiência das imagens webp é que alguns navegadores antigos não as suportam, como várias versões do IE, IOS Safari, etc. Mas não se preocupe, é uma grande tendência que as imagens no formato webp sejam suportadas pelos principais navegadores em o futuro. Para obter detalhes sobre a compatibilidade do navegador webp,: https://caniuse.com/#search=webp (clique para ampliar)
PS: Atualizado em 16 de setembro de 2019, Podemos usar código PHP e regras de reescrita Nginx para permitir que o servidor decida se deseja exibir imagens webP com base no navegador do cliente: o site permite imagens no formato WebP - PHP e Nginx converta formatos WebP e navegadores adaptáveis.
2. Converta webp localmente
PS: Atualizado em 6 de fevereiro de 2020, Para software que converte imagens e vídeos em lotes, você também pode experimentar o FFmpeg de código aberto e gratuito: software gratuito e de código aberto para conversão e compactação de formatos de vídeo e áudio FFmpeg- conversão rápida de formato e compactação de vídeo.
A maneira mais conveniente para um site usar imagens no formato webp não é gerá-las localmente, mas converter diretamente imagens em gif, png, JPG e outros formatos em imagens no formato webp online. Esses sites incluem:
- HTTPS://Web P-converter.com/
- HTTPS://EZ gif.com/jpg-to-Web P
- HTTPS://wuwuwu.A convert.com/ talento /image/
- HTTPS:// cartografia.IsuX.US/
A conversão online de imagens webp é adequada para pequenas quantidades de imagens. Se você precisar converter um grande número de imagens para o formato webp, poderá baixar um software de conversão de formato webp, como: XnConvert, iSparta, etc., e poderá converter em lote. imagens para o formato webp diretamente no seu computador.
- HTTP://I Sparta.GitHub.IO/
- HTTPS://wuwuwu.New Yearview.com/En/New Yearconvert/
3. Conversão de Linux para webp
3.1 Instalação da ferramenta Webp
Versões principais do Webp:
- HTTPS://storage.Google APIs.com/downloads.Webcom project.org/releases/Web P/index.HTML
Comando de instalação rápida de instalação WebP:
#debian install webp sudo apt-get install webp
Comandos de compilação e instalação do código-fonte WebP:
# 安装编译器以及依赖包 yum install -y gcc make autoconf automake libtool libjpeg-devel libpng-devel # 请到官网下载最新版本 wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.0.tar.gz # 解压 tar -zxvf libwebp-0.6.0.tar.gz # 进入目录 cd libwebp-0.6.0 # 源代码安装环境检查 ./configure # 编译 make # 安装 make install
Verifique se o webp foi instalado com sucesso. Insira cwebp no terminal e a seguinte saída será exibida, indicando que a instalação foi bem-sucedida:
[root@linux-server]# cwebp Usage: cwebp [options] -q quality input.png -o output.webp where quality is between 0 (poor) to 100 (very good). Typical value is around 80. Try -longhelp for an exhaustive list of advanced options.
Após a instalação bem-sucedida, existem principalmente as seguintes ferramentas de comando:
cwebp→ Ferramenta codificadora WebP
dwebp→ Ferramenta decodificadora WebP
vwebp→ visualizador de arquivos WebP
webpmux→ Ferramenta de mixagem WebP
gif2webp→ Ferramenta para converter imagens GIF em WebP
3.2 Uso do comando
JPG, PNG -> WebP
Use cwebp para converter imagens JPG e PNG para o formato webp.
cwebp filename -o filename cwebp -q 50 /wzfou.com/wp-content/uploads/2019/07/da-wenti_06.jpg -o /wzfou.com/wp-content/uploads/2019/07/da-wenti_06.jpg.webp
Use o imagemagick para converter png em jpg.
# convert from png to jpg by imagemagic convert wzfou.com.png wzfou.com.jpg
Você também pode definir a taxa de qualidade de compactação, método, etc.:
convert recaptcha_11.png -quality 50 -define webp:lossless=false,method=6,auto-filter=true,partitions=3 recaptcha_11.webp
3.3 Converter Webp em lotes
Use o comando find para converter todas as imagens jpg e png no diretório especificado em imagens no formato webp.
find ./ -name "*.jpg" -exec cwebp -q 50 {} -o {}.webp ;
find ./ -name "*.png" -exec cwebp -q 50 {} -o {}.webp ;
#或者
find . -name "*.png" | parallel -eta cwebp {} -o {.}.webp
find ./ -type f -name '*.png' | xargs -P 8 -I {} sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} ; Converta automaticamente imagens Webp em lotes. Aqui você precisa usar tarefas agendadas do Linux. Se você não sabe como usar tarefas agendadas, você pode primeiro aprender: Sintaxe básica e tutorial de operação da tarefa agendada do comando Linux Crontab. Crie o arquivo: webp2jpg.sh, e cole o seguinte código:
# webp2jpg.sh
#!/bin/bash
for file in `ls`
do
len=`xxd -p -l 4 $file`
if [ $len == "52494646" ]; then
echo "$file is webp"
if [ ! -e $file.jpg ]; then
echo "===== convert $file ====="
dwebp $file -o $file.png
convert "$file.png" "$file.jpg"
rm $file.png
fi
fi
doneCertifique-se de que o arquivo shell tenha permissão de execução e então você pode executar webp2jpg.sh para converter a imagem.
4. CDN permite webp
4.1 Ativar Webp novamente na nuvem
Se você não usou o Youpaiyun CDN, pode consultar: Espelhamento de um clique do Youpaiyun CDN, CDN dinâmico estático e SSL grátis. Habilitar o webp no Youpaiyun é muito simples. Basta ativar o webp adaptável. Quando o navegador suporta imagens no formato webp, o Youpaiyun WebP retornará automaticamente ao formato webp, o que é muito bom. (Clique para ampliar)
4.2 Baidu Cloud CDN habilita Webp
Baidu Cloud não possui função webp adaptativa, você precisa usar processamento de imagem para alcançá-la. Adicione: @f_webp após a imagem para convertê-la diretamente para o formato webp para navegação. Por exemplo: 
.
O efeito do Baidu Cloud CDN Webp é o seguinte:
O plug-in webp do WordPress WebP Express suporta uma variedade de métodos de conversão de imagem. Por exemplo, você pode chamar: cwebp, gd, imagick no VPS local. para converter, ou você pode usar a API do serviço de conversão Webp online para implementar a conversão de imagem.
6. Resumo
A maior vantagem do formato webp para imagens de sites é que ele comprime bastante o tamanho das imagens. Principalmente se a página web contiver um grande número de imagens, o efeito de aceleração do acesso será muito óbvio. Além disso, para sites grandes, habilitar imagens no formato Webp economizará custos de tráfego.
A desvantagem do formato webp das imagens de sites é que os navegadores antigos não o suportam. Além disso, o software de navegação de imagens no formato webp não o suporta totalmente. Alguns alunos podem baixar imagens webp localmente e descobrir que as imagens comumente usadas podem ser abertas. Todos esses sites são algo a ser considerado pelos designers.