Recommended Posts

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
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.
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.
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.

  • Like 15

Share this post

Link to post
Share on other sites

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 :)

  • Like 2

Share this post

Link to post
Share on other sites

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 :)

Share this post

Link to post
Share on other sites

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 :)

  • Like 1

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.