Difference between revisions of "Website Technical Overview"
Marc.maier (talk | contribs) |
Marc.maier (talk | contribs) |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 5: | Line 5: | ||
The hosting platform has the following characteristics: | The hosting platform has the following characteristics: | ||
| − | * OS: | + | * OS: Ubuntu 16.04 - 64-bit (Standard) |
| − | * Resources: 2 CPUs and | + | * Resources: 2 CPUs and 2GB of RAM, 80 GB SSD |
* Web server: Apache with FastCGI and PHP 5.5 | * Web server: Apache with FastCGI and PHP 5.5 | ||
* Database: MySQL | * Database: MySQL | ||
| Line 20: | Line 20: | ||
== Template == | == Template == | ||
The current Joomla! tempate is based on [https://www.joomlart.com/joomla/templates/uber Uber template from JoomlaArt] which in turn is based on the [http://www.t3-framework.org/ T3 framework]. Therefore the key technologies that the template uses are: | The current Joomla! tempate is based on [https://www.joomlart.com/joomla/templates/uber Uber template from JoomlaArt] which in turn is based on the [http://www.t3-framework.org/ T3 framework]. Therefore the key technologies that the template uses are: | ||
| − | * PHP | + | * PHP 7.0.28 for dynamically generating the pages. |
* HTML5 for rendering the pages. | * HTML5 for rendering the pages. | ||
* Twitter Bootstrap/CSS 3 for responsive styling the pages. | * Twitter Bootstrap/CSS 3 for responsive styling the pages. | ||
| Line 28: | Line 28: | ||
=== Pintrest-Style Tag Layouts === | === 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. | 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 [https://www.christchurchchislehurst.org/administrator/index.php?option=com_plugins&view=plugin&layout=edit&extension_id=10280 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 [https://docs.joomla.org/Cache 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 [http://extensions.joomla.org/extension/cache-cleaner 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) [https://www.cloudflare.com/ 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 - [https://codecanyon.net/item/instagram-feed-jquery-plugin-for-instagram/13397600 InstaShow]: For displaying Instagram content on certain pages. | ||
Latest revision as of 21:25, 9 March 2018
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.
Contents
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.
