Behind A Webpage

I remember when the internet was still a baby (yes, I’m that old!) and the first companies started to embrace it. I was on a business trip to the USA and whilst sitting in my hotel room bored and watching TV, a couple of the advertisers had website addresses on them. It was then that I realised the internet was something I would have to pay more attention to as it was going to be big. It was at this stage that I started dabbling with the web, writing my first website in 1997; of course in those days it was all pretty much static pages.

Fast forwarding to 2013…

In the last 15 years, technology has moved on considerably, especially connectivity speed (most people have broadband speeds on their phones now!) and computing power, both server end and browsing technology. Probably the biggest change in the last couple of years is the rise in usage of mobile phones for finding information (not going to call this surfing), and the challenges of responsive designs.
So what’s behind a webpage? Starting with the basics:
  • HTML: Hyper Text Mark Language – The core of the webpage itself, this defines all the content on the page, arranged into sections that can be styled up as required. Depending on the size of the webpage this can be anything from 20 to 20,000 lines of text.
  • CSS: Cascading Style Sheets – These (there can be more than one) define how to style up the HTML, for example: h1 {color:#f00} defines header 1 text as red. Websites will normally have a few hundred styles, and run into several thousand lines of text.
  • JavaScript:  These (again can be more than one) run scripts that enhance your experience with the webpage (on your device), be it animating featured areas, loading content dynamically, validating input, and much more.
  • Images: The photo and graphical elements that make the page look good, normally quite a few of these. 
When you visit a webpage the above files are downloaded by your browser, which are then used to build and render the page.

 For bigger websites, in most cases, the webpage will run off a CMS (Content Management System), and here at The Purple Agency we mostly use ExpressionEngine, a well-designed CMS that allows website administrators to publish and maintain their website, keeping the content up to date and fresh.
The CMS, in most cases, will use a database like MySQL to store all this information and the website developers will write code to pull up this information and generate the HTML that is then sent for your viewing pleasure.

 That all sounds really easy but the CMS database can be anything from 1 to 1000 different tables that can be related to each other.  Each one of these tables will hold a specific bit of data, for example:
  •  Users
  • Content
  • Categories
  • Comments
  • Form capture data
  • Navigation
This is a very basic list of tables, but the truth is even the users will have multiple tables and not just one.

 So when you request a single webpage the code has to get bits of data from all of these tables, and then process it through a template to produce the HTML you download. To put this into context, from one page on one of our sites the following stats can be gathered:
  •  Memory usage : 16MB
  • Database queries : 81
  • Time : 1.2s
1.2s is a LONG time for a computer, quoting Lieutenant Commander Data from Star Trek the Next Generation, “0.68 seconds, sir. For an android, that is nearly an eternity.”   However, we use a lot of tricks to optimise and improve this like query caching and page caching to improve this (beyond the scope of this entry).

 So our HTML is now ready to send, but what about all the other things? In order to send these files to you the server has to be running something that can accept you requests, understand them and send you the results, for that we use APACHE HTTP server. Let’s have a quick look at the www.sandown.co.uk home page… 82 requests! So I’ve asked for one page and the server has had to send me 82 files so I can see the page. Actually, it’s not as bad as it sounds as when you visit another page on the site, or refresh the home page, your browser will have cached a lot of these files and will not have to request them again.

 I hope you have gleaned a bit more information from this short article and that it helps you to understand just how much goes on in the background to send you a not so simple webpage?

 Matthew Augier
Matthew is the Digital Development Team leader at the Purple Agency... He loves to code and create technical solutions to all problems that are thrown at him with a passion. Matthew has been around computers for far too long and doesn't mind being called a nerd or geek. 
Labels: , , , , , , , , , ,