Date: Tue, 29 Sep 2015 13:39:54 +0400
Hello Ish, SM, Yuv,
On 29 September 2015 at 11:34, S Moonesamy <sm+mu_at_elandsys.com> wrote:
> At 13:03 28-09-2015, Yuv Joodhisty wrote:
>
>> I've never used nginx before and im wondering if this is a behaviour
>> about nginx because i came across some websites running on nginx who had
>> similar loading phases. Or maybe it's probably just blocking scripts.
>>
>
> I doubt that it is ngnix which is causing the problem.
>
DNS lookup takes 132ms. And Initial connection + time to first byte +
content download = 140ms.
Time to first byte = 74ms = backend processing (on the server).
Hence it's not a server (Nginx / Apache) issue at all, nor Wordpress / PHP.
Initially the server sent 7.6KB (the HTML). Note that the server GZip'ed
the contents before sending; else around 25KB would have been sent (~70%
bandwidth saved).
Also i would like to point out something about the blog.
>> On <http://hacklog.mu/nginx-virtual-host-configuration/>
>> http://hacklog.mu/nginx-virtual-host-configuration/, it's mainly text
>> and links and a widget to comment and nothing more complex in my opinion.
>>
>> But is it normal to have 101 request to your server while loading this
>> page? It took approximately 8.62 seconds on my browser? Making 101 request
>> for 1 page load is huge.
>>
>
> My web browser did 51 requests. The load time for 2.195 MB of content was
> approximately 18.35 seconds. Most of the content is javascript. I don't
> think that it is normal [1] to have a webpage loading like that.
>
When first accessing the page, you'll find that it takes 12.81s to load.
When accessing the page after that, it takes 3.34s to load - this is
because assets (static non-html contents) are cached locally (hence 80 v/s
24 requests).
If you see the waterfall view (above), then you'll see that there are many
webfonts that are being downloaded - and the glyphicons from Bootstrap
(maxcdn) is main culprit (10s to download). There are many ways to tackle
this problem. One is the separation of nomal CSS and those CSS that contain
_at_facefonts. CSS are to be loaded in the HTML <head>, but personally I like
to load normal CSS there, while I load all CSS containing _at_facefonts at the
bottom of the page (before any JS). This solution will be a problem for you
since you are loading Bootstrap's CSS from their CDN (maxcdn) and they
don't separate the two types of CSS there (they are all in 1 file).
A partial solution: Viewing source code of the page, I find the following:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Oswald:400,700:latin', 'Crimson
Text:400,700,400italic,700italic:latin', 'Open
Sans:400italic,700italic,400,700:cyrillic,latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' :
'http') + '://hacklog.mu/wp-content/uploads/abovethefold/localizejs/cc5f3e14d3b39307e0f9fa3227b102d4-GoogleWebfont-v1.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
This is the first piece of JavaScript in the page, and is adding, to the
DOM, another script tag (xxxx-GoogleWebfont-v1.js) before the first
<script> (i.e. before itself). It will load the webfonts defined in
WebFontConfig
(Oswald, Crimson Text, and Open Sans. What you can do it tell the script to
add it before the last <script> tag (instead of the first) - hence below in
the page. To do so, you can modify the last 2 lines:
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
Replace with
var s = document.getElementsByTagName('script');
s[s.length - 1].parentNode.insertBefore(wf, s[s.length - 1]);
We all know that too many cooks spoil the broth. In this case, too many
webfonts spoilt the webpage :p
Best regards,
Nadim Attari
(image/png attachment: Hacklog.in-summary.png)
(image/png attachment: Hacklog.in.png)