5

Our customer has a PrestaShop based Webshop (https://www.hoerschiff.at) and now his hoster installed a SSL Cert. We updated the configuration of PrestaShop, so all pages are forced to be delivered via SSL. We're now facing the issue that the page loading time via HTTPS in Chrome (also in Safari) is painfully slow, while in Firefox it loads as it should.

The developer tools show that a lot of assets (JS, CSS, PNG etc.) have a very high 'initial connection' time (from 5sec up to 1.5min). This only occurs when the complete page is loaded. If I load one asset directly (e.g. https://www.hoerschiff.at/themes/PRS030068/js/megnor/custom.js) it loads just fine.

I also found this issue: Chrome slow over https sites, particularly internal ones But couldn't relate to it since when the assets are already cached the site loads normally.

First I thought this might be a Apache/SSL configuration issue, but since it loads normally in Firefox that shouldn't be the case.

Do you have any ideas what could cause this slow initial connection time?

Thanks in advance!

Community
  • 1
Lukas Leitner
  • 61
  • 1
  • 1
  • 6
  • do a trace while trying to access the site in chrome – Jim B Jun 17 '16 at 12:54
  • The stalling happens before DNS lookup which I find very interesting. Not sure but is the stalling waiting for DNS to be resolved? Is that where the problem is? – Rob Jun 17 '16 at 13:13
  • I just accessed the site from the university network where this issue doesn't occur. Do you guys experience the very slow loading time? – Lukas Leitner Jun 17 '16 at 13:49
  • Jim B which tool do you recommend for tracing? I just use the chrome developer tools. – Lukas Leitner Jun 17 '16 at 13:52
  • The website consistently loads in just over 4 seconds for me in Chrome 51. As the site appears to load correctly externally, I would advise installing Wireshark on a PC at the customer site and run a capture whilst your try to load the website. Feel free to upload the capture file somewhere if you would some help looking over it. – Mark Riddell Jun 17 '16 at 19:33
  • It really seems that this is an network issue, either in my office network or from my local provider, as everywhere else it loads as it should. I did an wireshark capture on the site and uploaded it to http://hoerschiff.at/hoerschiff.at_wireshark.pcapng I see a lot of retransmissions which I think should not happen, but I'm not an network engineer, so I would really appreciate a professional opinion. Thank you very much! – Lukas Leitner Jun 18 '16 at 12:17
  • Try it in edge and Firefox with a Wireshark trace, then compare it with chrome. I bet you have a proxy blocking some chrome telemetry. – Jim B Jun 19 '16 at 15:20
  • Are you _sure_ that this is a Chrome specific issue? It loads slowly in Firefox and chrome for me (both > about 10 seconds). But a reload in both browsers is < 2 seconds. If you aren't experiencing the problem any more, please post what your resolution was. – Jon V Jan 19 '17 at 20:44

2 Answers2

2

I looked the web site https://www.hoerschiff.at/ and could see many different problems. I would separate the problem in groups:

  • SSL/TLS problems
  • HTTP/2 support
  • minimizing images
  • usage common known CSS/JS (like jQuery, Font Awesome 4.3, ...) from CDN
  • minifying of JS/CSS files
  • usage of GZip compression on the server (for static files like JS/CSS files for example)
  • placing of all images on CDN. For example cloudinary allows to host many images on CDN for free (2 GB, 7,500 Transformations / month).

I recommend you to test your web site at least with respect of Qualys SSL Server, www.webpagetest.org and validator.w3.org. After that I'd recommend you to compare the configuration file of your Apache web server with Mozilla recommendations, which you can find here.

I'd recommend you to start with testing of your web site on ssllabs. You will see that your Apache web server have serious security problem CVE-2016-2107, which can be fixed by updating Apache and OpenSSL software on the web server. Because of the security problem the web site gets the grade F only.

After updating Apache software your server will support HTTP/2 protocol, which is very helpful on your web site. The problem is: your HTML page loads 27 separate CSS files (!!!) and 26 separate JS files. The test on http://www.webpagetest.org/ site (see the results) shows the results like on the picture below

enter image description here enter image description here enter image description here

You can see that the most CSS and JS files loaded from your web site will be loaded one after another, which increases the loading essentially. The below lines from HTML files:

<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" />

and

<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>
<script type="text/javascript" src="https://www.hoerschiff.at/themes/PRS030068/js/megnor/custom.js"></script>

are evil.

It's strictly recommended to load common used CSS/JS files from CDN. For example you can replace the lines

<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>

to

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

or

<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>

To optimize loading of your web site in Chrome you can include the following lines before the first <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"/>
...

The <link rel="preload" can informs the web browser (Chrome starting with version 50 and Opera starting with version 38) that CSS/JS/Image/Font can be loaded later. The web browser will optimize the loading of the files using the information. See here, here for more details.

In the next step, I'd recommend you additionally to use loadCSS and requireJs to load the most CSS/JS files asynchronously. Moreover there are very nice tools like critical, grunt-critical, the demo or this one which allows to extract critical path CSS from 27 CSS files which you loads. The small subset of CSS rules which are really used on your web site will be extracted. You can include the CSS rules as inline CSS. You can loads all other 27 CSS files asynchronously using loadCSS. As the result the user will don't need to wait 7.890s till seen the starting rendering of your web site. The time will be dramatically reduced. Asynchronously loading of all other CSS/JS files using loadCSS and requireJs will don't block the user interface. It will improve the speed of your web site essentially from the users point of view. You can read more about critical rendering path here for example.

Oleg
  • 249
  • 3
  • 6
  • 1
    This would be a good answer if it was broken for everything, optimizing for chome simply means other browsers suffer. – Jim B Jun 19 '16 at 15:21
  • @JimB: I'm not sure that I understand you correctly. Including of ` – Oleg Jun 19 '16 at 15:38
  • Simply put changing the code to add optimizations for specific browsers, when the code works fine on other networks is simply bad practice. – Jim B Jun 19 '16 at 19:42
  • @JimB: It sounds that you are very far from web development. – Oleg Jun 19 '16 at 20:06
  • I'm an admin, rule #1 is stop developers from breaking prod-this s a prime example of a developer, no knowing what the problem is,but monkeying with proven code in prod anyway. – Jim B Jun 19 '16 at 20:13
  • @JimB: I'm both admin and the developer. Could you be exact and point to some **specific parts** of my recommendation where you disagree? – Oleg Jun 19 '16 at 20:52
  • Hi Oleg, thanks for the suggestions. I'm aware of the low frontend performance in general, but as already mentioned my problem here is is not the low general performance but the very very slow loading time in Chrome via https (~40sec - 1.5min). I'm also aware of the SSL vulnerability, but I'm not the server admin, which again brings us back to the original topic ;) – Lukas Leitner Jun 20 '16 at 15:27
  • @LukasLeitner: I can't see any important differences between connection via Chrome/IE/Edge/Firefox. The www.webpagetest.org allows to do tests from **different location** over the world. I included the results http://www.webpagetest.org/result/160619_MX_F5C/1/details/ you you can examine. You can see **no** Chrome problem, just some common performance problems. **I recommend you to repeat your tests from other computers and from other location.** Compare for example http://www.webpagetest.org/result/160620_V1_V94/ (Chrome) with http://www.webpagetest.org/result/160620_3F_VAQ/ (IE11). – Oleg Jun 20 '16 at 16:07
  • @Oleg great overview, you didn't deserve the downvote(s). While this is beyond the scope of the original question, the points you have made are nevertheless useful. – Vladimir Jan 21 '17 at 12:33
1

I still couldn't find out what the problem is, but it turned out that it only occurred via my internet access at the office. Everywhere else (University, internet access of friends, customers etc.) it worked fine in every Browser. So this is a really strange behavior but as nobody else is experiencing this, and it is a very low budget project, I'm not further investigating it.

Lukas Leitner
  • 61
  • 1
  • 1
  • 6
  • The information, which you posted in your question, isn't enough to analyse and to solve your problem. Do you have some public URL to the page, which has the problem, which you describe? The only URL, which you posted was https://www.hoerschiff.at/, but I suppose that you use *the tools* from the site, but you host there on *another server*, which have the problems, which you describe. Is the URL to the server public? – Oleg Jan 21 '17 at 12:45
  • As described in my answer, the problem only occurred when accessing the site via my office internet connection, so I suppose it's some kind of router/firewall etc. issue. Therefore you should not be able to experience the issue on the given Domain (hoerschiff.at). – Lukas Leitner Jan 22 '17 at 15:41
  • OK, then the administrators of your network should inspect the problem. – Oleg Jan 22 '17 at 18:27