Website Technical Overview

This is a technical overview over the most important aspect of the website. Note that the main office infrastructure is hosted on Office 365, which is completely separate from the website.

Hosting

The website is at 1&1 on a virtual machine. To log in, please go to the login page and enter ccchislehurst.org as Customer ID.

The hosting platform has the following characteristics:

• OS: Ubuntu 16.04 - 64-bit (Standard)
• Resources: 2 CPUs and 2GB of RAM, 80 GB SSD
• Web server: Apache with FastCGI and PHP 5.5
• Database: MySQL
• User account: ccchislehurst.org
• Domains: ccchislehurst.org, christchurchchislehurst.org

Content Delivery Network

The website leverages are Content Delivery Network (CDN) called CloudFlare to speed up page load time and increase security. To configure it, go to the CloudFlare login page. CloudFlare also host a free SSL certificate.

Joomla!

The website is based on a CMS called Joomla! which is a popular, free open source Content Management System (CMS) based on the programming language PHP. Joomla! can be customised in many way to adpat it to specific requirements, including extensions and https://docs.joomla.org/Template templates].

Template

The current Joomla! tempate is based on Uber template from JoomlaArt which in turn is based on the T3 framework. Therefore the key technologies that the template uses are:

• PHP 7.0.28 for dynamically generating the pages.
• HTML5 for rendering the pages.
• Twitter Bootstrap/CSS 3 for responsive styling the pages.
• JQuery for dynamic client side content access and manipulation.

Customations

Pintrest-Style Tag Layouts

To turn a normal list of tagged items in to a pintrest-style layout, add -pintrest in Page Class field of the menu item.

Custom Fields

The following file contains the name of the tab that is displayed in the editor: language/en-GB/en-GB.tpl_uber.sys.ini. The fields are define in the XML files in this directory: templates/uber/etc/extrafields

Caching

The website makes use of multiple caching mechanism to achieve the best possible user experience and it's important to understand how they work. In particular it uses:

• Resources caching
• Joomla module caching
• Edge-side caching via a Content Delivery Network (CDN)
• Browser caching

Resources Caching

In the production environment, page resources, in particular CSS and Javascript, are cached and bundled by the Joomla plugin JCH Optimize. If a non-LESS-compiled CSS resource needs to be refreshed, the JCH Optimise cache needs to be cleared manually. If a CSS resource needs to be refreshed because the corresponding LESS file has been edited, the LESS files first need to be compiled to CSS and then JCH Optimize cache has to be flushed.

If only an update has been made to a JCH Optimize file without changing the file name, then the cachebuster value in the templates/uber/local/etc/asset.xml has to increased to force JCH Optimize to generate a new URL.

Joomla Page/Module Caching

Joomla has a feature that caches pages and modules so that it doesn't have to regenerate the whole page for every request. As part of the initial page generation, fragments of the page are stored in the cache which in our case is configured to use the file system. Whenever a page is updated the cached version needs to be invalidated. We use a Joomla extension called Cache Cleaner to automatically invalidate the whole cache whenever a content update is made. Invalidating the whole cache is not ideal as most of the content won't be stale. To make sure that pages get recached as quickly as possible, a script is on the our web server retrieves the sitemap every 10 minutes and then requests each entry in turn. Hence, after a maximum of 10 minutes, the cache should be populated again.

Edge-Side Caching

To cache static resources and eventually also the rendered pages, we use the Content Delivery Network (CDN) CloudFlare. It caches content for a configured period of time and therefore reduces load on the server. and reduces the overall page load time.

It should generally not be necessary to flush the cache on CloudFlare. Instead, when resource, such as images, need to be updated, they should get a new name, which will result in a cache miss and pull the new resource from the server.

Browser Caching

Caching resources such as images, stylesheets and JavaScript on the browser dramatically reduces the overall page load time. How long resources are cached on the browser, is determined by three factors:

• Caching time configured on the server, e.g. in the .htaccess file
• Caching time settings on the CDN
• Caching configuration and limitation on the browser

It's important to note that once a resource is cached on the browser it can't be removed automatically until it expires. Only the user can explicitly clear the cache. Therefore it's important to carefully consider what resources to cache and for how long.

Joomla Extension

We currently use the following Joomla extensions:

• Cache Cleaner: To flush the Joomla server side cache whenever content is updated.
• DPCalendar: For event/calendar management.
• AcyMailing: For email list management, self subscription via the website and bulk mailing.
• Akeeba Backup: For backing up the Joomla files and database.
• JCE Editor: For content authoring.
• Xmap: For generating the sitemap that tell search engines about the structure of our site
• sh404SEF: For URL management, 404 detection and for meta data configuration such OpenGraph and Twitter Cards
• Skyline Simple Download: For enable downloads of audio recordings and PDFs.
• Trombinoscope Extended: For displaying the contacts.
• JCH Optimize: For bundling/minification of Javascript/CSS resources.
• T3 Framework: For template management and mega menu.
• Instagram Feed jQuery Plugin - InstaShow: For displaying Instagram content on certain pages.