Front end Performance - An overview of major software aspects

In this post I'll be writing about Front end performance focusing on web applications, but many things apply to desktop and mobile systems. You'll need some background on web development to understand the story behind the scenes, I also recommend reading the introduction post of the series to know all the topics of this series and the focus I'm having. The purpose of this post is to understand the importance of front end performance and things that you can do to keep it fast.

Let's start with a list of things that matter when developing web applications, then I will give you some tools that will help you in having things in order:

• CDN For static elements. Using a Content Delivery Network for static content like images, javascript, files, etc, helps in maintaining a low bandwidth usage and it's a must when you've a web site with a lot of traffic because this content is usually the bigger part of your web page, and if you have a lot of visits, you'll probably have trouble in serving all the requests from your hosting server. You can analyse this by downloading your web page and see how much space does this type of content represents in comparison with dynamic content.
• Image optimization. If you have a web site that uses a lot of images, let's say that they represent 80% of the weight of your site, and if we take into consideration that not optimized images can weight more than 3x the size of their optimized version, if you have a web site using unoptimized images can result in a web site 240% heavier (80% x 3 = 240%). What this will mean is that your web site is going to be slow, it will take at least... yeah, you got that right, 240% more time in loading than what it should be.
• Data cache. Most web servers nowadays have a cache system for pages. This works by setting up pages and their expire time. This can help in slowing the resources needed to load your web site, this also helps with the page speed.
• Optimizing CSS, Javascript, HTML. This is a big topic, I will dedicate an entry for it, but what I can say now, is that it really matters when you want to have a fast web site and it's also easier for the search engines to index your web page.
• Friendly URLs. This means to have urls that when you read them, you can tell the story in that page. for example, it's much easier to read: www.maps.com/Mexico, than to read: www.maps.com/default.html?Country=Mexico.  And guess what? for search engines it's easier to index, because the first thing they use to categorize the page is the url. This can also help when using google analytics, I will dedicate one post to this, but in summary, with friendly urls you're able to have a better understanding of what pages are being visited, and this can give insight on what you should be working and improving.
• SEO. Another big topic, I will create a separate entry for it. It's important because if you have good meta tags, meta keywords, friendly urls, and the HTML as it should be, then your web site is going to be "friendly" for the search engines and more people will reach it when searching for related topics. There are many, many things related to SEO, for example: is your web site for a particular Country? Are you hiding it for some others? are you using the right domain (.us, .com. org) ?
• User friendly interface. A web site must be easy to use, you should be able to understand the content easily and the navigation needs to be friendly, this will help people and will make them return to your web site.
• Optimized for mobile. If you've a web site targeting mobiles, you'll need to have an optimized version for it. Usually with lightweight content, and the interface with some adaptations to make it easy to navigate.

Now, let's talk about some tools that can help us to keep things in order:

• Google page insights. This tool help you with CSS, Javascript, HTML, user friendly interface, SEO, images. You can access it here for free: https://developers.google.com/speed/pagespeed/insights/
• Irfan view. This is a tool I use for optimizing images, it can take a whole directory of images and optimize them very fast, you can set the optimization parameters, and check if the results are the expected ones. You can go to the download page from here: http://www.irfanview.com/
• SEO insights. You can review the things needed to have a better SEO from here: https://support.google.com/webmasters/answer/35291?hl=en
• CSS minifier. This tool minimize the CSS content, to keep things fast for the browser: http://cssminifier.com/
• Javascript minifier. This tool minimize the Javascript: http://javascript-minifier.com/.

And what could happen if you don't care about this concerns? Our example is going to answer that question:

Example: unoptimized web site and hosting prices

• Let's suppose that we've a web site in which most web pages weight 6mb. 
• The web doesn't require a lot of processor speed, because most content is static.
• Let's imagine that we've been investing a lot in marketing and that our page is reaching 100,000 visits per day.
• How much bandwidth do we need per month? We will need: 30 * 6 * 100,000 = 18,000,000 mb each month.

Now, I will calculate the cost of not having an optimized web site. For keeping things simple, I will use approximate values. The prices are based on a true hosting vendor: each month your hosting plan includes 5 TB of bandwidth, we're using 17.5 TB, that means that we're exceeding our consumption by: 12.5TB. The price for each extra TB is: $42 US, this means that you'll be paying: 12.5 * 42 = 525 extra dollars each month. That's a lot! That could be used for campaigns, or for other stuff. And you'll probably have more visitors if you have an optimized web site, and something I must also say is that optimizing bandwidth usage is not complicated, so there's no real reason for paying that extra dollars.

Ok guys! that's it for now,  hope you're enjoying the series. Let me know if you want me to talk about a topic in the upcoming entries :)