von Bergh

[AndZyk]

 

Hello ProcessWire-Community,

I would like to share with you an website I made with ProcessWire for the agency designconcepts, for which I am currently working for. The website is for the interior decoration company von Bergh and is a single page. Although it has very much content to offer through some flexible sections.

On top of the website is an classic image slider, which changes the parallax background of the site, depending on which image currently is displayed. The news section is an accordion element inside an tab element, so that it could have multiple news pages. The reference section is an isotope element, which can be sorted and the active reference is loaded with AJAX into an stage container. The company section and footer are tab elements, but the footer is hidden on page load and expands by clicking on the navigation.

Further is the website translated into two languages, responsive, optimized for better performance (for example through LazyLoad and Responsive Images).

At last here is a short list of modules I used:

• Template Twig Replace
• Images with cropping
• MinifyHTML
• Trashman
• Schedule Pages

I really hope you enjoy this website and maybe I will post some more, because I am a great fan of the ProcessWire CMS.

Best regards, Andreas

[ottogal]

Despite my fast internet connection the page needs more than 25 seconds to load. Some visitor might jump away before...

[horst]

This site definitely need some caching and lazy loading. Also when I switch the language, I have to wait again a long time.

[AndZyk]

You are right. I tried all I could to speed up the performance. I already use browser caching and lazy loading, but sadly the server environment the website is hosted on isn't the best.

[LostKobrakai]

The frontend isn't the only place where you can cache stuff. For me it just took 40 seconds till I got the html response, while the bulk of other requests was done in another ~7 seconds. I don't know what this page is doing, but caching the generated markup to prevent it from doing it on every request will get you a huge speed boost. With all the static files served this fast maybe even ProCache would be a good investment.

[AndZyk]

Thank you for the advice. I have to learn more about caching html responses. So far I only cached javascripts and stylesheets through the .htaccess-File.

I have now uploaded the site on our own hosting service, because the long loading time bothered me, and on this hoster the website loads in 1,3 seconds according to Google Page Speed Insights. On the server the website is currently hosted on it loads in 4,6 seconds. But the loading time seems to be higher sometimes. I had previously a loading time of 20 seconds. So it seems definitly to be a problem with the hoster.

I will try to get in contact and ask for a solution. I'll keep you updated if the sites performance has improved.

[LostKobrakai]

Here you'll get a quick overview over the common caching options in processwire: http://www.flamingruby.com/blog/processwire-caching-explained/

[felix]

For quicker "initial delivery": Try to do a flush() (or {% flush %} as you're using twig) where it makes sense ( see http://www.phpied.com/progressive-rendering-via-multiple-flushes/ ).

There is also a setting to use twig cache in the module options of TemplateTwigReplace. If you haven't activated it yet now would be a great time to do it

[AndZyk]

Thank you all for the great advices. I really have to dig deeper into the caching topic. I didn't knew what easy options the core of ProcessWire has to offer for caching.

@felix:

I now have enabled the twig cache, thanks to you. Do you know if it is smart to combine the twig cache and the template caching? Or should I only use one of those? At the moment I have twig cache enabled and set an hour long caching time for the "Home"-template.

[sarah_hue]

With everybody else discussing performance: I like the one-page construction very much, and when it comes to neat little details like the imprint fly-in animation the design really convinces me. (Though I'm usually not a fan of one-page-sites!) The many, many references are clearly arranged and especially the different categories of references are beautifully implemented. Well done, Andreas!

The only obstacle I found was the long way I needed to scroll down once I clicked on details of the very last references - since that flies me directly to the upper content area, with no link to get back to the end of the list. But this definitely is a minor observation, it doesn't bother me at all. 

And the performance is all right with me now, the whole page took 2,4 seconds to load on first try. Looks like your server changes paid off! (And caching options with ProcessWire are sweet.)

[AndZyk]

I am happy you like the website. I can't take credit for the design, because that was made by an co-worker, but I will let him know. 

The long scrolling after clicking the last reference is indeed a little obstacle. When I developed the site I didn't expect that there would be so many references. That is one of the disadvantages of a single page design.

It seems like the caching is already doing its job, because I didn't switch the server yet. But 2,4 seconds loading time is already an improvement.