Building the Homepage

Building websites has now after quite few years become second nature to me, but building a homepage, well that is a bit different.

There are a number of things to bear in mind, for example, traffic, performance and design.

I didn’t need to worry too much about design as that was taken care of by our web designer, agreed on within the team and then signed off by senior management.

Firstly I needed to look at Foundation, the new framework we have adopted for our mobile first responsive design. Matt had done this and built a flat HTML layout using Foundation. You can find out more about Foundation in Matt’s blog post, https://new.devon.gov.uk/reworkdevon/2015/05/19/firm-foundations/.

So what could I do to keep performance high and load time low?

I’d read online that it was a good idea to reduce the amount of HTTP requests, as anything over 50 is too many, unless you have a gallery page with a lot of images. So I started by looking at this. Scalable Vector Graphics (SVGs) looked like a good way to go, firstly because these graphics can be embedded into the page so there are no HTTP requests for images. Secondly they scale for the responsive design and always look crisp and finally I could change the colours of the graphics using CSS, which for this design was a bonus.

So we now have a webpage with fewer HTTP requests, 45 at last count, and it loads quickly too. This though is a dynamic homepage running on WordPress so i needed to find ways of speeding up the server side processing of the site.

There are a variety of functions on the homepage including links, categories, a slideshow and news being pulled from our News centre website.

I have used three custom post types to build this site. The first and most important is called ‘navigation’. This custom post type holds the links and categories of our homepage, it also populates the A to Z section and the popular tasks. Running all of this from one post type meant adding, editing and deleting links was easily done and they would be updated or removed on every page on the homepage site.

The other two custom post types are for the homepage styles and the slideshow.

The homepage colours and background image are also dynamic, so I built a ‘home styles’ custom post type to allow for these to be changed. For example:

style-change-example

The final custom post type is for the slideshow, this is a dynamically styled slideshow, so we can build the text and graphics together for accessibility.

example-slidshow

The other two parts of the homepage are the news and ‘emergency message’ section. These are feeds that come from our News centre website. We are running this all on a WordPress multisite installation, the News centre is part of this multisite, so we can easily request the posts by using the ‘switch_to_blog’ WordPress function.

Right, let’s look at how fast the page loads. Pingdom gave it around 10 seconds, the requests were low and the overall download site was under 1MB. So what was slowing it down? It looked like it was the server side processing that WordPress had to do before it sent the page to be displayed.

I looked at the amount of database queries that were required to display the page and it was high. In fact, I’d say it was really high! It was around 500 requests.

WordPress has a function called Transients that can help with this. I find this function very easy to use and it really helps with performance. It allows chunks of code to be stored in the database, so it only needs one database query to display a quite complicated section of the website.

So I broke the custom post types down into some global arrays that are requested from the transient before the page loads. I have done this with the navigation, homepage style, slideshow, news and emergency banner. This reduced the 500+ database queries down to 96 (currently).

I ran the Pingdom test again and the page load time was around 2 seconds. This is on our beta server at the moment. Our production server uses the W3 total cache plugin with Memcached opcache. This plugin is great because it sets up compression on the page and sets the cache headers for the content too. So I am expecting the load time to be lower giving higher performance for all our visitors.

Now the homepage is up and running and working nicely, a few changes to CSS and Foundation conditions and we have a site looking nice on all modern browsers and devices. The final step is to make sure this new homepage will work in older browsers, you know what I mean, Internet Explorer 8 and below. Foundation 5 is not supported on IE8 at all. There are some polyfil javascript code and CSS hacks out there on the internet to help get around this, the overall experience is not great but we believe it is acceptable for those still using really old browsers.

You can see the current beta homepage at: https://beta.devon.gov.uk/dcc/

Tim Barrett

I am a frontend developer for Devon County Council. I work mainly on WordPress and PHP.

More Posts

Follow Me:
Google Plus

Be the first to Comment

Your email address will not be published. Required fields are marked *

 

Comments are held for moderation. House rules