Is the problem in the design of the site?

Get Started
1

Perhaps the reason for the slow emergence of a wall of the site is poorly designed,??
Whoever sees the site is slow there in the wall of the right and left to emerge over the main wall…!!
http://www.bnk.org.uk
Help me please…
Can I find css or javascript code to improve the site?

2

I don’t quite understand what you’re asking - what do you mean by a “wall”?

The site loads slowly because the home page is huge, and makes a vast number of requests for resources - 203 images and 43 scripts.

3

I guess the “wall’s” are the columns.
The middle column is loading first, after that the left and right column.
While the middle column is loading, left and right stay white.

But the middle column needs a lot of time to get rendered. You can see that if you look at the scrollbar right: the scrollbar height is growing slowly (that is the part of the page “under the fold” = under the bottom of the browser viewport), and when the scrollbar is finished (the “under the fold” part is ready), the left an right column appear.

Why the middle column is rendering so slowly? The images!

Nexus-image:        1.199px ×   799px   (total:   958.001 px)
Twitter-image:        635px ×   418px   (total:   265.430 px)
Pebble-image:       1.500px ×   991px   (total: 1.486.500 px)
Chromecast-image:     720px ×   480px   (total:   345.600 px)
iPhone5S-image:       599px ×   458px   (total:   274.342 px)
IBM-image:            580px ×   401px   (total:   232.580 px)
WatchDogs-image:      610px ×   400px   (total:   244.000 px)
WiiU-image:           968px ×   614px   (total:   594.352 px)
BrentStirton-image: 1.600px × 1.066px   (total: 1.705.600 px)
PS3-image:          1.600px ×   900px   (total: 1.440.000 px)
Fish-image:           600px ×   388px   (total:   232.800 px)
Jelly-image:          990px ×   693px   (total:   686.070 px)
=============================================================
12 images .............................. total: 8.255.275 px

Now all images are scaled down by the browser, to on screen only: 356px × 205px each.
That means: there are (8.255.275 - 12*(356 × 205)) = (8.255.275-875.760) = 7.379.515 pixels downloaded for nothing!
Or: only 11% of the downloaded pixel-amount is needed.

Of course the pixel-amount has a relation with the file-size of the images.

  • For instance the Nexus-image is now: 60 kB. In the format 356px × 205px the file-size is only: 10kB (this image: [U]Nexus-nw.jpg[/U]).
  • The BrentStirton-image is now: 457kB, can be: 26kB (this image: [U]BrentStirton-nw.jpg[/U]).

So if you upload the images in the real size that they have on screen, you can have a serious faster page:

  • Faster download time,
  • and as well: the browser doesn’t have to scale the images, which is also eating time.

Conclusion: I guess in this way the rendering of the left and right column can be done about 5 à 8 times faster. :slight_smile:
But this is not all; as TechnoBear pointed, the amount of attachments of the page is > 330 files … huge.

BTW, do you know it is copyright infringement to re-publish articles or photographs from an other site, if you don’t have the consent of the other site/writer/photographer?

4

I counted…

54 Documents -1591 KB (1904 KB uncompressed)
103 Images - 2348 KB (2348 KB uncompressed)
65 Scripts - 838 KB (2654 KB uncompressed)
28 Style Sheets - 54 KB (250 KB uncompressed)
Total 250 Files - 4831 KB (7156 KB uncompressed)

That is waaay too much data for a single page.

A lot of that data is Twitter/Facebook/Google+ widgets, javascript and CSS which will slow things down a lot, and as Fancky said a ton of unoptimised images.

Two suggestions:

  1. You could try caching pages/data so you’re only loading resources from your site and not elsewhere
  2. Use a CMS to import data as entries, you will then have full control over content structure