TTFB is too BAD !

[majed]

Dear Webpagetest Members,
I have a site : http://dalano.com/
Recently (about 2 weeks) my site is going to loaded very slow and it has been so slowly than before.
Here is the result for webpagetest.org :

https://www.webpagetest.org/result/16121...view_step1

You are watching that TTFB is very terrible :| .
I have IIS 7.5 and Windows Server 2008 R2 with aspx website.
What is your opinion about improving my page speed and solving my recent problem?

Thank you for your cooperation.
King Regards.

[avalanch]

CSS at the top and loading BEFORE any JS.
Move your JS as much as you can to the bottom and defer where possible.
Fix 404 errors reported in the test... they have a red highlight.
Specify image dimensions
Optimize images
Leverage browser caching

You can find a in-depth report here.
https://gtmetrix.com/reports/dalano.com/HTm5l33l

[bcoon9]

(02-23-2017 12:14 PM)avalanch Wrote:  Move your JS as much as you can to the bottom and defer where possible.

avalanch, great suggestions!

Could you explain more on the quoted one?

As far i understand moving JS to bottom without defering will not accomplish much. The browser will be anyway waiting until it gets all js from the page (even if it's at bottom) to start rendering.

[avalanch]

This is something I'm still figuring out actually. I just out of common practice defer js at the bottom, so it should load after the page render finishes. If something breaks, I remove the defer.

[pmeenan]

The TTFB is all on the server side in the application code (the aspx). Unfortunately from the outside there's not much we can tell about why it is slow. Usually the main cause is slow/lots of database queries or calls to external services but it could be any of a thousand things. APM products like NewRelic can help you quickly find server-side issues.

The css files should be merged together into no more than 2 or 3 and as avalanch mentioned, moving the js to the bottom if it won't break the page can really help. The key is that if the UI actually depends on the JS to draw it then it won't make a difference.

Browsers will paint before loading the JS at the bottom of the page if there is something to paint.

[dannym]

(02-23-2017 12:14 PM)avalanch Wrote:  Specify image dimensions

Curious about that one.
Why is that?

[avalanch]

From gtmetrix...

Quote:Page Speed currently only detects image dimensions that are specified via the image attributes. If you are specifying the dimensions via CSS, then you can safely ignore this recommendation.

Details from Google

When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.

For sites with little images, this shouldn't matter. But for sites trying to place 50 plus different images... then yeah, it would make a difference. Plus this can make a difference when ranking for "serve scaled images".

[dannym]

(03-08-2017 09:19 AM)avalanch Wrote:  From gtmetrix...

Quote:Page Speed currently only detects image dimensions that are specified via the image attributes. If you are specifying the dimensions via CSS, then you can safely ignore this recommendation.

Details from Google

When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.

For sites with little images, this shouldn't matter. But for sites trying to place 50 plus different images... then yeah, it would make a difference. Plus this can make a difference when ranking for "serve scaled images".

Thanks