NOGAJSKI :: FOTOGRAFIE

[horst]

NOGAJSKI
FOTOGRAFIE

I have relaunched my homepage. I don't remember exactly how many versions I may had since I launched my first homepage in 1999, but for me, the new one seems to be the cleanest and fastest. At least its the one with the best backend ever. (PW 2.6)

The layout of all pages, including the slideshow, is usable from (300 x 260 px) up to bigger desktops (27'').

I have tried to satisfy google PageSpeed, but only in a medium range. Other tools than googles do a more in depth analysis and show much better detailed results. But anyway.

All pages uses one sitewide css file and one sitewide js file. Only the portfolio slideshow loads an additional js and css file too. (The server is setup to force browser caching, so with the second page view, no js or css dependencies need to be downloaded.)

And ProCache is used! (what else)

Besides my images API tools I use delayed output via Spex.

CSS framework is pocket-grid and on the JS side I use LazySizes, Vegas and the new Photoswipe 4.

Thats all.


http://nogajski.de/


Here are some screens with minimal viewport (300x260):



and here are two medium screens:

[Martijn Geerts]

Damn, that loads quick !

Pages are switched before the links are clicked.

[LostKobrakai]

While the pages are quite fast I noticed that I get a lot of "blank" image containers initially and on every page load. Seems like lazy-loading prevents cached images from being displayed, as they display quite fast as soon as I stop scrolling. For this few images I would really think if it's worth to have lazy loading for the thumbs. These blank containers really make the loading feel slow here, even though it's the opposite.

[tpr]

Very fast, even with such number of images!

In Chrome (39) the main menu doesn't always stick to the top but scrolls with the page. If I add this to "header#hnHeader", it seems to fix it:

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

[horst]

While the pages are quite fast I noticed that I get a lot of "blank" image containers initially and on every page load. Seems like lazy-loading prevents cached images from being displayed, as they display quite fast as soon as I stop scrolling. For this few images I would really think if it's worth to have lazy loading for the thumbs. These blank containers really make the loading feel slow here, even though it's the opposite.

Thats how lazysizes works. One can use lowres images or blank (1x1 px transparent gif as base64 data) for images beneath the fold. The images are cached, but only gets loaded when you scroll down.

EDIT: And yes I think it is worth to have lazy loading here, at least if one is on mobile with a small connection.

Edited June 9, 2015 by horst

[LostKobrakai]

Sure, I don't want to invalidate this, but the perceived feel of speed is totally drawn away by those empty boxes. Especially if I compare that to how my photography website loads on second visits. It's a blink and the images are there. I totally see why one wouldn't want to load all images before they are actually visible, but on the other hand why wait for loading images if it's not blocking anything. All other things which load initially are available in a breeze.

[horst]

In Chrome (39) the main menu doesn't always stick to the top but scrolls with the page. If I add this to "header#hnHeader", it seems to fix it:

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

I only have Chrome 43, there it is fixed. I have added it to the stylesheet. Thanks!

[horst]

Sure, I don't want to invalidate this, but the perceived feel of speed is totally drawn away by those empty boxes. Especially if I compare that to how my photography website loads on second visits. It's a blink and the images are there. I totally see why one wouldn't want to load all images before they are actually visible, but on the other hand why wait for loading images if it's not blocking anything. All other things which load initially are available in a breeze.

Hhm, I see. You are right. With the second load of an image, the lazysizes is contra productive.

Is there a way to combine both? Lazyloading for first display, and local cached version afterwards?

[LostKobrakai]

Not that I'm aware of, that's why I'm not using lazy loaders. For me it's enough to use the srcset/sizes to serve small images by default and leave the rest to the browser.

[horst]

I have enabled preloading with lazysizes. Does this "feel" better?

[LostKobrakai]

Yeah, just scrolled down at a "reasonable" speed and noticed only 2 or 3 blank boxes, while before most of the boxes where empty. 

[tpr]

Just niced you don't have "Nogajski" in the window title, only for the main page. Is it by design?

(just showing your site as a speed reference btw )

[ottogal]

One tiny weakness: The subtitle  Produkte . People . Prozesse  gives the misleading impression to be a menu of three items - resulting in an irritating navigation experience...

[horst]

Just niced you don't have "Nogajski" in the window title, only for the main page. Is it by design?

(just showing your site as a speed reference btw )

Not by design, was just on the ToDo, (erm, on the "forgotten" list). Also on the ToDo is to add some meta-headers and more content in regard of SEO.

One tiny weakness: The subtitle  Produkte . People . Prozesse  gives the misleading impression to be a menu of three items - resulting in an irritating navigation experience...

You are right with the impression, but the subtitle belongs to the brand, so I cannot drop it. And the whole paragraph is a (one) clickable link which points to the portfolio, where all three sections are available. So at least not completly wrong. But I'm always open for suggestions.

Edited June 16, 2015 by horst