Innobloom

[tpr]

Innobloom

 

Fast multilanguage site that features lazy loading assets, custom forms and a little bit of parallax. It features about all the goodness I gathered in the past year or two about ProcessWire and web development in general.

 

We were trying to achieve a high google page speed score. That's why we added ProCache, though at first I was a bit sceptic whether it could improve anything as I had my own ways to speed things up:

1. Using srcset and bgset for images with lazy loading (lazyload.js). To achieve this, I created my own functions to render the markup, and it has been released as MarkupSrcSet module later.
    
2. Lazy loading JavaScripts. This is a technique I used frequently recently: adding a tiny inline "loader script" to the page which loads all the other required js files in order. In certain cases some CSS files are also loaded by JavaScript, mostly for plugins that don't have immediate visual impact. This eliminates render blocking scripts/stylesheet issue.
    
3. Vanilla JavaScript. I try to use jQuery only if it's absolutely required, for example when having to use a plugin that has no plain JavaScript alternative. Most things can be easily achieved with no framework and the number of dependency-free plugins are also increasing. Often it requires only a few lines to get the required feature. For example the parallax effect on the top is only a few lines.
    
4. Latte template engine. This is mainly for making development and templating easier, but also caches pages. This was one of the projects where I tested my newborn TemplateLatteReplace module which was released recently.
    
5. Forms: NetteFormsHelper. This is a form module that uses Nette Forms. In this project I added useful features to it like character counter, date picker, notice when leaving the page with unsubmitted form data, autocomplete inputs, honeypot field and textarea autosizing. All these features uses plain JavaScript and assets are lazy loaded (and only when they are used on the page). All these add up to a lightweight but very powerful form module. No more frustration when having to add a form - apart from those days when I figure out to implement a new feature
    
6. Keeping CSS as small as possible and adding it to the head. I used Susy here and the site's CSS is about 24 kbytes. To achieve such a small size I didn't use any framework. Imho using no CSS framework is better on the long run, at least in projects like this. I know that CSS is not cacheable this way but as long as there's no non-hacky way of loading CSS async and without FOUC it's fine for me.
    
7. The usual .htaccess speed improvements, including ProCache additions

 

ProCache

 

Without ProCache we could achieve about 92-96 page speed scores. While it was pretty good (partly because of Latte) it was still not he score we wanted to see. Then ProCache was activated and boom! - 98/98. In fact this could be considered as 100/100 because there's only Google Tag Manager and Analytics scripts that reduced the score, and being remote assets we have no control over it.

 

Modules

 

The site is running on PW3. Notable modules used:

• ProCache
• MarkupSEO
• ProField Matrix Repeater (new favorite)
• Tracy Debugger
• Multivalue Textformatter
• Batch Child Editor (mostly for deleting test form submissions)

 

Let's Encrypt

 

HTTPS is achieved using Let's Encrypt. In fact this wasn't available on the host provider but after our inquiry they developed a cPanel module for it. We really appreciated their flexibility and open-mindedness.

 

Templates

 

There's only three template files on the site, and two of them are identical as they share the same fieldgroup. The basic-page template decides which page is the current, and adds additional variables/forms that are passed to the view file.

 

I'm pretty happy with this site. It's fast, snappy and easy to maintain. As for the latter, Matrix Repeater does a nice job on allowing adding content blocks to the page on which the developer have full control - no more CKEditor WYS-is-for-sure-not-WYG madness!

 

And the conclusion is: don't waste time to over-optimize a site. Reaching a reasonable speed is good enough, further optimizations will only make maintenance more and more harder (not to mention the frustration it causes). Anyway, it's useful having a project like this to get familiar with the current speed improvement techniques.

 

https://innobloom.com/

[adrian]

Fantastic writeup and insight into the development process and the speed gains from Latte and Procache!

Just one quick comment - the image in the banner is suffering from some JPEG pixilation around the person. Weird thing is that photo is actually of where I am currently hiking/climbing

[tpr]

Thanks! The pixelation is surely from overcompression... we'll see it.

Weird thing is that photo is actually of where I am currently hiking/climbing

That's funny... and apparently there's WIFI there

[bernhard]

great to read and great site tpr!

+1 for better image quality. it's definitely a high quality site but the first impression is quite low quality as the images do really NOT look good but that's what 99% of the visitors will see. they won't see performance benchmarks and so on.

thank you once more for your help regarding netteforms. they are a core feature of my new project going online next month

[tpr]

Thanks, I will try to get time to fix the images. Yes, NF is great, you would have been a good tester of my module though it weren't a good idea to check for bugs on a production site.

[Yannick Albert]

Performance is nice, could get better with HTTP/2, AJAX and "prebrowsing" (https://tools.pingdom.com/#!/co5Dx5/https://innobloom.com/) . A thing I don't like is the flash due image-swap. Also, some script prevents the 1-finger swipe-back behavior on OS X.

[gmclelland]

On 6/1/2016 at 1:43 PM, tpr said:

There's only three template files on the site, and two of them are identical as they share the same fieldgroup. The basic-page template decides which page is the current, and adds additional variables/forms that are passed to the view file.

Hi @tpr ,

I know this is older now, but it sounds interesting.  Care to share any more information about this?  What do you name the templates?  How exactly does it work?

On 6/1/2016 at 1:43 PM, tpr said:

Matrix Repeater does a nice job on allowing adding content blocks to the page on which the developer have full control

Can you show a screenshot of the different types of RepeaterMatrix items?

[tpr]

HI @gmclelland

I think I have meant these:

$view->searchPage = 1611;

if ($page->template->name == 'blog' || $page->id == 1583 || $page->id == $view->searchPage) {
    include './templates/_search.php';
    $view->newsletterForm = addForm(1599);
}

if ($page->id == 1035) {
    $view->viewFile = 'services';
}

if ($page->multivalue && $page->multivalue->type == 'wd') {
    $view->viewFile = 'forms-webdev2';
}

// blog pages
if ($page->parent->id == 1583) {
    $view->viewFile = 'blog';
}

And it's ready.php and not the basic-page), I guess I have changed this in the meantime. I use ready.php for all such settings, it's my "second config.php" in my projects. Of course this kind of setup is made for the Latte template engine (99% of my projects are done with it).

See the matrix screenshot attached. It's not very sophisticated, I've added new checkboxes and items as there were a need to them. It's not easy to set it up right but when it's ready and the client is able to use it properly it can be very effective. But most of my projects I do not allow such flexibility for clients (or there is no need for that).

[gmclelland]

Thank you tpr! That was very helpful.