The Challenges.
Olympia London required a design refresh, to bring the Drupal build we carried out in 2013 up to date. One of the aims of the rebuild was to increase the site speed across both mobile and desktop platforms.
Many Drupal builds use a base theme to provide the underlying theme structure. Quite a few recent projects have used Bootstrap. A sub theme then builds on top of the chosen base theme to provide the required design. This master / sub theme is a cost effective rapid development method, but it can also result in more markup and CSS to override the base theme defaults. This extra code can slow page loading and rendering.
The Solution
The front end team built static html pages to show Olympia London the design working across various devices. These pages were then pulled apart to populate the Drupal template files. With a combination of theme preprocess functions and templates, we minimized the wrapper markup. Once the wrappers matched the static html, we then applied a custom template to each part of the Drupal backend. For the most part this was quite simple. Drupal views, used to generate many of the listings, make it simple to use a custom template for the view output. Some contributed modules hard code html into the output and these proved more difficult to change. Any changes must be outwith the module or the next security update will delete those modifications. We found resolutions to most of these hard coded issues. For the one or two left over we modified the ideal html structure to accommodate the differences as the impact was minimal. But it did highlight that always using a template for your module output would save time and effort in the long run. It may work now, but what you thought should be a quick and easy update in the future may turn into a headache!
The end result was a 50% reduction in load time.
Built with:
- AllOfUs
- Doru Sana [Site link no longer active]