nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to make a page load up faster with TOC, tables and pictures?

kirthyiyer

Hi there,

I have a page that has a table with one column using headings for table of content. The table itself has 20 columns and 90 rows. One column has pictures.

This is great for the purpose we need the page but it takes quite some time to load. The images are each at 256x256 resolution 72dpi. The images and table of contents take some time to load, making the page load really slow.

What practices can be used to speed up the page loading?

Accepted answers

Mykenna Cepek

If you don't need the images at that full resolution, then scaling them down will likely improve load time.

We have a "company directory" page with dozens of rows, and one column with employee headshot photos. To ensure it loads fast, I resize each new picture to 100 x 100 pixels. That's good enough for this purpose. A cold-load of that page just now took 7 seconds, with lazy-loading of the photos as fast as I could scroll down the table.

If you have other non-static content on this page, that can really impact load time too. The images might not be the problem. A quick way to check: copy the page, delete the column with the photos, and check load time of that page without photos.

One other question: what plan are you on for your Confluence Cloud (free, standard, premium, enterprise)?

All comments

Mykenna Cepek

If you don't need the images at that full resolution, then scaling them down will likely improve load time.

One other question: what plan are you on for your Confluence Cloud (free, standard, premium, enterprise)?

kirthyiyer

Hi thank you for your answer. The images are already at 256 x 256. I am on a Standard plan. I notice the loading spiral on both table of contents and images and the formatting takes few seconds until the page fully loads.

Mykenna Cepek

I know that 100x100 and 256x256 doesn't sound that different. But the latter is 655% larger.

You might also try tracing the load time with Chrome developer tools: "View > Developer > Developer Tools > Network", then "Clear", then reload the page.

Did you try the page-copy test I suggested? How did that turn out. Maybe images aren't the main problem.

Also curious if ALL the other info in the table is static (just plain text) or not.

kirthyiyer

Fair enough. I did try removing images and still a bit slow. All the other columns are just text. The other thing that takes time to load is table of contents as one column has text in heading 2 and they form the sub-level of 'Table of contents' inserted in the beginning of the page.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

cloud

confluence-cloud