i have a jekyll site hosted on github pages.
https://myartportfolio.github.io/magnets/magnets-1
In my header there is a basic with links. when clicking through the links the whole nav dissappears until the page is done loading
(this only happening on Chrome as far as i can tell…firefox no issue, also my localhost:4000 no issue)
Hi.
Those images are all about 1mybte each and therefore slow the page down. At the size you display most of them they [probably should be under 100k each (apart from the full size ones).
I have a very slow connection and it takes ages to load and I can see the red sidenav flick on and off while the page reloads.
It would help if you put the image dimensions in the html width and height attributes of the img tag and then the browser can set aside the space required for the image and carry on loading the rest of the page. If not the browser stops and loads the image because it doesn’t know how to layout the rest of the page until the page has finished loading.
Some browsers are better than others and so you will always get different rendering speeds.
Always optimise your images for the size that you are showing them at. I don’t think in 20 years I’ve ever loaded an image greater than 2 or 300k and even then it makes me wince:)
If the quality of the image is necessary for the site (such as an artwork site) then you will need higher quality images but again if you optimse carefully you cab usually cut the image file size in half.
It is also worth remembering that when you click a link to load a new page it will never be instant and the page is redrawn anew.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.