{"id":3369,"date":"2019-04-23T15:58:47","date_gmt":"2019-04-23T14:58:47","guid":{"rendered":"https:\/\/www.usdigital.co.uk\/?p=3369"},"modified":"2019-11-21T12:36:18","modified_gmt":"2019-11-21T12:36:18","slug":"website-speed-optimisation-a-look-closer-to-home","status":"publish","type":"post","link":"https:\/\/www.usdigital.co.uk\/blog\/website-speed-optimisation-a-look-closer-to-home\/","title":{"rendered":"Website Speed Optimisation – A look closer to home"},"content":{"rendered":"

One of the ongoing projects we’ve been tasked with since starting here at Unsworth Sugden<\/a> is to refactor the existing USdigital<\/a> website to make it more maintainable and to optimise both the website speed and the perceived loading time.
\n<\/p>\n

The results speak for themselves<\/h2>\n

Google PageSpeed Insights – Old Website<\/h3>\n

\"Website<\/p>\n

Google PageSpeed Insights – New Website<\/h3>\n

\"Website<\/p>\n

There is still some way to go, and there is always something to be done to improve loading times. Our main objective is complete, in that the website is now more maintainable for our team and the loading speed has improved dramatically. There is a lot more that can be done, and there are always micro-optimisations to be implemented but they are no longer a business critical concern.<\/p>\n

As our SEO team learnt from Brighton SEO 2019<\/a>, users are expecting a faster experience when they are online. An Average Speed Index of 3 seconds with fewer than 50 HTTP requests is best practice. We were miles out.<\/p>\n

\"Old<\/p>\n

The Background<\/h2>\n

Our previous website used WordPress as the CMS. Due to time constraints the Theme used was a purchased theme with lots of customisable options and features. In order to get the website looking and functioning exactly as was needed, lots of Plugins were also used.<\/p>\n

The website looked great and everybody was happy with the general design and functionality of the website.<\/p>\n

The downside of using purchased Themes and Plugins<\/h3>\n

While a lot of themes that are available are great, very well designed and can be really customised without much knowledge of writing HTML, CSS, JavaScript or PHP, one of the huge downsides is that as a web developer you lose the control over what is being loaded, used and is needed.<\/p>\n

As an example, you could install two different Plugins:<\/h4>\n

One plugin, we’ll call this Plugin “EasyButtonIcons<\/em>“, to add buttons easily to your Posts and Pages. Also this plugin even has the awesome feature of making a Font Awesome icon a button.<\/p>\n

The other Plugin, we’ll call this Plugin “EasySocialIcons<\/em>“, to easily add Social icons to your Posts and Pages.<\/p>\n

Great! We’ve now got the ability to easily add buttons with icons to our Posts and Pages and also to include links to our Social Media anywhere on the page.<\/p>\n

Both of these Plugins use Font Awesome<\/a> for their icons.<\/p>\n

The “EasyButtonIcons<\/em>” developer has followed the Font Awesome docs and called the stylesheet from https:\/\/use.fontawesome.com\/releases\/v5.8.1\/css\/all.css<\/code> which includes the stylesheet into the page.<\/p>\n

The “EasySocialIcons<\/em>” developer has decided to use a CDN for Font Awesome\u00a0and called the stylesheet from https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.8.1\/css\/all.css<\/code> which includes the stylesheet into the page.<\/p>\n

See the Pen
\nDuplicate FontAwesome Loading<\/a> by andyUSDigital (@andyusdigital<\/a>)
\non CodePen<\/a>.<\/div>\n