1

I'm just a simple UX Designer beefing up his code skills, so please forgive my ignorance and crappy code.

I'm rebooting my portfolio website. The original seamless grid was built using a Masonry like JQuery plugin. It's very sluggish though. http://jack-a-lope.net/Illustration.html

I decided to rebuild it using Masonry but was worried that the performance might still be bad, so I found an all CSS solution, that I hope loads faster. https://css-tricks.com/seamless-responsive-photo-grid/

I asked for some help on another website and was told the issue was not that the plugin was slow but that I was preloading 3mb of images. I've already resized all my images, and optimized them to the best of my ability, cutting out a pretty significant chunk of memory, and yet it's still loading slow. What am I doing wrong? Why is that larger websites can load so many images, but this code is choking up? Are there other things I need to do to optimize this? Is it just a matter of sticking a loading screen on the page or what?

[EDIT:] All images are already compressed and optimized. The images actually load decently fast, the problem is that I get a FOUC while the JS takes time to reformat the images etc.

Aslan French
  • 520
  • 2
  • 6
  • 23
  • 1
    Bigger website resolve this by only loading the images they need using ajax to do lazy loading. (thats why when you get to a certain part on some pages it will give you a loading indicator) Without showing us what you are actually doing your question is very broad. – Seth McClaine Jun 29 '15 at 16:40
  • According to google page insights (I highly recommend everyone uses, https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fjack-a-lope.net%2FIllustration.html&tab=desktop) your images are optimized. To not lose picture quality you would need to go with lazy loading, ajax as Seth suggested or a loader on the whole page. Those websites with a ton of pictures have much lower resolution images. Also the cat example one you gave takes a terribly long time to run, the picture at the top of that page is a single picture, towards the bottom is the actual example. – Brennen Sprimont Jun 29 '15 at 16:53
  • Yeah, I tried the actual example at the bottom, and it seemed to load faster to me. Is CSS generally faster than JS? I've always gotten that impression. @SethMcClaine So I guess the only way to handle this is loading, hmmm... dang. I was hoping I could optimize this without needing to do that. I'm basically just loading the images on the page with a colorbox lightbox and jquery plugin called "gridify" applied. No lazy loading etc. – Aslan French Jun 29 '15 at 17:01
  • Using Chrome, right click your page and go to inspect element, then go to the network tab and click the checkbox to disable caching. From here you can see how long each element takes. Gridify took 159ms, which is fast. A CSS solution wouldn't tangible improve speed. The issue is with the resolution of your pictures, and to keep the same quality you need to implement the above mentioned solutions, their is just too much data being transferred. – Brennen Sprimont Jun 29 '15 at 18:20
  • A workaround would be to add a large banner that takes up the first "scroll" of your page. The banner will load instantly and all your images (which are further down on the page) can load in while they are looking at your fancy banner. – Brennen Sprimont Jun 29 '15 at 18:22
  • @BrennenSprimont Ah yeah, looking at the network results (thanks for telling me how to do that), it looks like the issue is definitely the images, as some of them are taking nearly a second to load. Hmmm.... but I just reloaded the page after deleting my cache, and now it says gridify is taking 3.09 seconds to load. Most of that time is spent "waiting" though. Waiting for images to load, I imagine? – Aslan French Jun 29 '15 at 19:20
  • It seems to me the problem might be not that gridify is too slow, but that the images load slowly and gridify is blocked until all images are loaded? – Aslan French Jun 29 '15 at 19:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/81902/discussion-between-david-a-french-and-brennen-sprimont). – Aslan French Jun 29 '15 at 19:34

2 Answers2

2

You are preloading 3MB of images because that's the sum of your images weight, that's not a problem, it's the normal behavior.

You can see some improvements using a Image Compression Tool, but if you think that the page will increase the number of images, you should consider the Lazy Load with infinite scroll, I've used this jQuery plugin, and works great with static pages.

Edit:

If you are not going to have many images, then you can use lazy load and fade in the image once is loaded. Two of my favorites jquery plugins are:

Community
  • 1
  • 1
Tomas Ramirez Sarduy
  • 17,294
  • 8
  • 69
  • 85
  • Already compressed. I have thought about using infinite scroll but I don't think I have that many images. The problem to me, seems to be the reorientation of the images, not loading them initially. – Aslan French Jun 29 '15 at 17:08
  • @DavidA.French, you may want to to with Lazy Load instead? Check my edit – Tomas Ramirez Sarduy Jun 29 '15 at 17:14
  • Excellent, thanks, I think I'll try Unveil. I checked around online with other people and it seems that the only solution to this is going to be using a lazy loader of some kind. – Aslan French Jun 29 '15 at 17:41
-1

To optimize the images the best is to use Photoshop "Save for the Web" option. But yes, apart for the images size, that is very important, there a lot of things that affect a website load speed.

You should:

  • Make the size of your images as small as possible without affect the quality
  • Use a good hosting
  • Minimize and combine CSS & JS files
  • Minimize requests
  • Take advantage of the cache
  • Use a CDN
ThemesCreator
  • 1,749
  • 6
  • 27
  • 49
  • Already doing most of these things. I'm working on the CDN stuff now also. The images are already optimized, the issue is way I'm calling the images. – Aslan French Jun 29 '15 at 16:58