How do I know which elements (js, css) are taking the longest to render?

Asked

Viewed 404 times

1

My page has taken a long time to load (20~30 seconds), sometimes it comes to crash my browser during this process (and not only with me, other people have complained about it). I did some loading speed tests and realized that most of the time is spent on rendering (at New Relic This is very explicit).

How can I know, then, which elements specifically are taking longer to be rendered by the Browser? I believe the delay in rendering is because of some specific css or js, since until recently the site was loading in 10 seconds, but I made so many changes that I have no idea where the problem might be.

javascript html css browser
  • 1

    Do you have a link to the page you can put here? The page code would be useful too.

  • If you add more information to the link I asked for you will have more complete answers.

1 answer

2


1st Option (Using the browser):

  1. Keystone F12 in your browser (chrome or firefox I presume).
  2. Click on the tab Network.
  3. Go to your website.
  4. You will see the time of each download of each file and the download order.

2nd Option (Using google pagespeed):

  1. Access Pagespeed.
  2. Paste the link to your website and have it analyzed.
  3. You will see a list of "Bottlenecks" that your page load may be having.
  4. google will provide some teaching subjects for you to solve these "Bottlenecks" and JS, CSS and Imagens compacted (if not done).
  5. Solve the pointed bottlenecks and have them analyzed again (it can detect other problems or indicate that you could not solve them).

Browser other questions tagged javascript html css browser

You are not signed in. Login or sign up in order to post.