How do you know what elements (js, css) are taking longer to render?

1

My page has taken a long time to load (20 ~ 30 seconds), sometimes it crashes my browser during this process (and it was not just me, other people have come to complain about it). I did some load speed tests and realized that most of the time is spent rendering (in% with_that this is very explicit).

How do I know, then, which elements are specifically taking longer to render from the Browser? I believe that the delay in rendering is due to some css or js in specific, since until recently the site was loading in 10 seconds, but I made so many changes that I no longer have any idea where the problem might be. / p>     

asked by anonymous 06.06.2015 / 23:50

1 answer

1
  

1st Option (Using the browser):

  • Type F12 in your browser ( chrome or firefox I assume).
  • Click on the Network tab.
  • Access your site.
  • You will see the time of each download of each file and the download order.
  •   

    2nd Option (Using google pagespeed):

  • Visit Pagespeed .
  • Paste link to your site and have it analyzed.
  • A list of "Bottlenecks" that your page load will be displayed will be displayed.
  • Google will provide some teaching materials for you to resolve these "Bottlenecks" and JS , CSS and Imagens zipped (if you have not done so).
  • Resolve the named bottlenecks and have them analyzed again (you can detect other problems or indicate that you could not resolve them).
  • 07.06.2015 / 00:30