Conexão inicial SSL dolorosamente lenta no Chrome

Question

Nosso cliente tem uma loja virtual baseada no PrestaShop ( link ) e agora seu hoster instalou um certificado SSL. Atualizamos a configuração do PrestaShop, para que todas as páginas sejam forçadas a serem entregues via SSL. Estamos enfrentando agora o problema de que o tempo de carregamento da página via HTTPS no Chrome (também no Safari) é dolorosamente lento, enquanto no Firefox ele é carregado como deveria.

As ferramentas de desenvolvimento mostram que muitos recursos (JS, CSS, PNG, etc.) têm um tempo de 'conexão inicial' muito alto (de 5s a 1,5 min). Isso só ocorre quando a página completa é carregada. Se eu carregar um ativo diretamente (por exemplo, link ) ele carrega muito bem.

Também encontrei este problema: Chrome lento em sites https, particularmente internos Mas não poderia se relacionar a ele desde quando os recursos já estão em cache que o site carrega normalmente.

Primeiro, pensei que isso poderia ser um problema de configuração do Apache / SSL, mas, como ele é carregado normalmente no Firefox, esse não deveria ser o caso.

Você tem alguma idéia do que poderia causar esse tempo inicial de conexão lento?

Obrigado antecipadamente!

    

Answer 1

Ainda não consegui descobrir qual é o problema, mas descobri que isso ocorreu apenas através do meu acesso à Internet no escritório. Em qualquer outro lugar (universidade, acesso à internet de amigos, clientes, etc.) funcionou bem em todos os navegadores. Então, esse é um comportamento realmente estranho, mas como ninguém mais está passando por isso, e é um projeto de orçamento muito baixo, não estou mais investigando.

    

Answer 2

Eu olhei o link do site e pude ver muitos problemas diferentes. Eu separaria o problema em grupos:

• problemas SSL / TLS
• Suporte HTTP / 2
• minimizando imagens
• uso comum de CSS / JS conhecido (como jQuery, Font Awesome 4.3, ...) do CDN
• compactação de arquivos JS / CSS
• uso da compactação GZip no servidor (por exemplo, arquivos estáticos, como arquivos JS / CSS)
• colocação de todas as imagens no CDN. Por exemplo, o cloudinary permite hospedar muitas imagens no CDN gratuitamente (2 GB, 7.500 Transformações / mês).

Eu recomendo que você teste seu site pelo menos com relação ao Qualys SSL Server , www.webpagetest.org e validator.w3.org . Depois disso eu recomendo que você compare o arquivo de configuração do seu servidor web Apache com as recomendações do Mozilla, que você pode encontrar aqui .

Recomendamos que você comece com o teste do seu site em ssllabs . Você verá que seu servidor da Web Apache tem um sério problema de segurança CVE-2016-2107 , que pode ser corrigido com a atualização do software Apache e OpenSSL no servidor da web. Por causa do problema de segurança, o site recebe apenas a nota F.

Após atualizar o software Apache, seu servidor suportará o protocolo HTTP / 2, que é muito útil em seu site. O problema é: sua página HTML carrega 27 arquivos CSS separados (!!!) e 26 arquivos JS separados. O teste no site link (veja os resultados ) mostra os resultados como na imagem abaixo

VocêpodeverqueosarquivosCSSeJSmaiscarregadosdoseusiteserãocarregadosumapósooutro,oqueaumentaocarregamentoessencialmente.AslinhasabaixodosarquivosHTML:

<link rel="stylesheet" href="/themes/PRS030068/css/global.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/autoload/uniform.default.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blockcart/blockcart.css" type="text/css" media="all" /> <link rel="stylesheet" href="/js/jquery/plugins/bxslider/jquery.bxslider.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blockcurrencies/blockcurrencies.css" type="text/css" media="all" /> <link rel="stylesheet" href="/modules/blockfacebook/css/blockfacebook.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blocklanguages/blocklanguages.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blockcontact/blockcontact.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blockmyaccountfooter/blockmyaccount.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blocknewsletter/blocknewsletter.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blocksearch/blocksearch.css" type="text/css" media="all" /> <link rel="stylesheet" href="/js/jquery/plugins/autocomplete/jquery.autocomplete.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blocktags/blocktags.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blockviewed/blockviewed.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/product_list.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/themeconfigurator/css/hooks.css" type="text/css" media="all" /> <link rel="stylesheet" href="/modules/tmnewproducts/tmnewproducts.css" type="text/css" media="all" /> <link rel="stylesheet" href="/modules/tmfeatureproducts/css/tmfeatureproducts.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/tmhomeslider/css/flexslider.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blockpermanentlinks/blockpermanentlinks.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blocktopmenu/css/blocktopmenu.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blocktopmenu/css/superfish-modified.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blockcategories/blockcategories.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/blockuserinfo/blockuserinfo.css" type="text/css" media="all" /> <link rel="stylesheet" href="/modules/paypal/views/css/paypal.css" type="text/css" media="all" /> <link rel="stylesheet" href="/themes/PRS030068/css/modules/tmcmsblock/css/tmstyle.css" type="text/css" media="all" />

