Lembrei-me do site de um velho programador de amigos que tinha um hip-hop no feed do site, há cerca de 6 anos ele cuspiu na velocidade de carregamento da página: "sim, sim, sim, preciso refazê-lo, mas não há nada complicado lá ..." parado por agora - tudo está como antes :-) Apesar das simples soluções técnicas, admito que não só eu tenho um amigo. Portanto, esta pequena nota técnica.
Para entender de que problema estamos falando:
Script base.js de 400kb?Eu nem olho para o resto.
Após a otimização, mesmo sem compactação, o ganho será dezenas de vezes e será:
html - 0,5 kb
css - 1,4 kb
js - 0,2 kb
Eu mesmo tive que publicar palestras do nosso canal do YouTube no feed do site, pois elas foram bastante aquecidas em uma página. E ao visualizar blogs pessoais, há coleções de estranhos ou seus vídeos. E o que me incomodou é como o youtube coloca o desempenho na incorporação. O que simplesmente não carrega através do iframe em prol da mesma imagem com um clique. E o engraçado é que talvez eu não queira assistir ao vídeo, para que eu envio conteúdo?
Esse problema já foi resolvido há muito tempo nas redes sociais e em muitos outros recursos com alto tráfego. Sim e em navegadores móveis. Não é segredo para ninguém que o usuário gasta mais tempo no site se ele receber o conteúdo o mais rápido possível.
Aqui está o mesmo hubr, ele não recebe muito na fita de vídeo, então isso não é tão procurado. No entanto, se você popularizar essa abordagem?
Vamos tentar implementar isso usando o exemplo de plugin para WordPress.
Como detentor de alguns sites no wordpress, eu sei muito bem como os autores de plugins podem cagar no banco de dados. Portanto, decidi definitivamente que o plug-in usará o mecanismo de cache nativo e não exigirá nada e quebrará a compatibilidade se removido.
O que pode ser extraído do Youtube
O YouTube usa o oembed para incorporar conteúdo. Mais detalhadamente, minha resposta ao SO sobre o que pode ser extraído sem recorrer à API oficial.
stackoverflow.com/questions/10066638/get-youtube-information-via-json-for-single-video-not-feed-in-javascript/23253789#23253789Resposta JSON
www.youtube.com/oembed?url=http : //www.youtube.com/watch? v = ojCkgU5XGdg & format = json
Ou xml
www.youtube.com/oembed?url=http : //www.youtube.com/watch? v = ojCkgU5XGdg & format = xml
Tipos de pré-visualizações de diferentes tamanhos hq, sd, maxres
img.youtube.com/vi/ojCkgU5XGdg/hqdefault.jpgimg.youtube.com/vi/ojCkgU5XGdg/sddefault.jpgi.ytimg.com/vi/ojCkgU5XGdg/maxresdefault.jpgimg.youtube.com/vi/ojCkgU5XGdg/0.jpgimg.youtube.com/vi/ojCkgU5XGdg/1.jpgimg.youtube.com/vi/ojCkgU5XGdg/2.jpgimg.youtube.com/vi/ojCkgU5XGdg/3.jpgAnotações em vídeo
www.youtube.com/annotations_invideo?cap_hist=1&video_id=ojCkgU5XGdgOutro link
www.youtube.com/get_video_info?html5=1&video_id=ojCkgU5XGdgE isso é útil para você se você criar fluxos.
www.youtube.com/embed/live_stream?channel=UCkA21M22vGK9GtAvq3DvSlAPré-visualizações ao vivo
i.ytimg.com/vi/W-fSCPrYSL8/hqdefault_live.jpgPena que o YT não suporta jsonp. Portanto, não podemos nos recusar completamente a salvar dados.
Como o WordPress armazena em cache
O WordPress suporta incorporação automática ao encontrar links no editor de lista branca. Quando esse evento é acionado, ele cria um meta-campo para a postagem com o prefixo _oembed_ e, ao produzir, substitui o código do cache por html.
Se decidimos mostrar o layout com a substituição iframe por clique, precisamos armazenar esse estado em algum lugar, o melhor de tudo, no mesmo cache.
Filtro
add_filter('embed_oembed_html'); permite substituir o cache antes da postagem ser exibida. É um iframe bem conhecido.
<iframe width="" height="" src=""></iframe>
Como ainda estamos descobrindo por que o Google não forma um título para seu iframe (
ticket 4024 ), infelizmente, somos obrigados a fazer uma solicitação única ao servidor para capturar o título no cache.
Como atualizar o cache com seus dados
add_filter('embed_oembed_html', 'ytsl_oembed_html', 1, 3); ytsl_oembed_html($cache, $url, $attr){};
No momento em que o filtro é acionado, procuro na variável $ cache a presença da minha tag data-ytsl. Caso contrário, solicitei
http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=ojCkgU5XGdg&format=json
e forme o conteúdo da nova tag. Como resultado, o cache fica assim:
<iframe width="" height="" src=" " data-ytsl=" "></iframe>
A atualização do cache é feita assim. Primeiro, considere a chave
$cachekey = '_oembed_' . md5( $url . serialize( $attr ) );
E então nós atualizamos.
update_post_meta( get_the_ID(), $cachekey, $cache );
Se minha
tag data-ytsl for detectada, retiro o título e o ID e
giro o html.
No
data-iframe, insiro o código de cache já limpo sem a minha tag, a fim de substituir o layout por esse conteúdo por clique.
<div class='ytsl-click_div' data-iframe='$ytsl' style='$fixed position:relative;background: url($thumb_url) no-repeat scroll center center / cover' > <div class='ytsl-title_grad'> <div class='ytsl-title_text'>{$json['title']}</div> </div> <div class='ytsl-play_b'></div> </div>"
Css no github, não há razão para mostrá-lo.
Como resultado, o jogador fica assim.
Como diferença, criei o botão play com uma cor diferente. Mas o fato de o título ter sido escrito por Arial, e não por uma fonte personalizada, que também é carregada através de um iframe, na minha opinião, não afeta muito o reconhecimento.
A solução final de processamento on-the-fly é muito rápida e, a julgar pelo plug-in, o perfilador P3 do goDaddy é completamente indolor. Portanto, foi possível encontrar um equilíbrio entre conveniência e velocidade. O plug-in não requer nenhuma ação do usuário. Apenas mostra imagens em vez de iframes quando ativado.
No front-end.Basta conectar o script. Tudo é escandalosamente elementar:
(function(){ var f = document.querySelectorAll(".ytsl-click_div"); for (var i = 0; i < f.length; ++i) { f[i].onclick = function () { this.parentElement.innerHTML = this.getAttribute("data-iframe"); } } })();
Contras - em dispositivos móveis, os navegadores são muito inteligentes e podem fazer isso sozinhos. Portanto, se você não definir dispositivos móveis, precisará fazer dois cliques para reproduzir.
Total:
html - 0,5 kb
css - 1,4 kb
js - 0,2 kb
fonte - 0 kb
img - 50 kb (depende da imagem de fundo)
Não notei o restante dos desvios por um período bastante grande.
Bem, ele pintou o gato em uma carga por uma história não tão longa e nem tão tecnicamente interessante.
O código está aqui
github.com/Alexufo/youtube-speedload