So after my post yesterday on the trials and tribulations of my moodle upgrade, it led onto a rant about the performance of my site. After reflecting on the issues, I decided to spend a few hours researching web optimisation and logged a support ticket with my host.
This post contains information on my history and experience of web development and a summary of my experience of web optimisation.
So one of my initial gripes was to do with database errors – since upgrading my moodle site and updating php to version 7.0, I’ve been receiving a few database connection errors, which seem to occur when I am making changes to the database. However, I couldn’t believe that one person making changes to a small database could cause so many performance issues!
My webhost tshohost have been fantastic, I asked them if there was any diagnostic tools they could run on their side or any improvements they could make on their side and they came back with a whole list of things they’ve changed to try to improve performance! This great, because a little bit of me was wondering if they would blame me for the issues – after all, I am the one changing the database and upgrading everything. So pleased with the response, always great customer service.
My Background
I created my first website when I was 12, it was in Front Page express and consisted of a grey background with several headings. Most of the content was based on the game Final Fantasy 8 and the site contained a link to a PowerPoint presentation. When the PowerPoint opened an interactive Final Fantasy slideshow would begin, with music and animated character heads floating around the screen – yes it was bazaar, but damn was I proud of it! It’s a shame I don’t have a copy of it today (or is it?) Sometimes I think back to those days and think that’s probably where my career started, only now instead of Front Page I am coding the websites and instead of PowerPoint I am using Articulate Storyline.
Anyway…my Front Page website never actually made it online, I was 12 and had no knowledge of web hosting and just couldn’t figure out how to get it on the World Wide Web. Oh well, I could still enjoy it locally. When I was 14 I created yet another website, this time it was created in HTML with inline CSS…using…NOTEPAD! WOW had I levelled up! The content was based on a game I had created in a program called RPG Maker (which used to be a software application, it’s now actually been turned into a game…so it’s now a game inside a game). You could export the RPG game files and host it online, other people could then download and play your game on an emulator – I probably spent 3 years of my life making games using that application…again it’s a shame I don’t still have it all today.
The flames looked a bit like this…funky!
This time this website did make it online – by that time i’d worked out to get stuff onto the web! The site was hosted by Geocities which was a free web hosting service with ads (not sure if this still exists…will look later). On a 56k dial-up modem my website , with ads, took FOREVER to load, but HEY it was ONLINE! I still remember the background image today – it was a picture taken from the Microsoft Word clip art library and consisted of a black background with orange flames, I’m not sure how big the image must have been, but setting that as the background image for my entire site is so laughable when I look back at it today (and as a 14 year old the concept of copyright was also something I was incredibly ignorant of).
After that, for a while, I didn’t really create anything new. I started developing games in VB and C++ instead, nothing of which came to fruition. When I started working and became an apprentice I decided to move away from development – mostly because my dreams were squashed by an ex headmaster who said you had to be good at maths and be incredibly logical to be a developer – attributes at the time I thought I didn’t have. It wasn’t until I started a job in my early 20’s as IT Technician and Web Developer that I began developing websites again. Back then web 2.0 still hadn’t really taken off and organisations just wanted websites to show online presence – it didn’t need to be fancy, it just needed to work and be informative.
The website I created was for a school and I created it in HTML, CSS (code behind this time) and designed it in Adobe Dreamweaver. I also took a short course on using Adobe Flash and was able to make a really snazzy logo which would fade-in/fade-out different images of the school, at the time it was really cool looking and the school board were VERY impressed. It wouldn’t have survived the test of time…
I feel as though this sums up the last few projects I’ve created where I’ve had to create websites using client side and server side languages.
Since then I’ve not had much exposure to web development in the corporate world and it was only when I started my undergraduate degree did I get back into development. This was when I realised that the World of Web had changed! Webpages were no longer just HTML and CSS, but consisted of all types of programming languages. New frameworks such as Bootstrap were now talk of the town! My university project required me to create a website using ASP.NET in Visual Studio – a very different approach to what I had used in the past, but I managed to execute it somewhat and get good marks. Overall though, the backend of the project was a bit of a mess and looking at it now, it would need some work to bring it up to scratch.
Frontend vs. Backend
It was during my uni project when the terms frontend, backend and full stack web development started to appear. For those of you reading this who aren’t sure on the differences, the front end is the pretty stuff that the user interacts with on the page – the design, the forms, the colours, and these components are written in HTML and CSS (markup languages) javascript and jquery. These languages are controlled by your browser and don’t require additional requests to display the content.
The backend is like a set of cogs, the stuff that happens behind the scenes, and written in a server-side programming language such as ASP.NET, PHP, etc. Server side programming languages require more than just a browser to work – they usually require a server (thus the name server-side programming) and a database. A full stack developer is someone who can develop both frontend and backend – even though most developers usually know some of each language, they tend to pick one language and specialise. Frontend developers also tend to need to have additional skills in graphic design and photoshop.
Web Development Today
It may seem as though web development has become more complex over the years, however it’s actually easier than ever to put something together. If you’re a total newbie there are plenty of WYSIWYG websites such as squarespace and Wix which provide you with the tools needed to get you up and running – you can put together a fairly decent, basic website is less than half an hour. If you’re like me however, and like to know all the inner workings behind your page, you may struggle with these approaches as the temptation to tinker with the code is just too strong!
Web Optimisation
And finally, after a massive digression, we come to the topic I wanted to initially talk about. If web optimisation is a new topic for you, as it was for me, then the following websites will help you out:
This was where my first couple of google searches led me, it’s a page that you can use to check how efficient your webpage is. It’ll then give you a score and make suggestions on how to make your page faster! My PageSpeed Insight score then led me down the path of GZIP compression testing:
WordPress Tutorials – WPLearningLab
I watched a few videos on this and attempted to implement this myself, however my host actually did this for me. I also downloaded a plugin for my wordpress blog called WP Fastest Cache.
Summary
I’m not going to lie, I still don’t know the FULL in’s and out’s of web optimisation, but after reading and implementing some of the suggestions and speaking with my host, my wordpress blog has become a lot faster. It appears that using minified script files can make your website a lot more efficient. I still don’t know if my moodle site is any quicker, but I’ll be doing some testing on it over the next few days.
Overall my Google PageSpeed Insight score went from 22, to 99 on the desktop site, and from 9 to 64 as a mobile site and after implementing GZIP compression, my site is apparently 80% more efficient! And I have noticed a dramatic improvement. I suppose it goes to show that you don’t need to know a lot about web optimisation as the tools and tutorials available have been developed to such a good standard. However word of warning…always back up your website before you start making any changes, just in case!