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 :)

Back end Performance - An overview of major software aspects

I decided to start with back end performance, because I believe it's the most technical side of software development, and it's a topic that every software developer must know about. I will start with some definitions, that I'm going to use in the post to make it easy to understand, keep in mind that we're in the context of computer sciences and systems, you will need to have some background in algorithms, and data structures:

• System Performance. In a few words, how effective your system is in the desired scenario. There are two scenarios, one is how much time does your system requires to execute a task, the other one is how much memory are we using for executing a process.
• Computer speed. How many operations a computer can execute in a unit of time. Usually this depends on the task, and the type of operation. For the examples, we will suppose that a computer can execute N number of operations in a minute. 
• Data structure. Is a particular way of organizing data (information).  
• Algorithm. It's a finite, optimal, complete, accurate, precise, step by step definition for solving a problem. Some people doesn't include finite or efficient as part of the definition, but I want to include them because if it's not, then it's not useful, an algorithm is expected to be fast and intelligent.
• Complexity. How efficient an algorithm is in a field. In the case of speed, it's measured in the number of atomic operations required for the algorithm to return the data we will call this speed complexity. The memory is measured in the amount of memory used for the algorithm to return the data we will use memory complexity when referring to this field. Both complexities are set against the size of the entry. For example, if the parameter for the algorithm is an array of size N,  then, the speed complexity is how many operations do we have to do against that array  to obtain the desired result (N, log(N), etc). For the memory is the same history, how much memory do we need to execute the algorithm apart from the array passed as parameter. Because memory is growing faster than processor speed, we prefer to use more memory and less processor when we can.
• NP (complexity class). It's a class of problems that cannot be solved in polynomial time.
• Heuristic: It's a step by step definition for solving a problem, the difference with algorithms is that it doesn't have one or more of the characteristics of the algorithms: finite, optimal, complete, accurate or precision. It's an approximate solution that speeds the process. For example, organizing a list of tasks in a way that they will be solved as fast as possible, these problem falls in the NP complexity class, and is faster to use an heuristic to solve it.

This aspect is very important, because even with all the improvements to the memory and processor speed, having an effective algorithm for solving a problem is the only way to keep things fast. Have you ever notice how much does the processor speed increases every year? Whatever the answer is, the truth is that you'll see that if the old speed was X, the new speed is expressed as NX, i.e. the speed was increased by a linear factor. What will happen if we use algorithms that have a speed complexity beyond that linear factor? We'll answer that in this example:

Example: Comparing binary search against linear search

Execution information:

• We will suppose that we've two computer:
• Computer A. Speed: 100 operations per second. It will use linear search.
• Computer B. Speed: 1000 operations per second. It will use binary search.
• We will execute 100 search operations.
• The data structure is going to be an array containing 20,000 elements sorted alphabetically. 
• We will suppose that for each binary search we will need 9 operations and for linear search we will need 10,000 operations. I'm suggesting this, in order to have a way to compare the execution times of the algorithms. Worst case for binary search with that size is  15  and for linear search is 20,000.

Execution time in seconds for each computer:

• Computer A: We will search for 1000 elements, and for each one, we're supposing that the binary search algorithm will require 9 operations, so the total number of operations is (1000 * 9 = 9000. We will require 9000 operations to complete or test, and this computer can execute a total number of 100 operations per second, so it will take 9000 / 100 = 90 seconds to complete the task. 
• Computer B: Using what we already explained for computer A, the execution time in seconds is: (1000 * 10000) / 1000 = 10000.

Are you surprised? Computer B can execute 10 times more operations per second in comparison with Computer A. But as you can see, if we use a slow algorithm, the execution times are really high for Computer B! this is the reason to optimize algorithms and keep things fast. 

Can you think about another reasons to keep things fast? check this list:

• Hosting prices. If you have a web system that is using bad algorithms, then it's very likely that you'll need to have more a better processor and more memory to cover the demand of your web system. This is traduced in more money each pay period!
• Compatible devices. If your app needs more processing speed, then your app is not going to be compatible with all devices, this means that your market is going to be reduced and some people will use other app that can be executed by low-end devices. And also, remember that memory in small devices is a constraint. If your app needs a lot of memory, only top end devices are likely to run your app.
• Better graphics. The faster your algorithm is, the more beautiful the graphics are going to be, because you'll use more processor and memory for displaying them.
• Battery life in mobile devices. Slow algorithms use more processor, and the processor is one of the thing that uses more battery! so try to keep things fast when developing a mobile app!

Something to keep in mind is that this is just the tip of the iceberg. In order to have great performance, the context of your application is also very important, for example:

• If your have a process that takes much time to return a set of data, but you know that it only changes every day, you can have a cache of data and query it when a search is taking place. 
• If it's more important to bring data faster than accurately, you can use a flag to set the required quality of the data returned or you can retrieve some data while you process the best result and then return it. 
• If your algorithm can be a multi-theaded algorithm, then do it, most devices nowadays have more than one core processor.
• Do you need the user to wait until the process is finished? for example, let's say that your app is sending a request that needs to be verified in some other systems, that could take up to 5 minutes to complete. In this cases, is better to send the required data, and let the process work, and tell the user something like: "your request is in process" and close that dialog and let the user work with the app. When the process is finished, then you've to send a message with the results.
• Always keep an eye on the end user's opinion, requirements, and needs. It's worth nothing a system that does some features faster than another if the user is using more the slow features.

Ok, that's it! those are the reasons to always keep an eye on the performance of your system. This is the first entry of the series, I hope you enjoy it. If you want me to write about some particular subject or topic, please let me know! I'll be happy to do that.

Btw, this is the index blog post, here you can see all the posts of the series and some background on what to expect:

http://codeauthorityandmanagement.blogspot.mx/2014/09/index-overview-of-major-software-aspects.html

Introduction - An overview of major software aspects

It's time to start a series of posts related to major software aspects. Every topic is too big for itself to be covered completely with just one post, so the purpose of these series is:

• Have an overview of every aspect in a language that everyone with some knowledge about software development can understand and find it useful. 
• Understand why software development is so important nowadays and also why it's so complex

These is the index of the topics that I will cover:

1. Performance - back end and
2. Performance - front end
3. Clean code
4. Software architecture
5. Soft skills
6. Administrative aspects

Keep in mind that the affirmations in the post are valid for web applications and mobile apps. This is because most systems nowadays fall in one of this categories.

I you want me to talk about a particular subject, just let me know in the comments. Enjoy the series!