e

<script type="text/javascript" src="/js/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/jquery.easing.js"></script>
<script type="text/javascript" src="/js/tools.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/global.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/autoload/10-bootstrap.min.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/autoload/15-jquery.total-storage.min.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/autoload/15-jquery.uniform-modified.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/products-comparison.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blockcart/ajax-cart.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/jquery.scrollTo.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/jquery.serialScroll.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/bxslider/jquery.bxslider.js"></script>
<script type="text/javascript" src="/modules/blockfacebook/blockfacebook.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blocknewsletter/blocknewsletter.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blocksearch/blocksearch.js"></script>
<script type="text/javascript" src="/modules/tmhomeslider/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blocktopmenu/js/hoverIntent.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blocktopmenu/js/superfish-modified.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blocktopmenu/js/blocktopmenu.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/tools/treeManagement.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/index.js"></script>
<script type="text/javascript" src="https://www.hoerschiff.at/themes/PRS030068/js/megnor/owl.carousel.js"></script><scripttype="text/javascript" src="https://www.hoerschiff.at/themes/PRS030068/js/megnor/custom.js"></script>

sãomaus.

ÉestritamenterecomendadocarregararquivosCSS/JScomunsdoCDN.Porexemplo,vocêpodesubstituiraslinhas

<script type="text/javascript" src="/js/jquery/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="/js/jquery/jquery-migrate-1.2.1.min.js"></script>

para

<script src="https://cdn.jsdelivr.net/jquery/1.11.0/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/jquery.migrate/1.2.1/jquery-migrate.min.js"></script>

ou

<script src="https://cdn.jsdelivr.net/jquery/1.11.0/jquery.min.js"integrity="sha256-spTpc4lvj4dOkKjrGokIrHkJgNA0xMS98Pw9N7ir9oI="
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jquery.migrate/1.2.1/jquery-migrate.min.js"integrity="sha256-xNJPayfMfO6lb77HhrsfSG/a2aH5mPdg920fRGceEFw="
    crossorigin="anonymous"></script>

Para otimizar o carregamento do seu site no Chrome, você pode incluir as seguintes linhas antes do primeiro <link rel="stylesheet" ...> :

<link rel="preload" as="script" crossorigin="anonymous" href="https://cdn.jsdelivr.net/jquery/1.11.0/jquery.min.js"/>
<link rel="preload" as="script" crossorigin="anonymous" href="https://cdn.jsdelivr.net/jquery.migrate/1.2.1/jquery-migrate.min.js"/>
<link rel="preload" as="script" href="/js/jquery/plugins/jquery.easing.js"/>
<link rel="preload" as="script" href="/js/tools.js"/>
<link rel="preload" as="script" href="/themes/PRS030068/js/global.js"/>
...
<link rel="preload" as="style" href="/themes/PRS030068/css/global.css"/>
<link rel="preload" as="style" href="/themes/PRS030068/css/autoload/uniform.default.css"/>
<link rel="preload" as="style" href="/themes/PRS030068/css/modules/blockcart/blockcart.css"/>
...

O <link rel="preload" pode informar ao navegador da Web (Chrome, começando pela versão 50 e Opera, começando pela versão 38) que o CSS / JS / Image / Font pode ser carregado mais tarde . O navegador da Web otimizará o carregamento dos arquivos usando as informações. Consulte aqui , aqui para mais detalhes.

Na próxima etapa, recomendo que você use loadCSS e requireJs para carregar a maioria dos arquivos CSS / JS de forma assíncrona . Além disso, existem ferramentas muito interessantes como críticas , grunhido crítico , o demo ou este que permite extrair CSS do caminho crítico de 27 arquivos CSS que você carrega. O pequeno subconjunto de regras CSS que são realmente usadas em seu site será extraído. Você pode incluir as regras CSS como CSS inline . Você pode carregar todos os outros 27 arquivos CSS de forma assíncrona usando loadCSS. Como resultado, o usuário não precisará esperar 7.890 até visualizar a renderização inicial de seu site. O tempo será drasticamente reduzido. O carregamento assíncrono de todos os outros arquivos CSS / JS usando loadCSS e requireJs não bloqueará a interface do usuário. Ele irá melhorar a velocidade do seu site essencialmente do ponto de vista dos usuários. Você pode ler mais sobre o caminho crítico de renderização aqui , por exemplo.