Monday, June 27, 2016

2016 Web Performance Optimization Tips And Best Practices


You must admit, we all love fast web apps, not less than users of our products do. The focus on web performance became a mainstream with permanent increase of average page size and Mobile Internet usage. The average page weight 2.2MB can be fast loaded to broadband connected user, but for mobile devices using 3G network it can take a while. Your users will never complain about heavy loaded pages and will not wait, they just abandon them.

As Web Developers we need to make sure our web app is working as fast as it possible. If you take modern web site, you will find many fonts, plugins and external scripts integrated. More features we add to our product more bits we need to send to user's browser, which makes the process of optimization kind of permanent. I don't know how about you, but for me it is interesting task.


Back-End optimization

The Rule of thumb is "The optimization starts from measurement". To find out your bottle necks you must measure execution time of your system methods. Problematic places to look for are: SQL queries, external API call and complex requests. There are plenty of profiling and monitoring tools, which allows you to measure every corner of your project. You don't have to measure everything, but after all, only you know what exactly to measure :)

"It is working fast on my computer", I can imagine, this sentence is familiar for you. That's exactly the reason why its so important to profile and monitor production system as well. More data, cloud environment and virtualization can affect your project performance.

Good idea would be simulate load on your system to see its behavior with concurrent requests.

Back-End optimization might include:
  • Caching   
  • Measuring execution time and method optimization 
  • Fast Host

Caching

It does not matter what technology stack you are using in project, there is a lot of data that must be cached. There are many techniques and approaches for caching, however the decision what to cache and for how long its completely individual. I do believe at least 90% of project's data can be cached. Just imagine how you can improve performance by caching for few seconds high loaded server response. 

On large scale systems the best practice would be to implement distributed cache. However not all data should be shared between instances, there could be latency while connecting cache server especially in peak hours.     

Measuring execution time and method optimization

If you are strict to S.O.L.I.D principles at your work, it would be easy to measure and optimize problematic code. That is one reason to follow these principles, by the way. Otherwise, you have a long way ahead of splitting responsibilities and simplifying your methods. Producing simple, maintainable and testable code from very beginning, will make your life happier in future.

Complex database queries and wrong data structure usage can slow down the system. Measure heavy methods execution time. It is very important to measure on production and in peek period. That can give you a clear picture about your system behavior under real load. 

Fast Host

Budget constrains and as the result provider quality can become a problem for your project. Here are some tips for choosing:

  • Don't trust advertisement, measure.
  • Pick a host according to location of site's target audience.
  • Benchmark it on peek hours.
  • Read user's review before.
  • Ask about customer support.
I emphasized the last because of in case of outage you might have noone to talk with, which is depressing.  


Web optimization

Finding out font-end related performance problems is easy, you can use Google's PageSpeed Insights or other similar tool. For better understanding the performance on mobile devices you can simulate mobile networks speed.

Here are some highlights for optimization:   
  • Use CDN
  • Minimizing
  • Implement compression
  • Optimizing images
  • Css delivery
  • HTTP caching:
  • Mobile version of website


Use CDN

The CDN is not new, however not all web sites are using it. The major reason for usage of CDN for static content images, css, javascript file and so forth, is reducing latency. The principle of picking content from closest to your location server, can be very helpful especially for international websites.
If you still not using it, it's high time to start.


Minimizing

Removing white spaces and comments from your files can save you 20-30%. Avoid loading not required (not shown) html objects like dialog, modals, images and etc, bring it on demand with ajax call or "lazy load" technique..

For mobile users recommended to have dedicated mobile web site, squeezed version of main web site.

Bundler & Minifier extension for Visual Studio

YUI Compressor command line minifying tool


Implementing compression

Well, that's pretty obvious. The less size of file faster it being transferred. Dynamic pages are being dynamically compressed, which comes at the expense of page rendering speed.    


Image optimization

Images are significant part of page size as result you can save a lot bytes transferred by proper optimization. The process of optimizing image delivery might include:
  • Choosing right image format - according to your functional requirements. 
  • Display scale images - image should have a size and delivered according to it. For example: if you have a thumbnail for each image you can prepare a resized copy of it, or you can resize it "on the fly".  
  • Lazy load - with that technique only show to user images will be served. Good solution for pages with a lot of images.
  • Remove image metadata - some images can include geo location and camera info and so forth. You can remove it with proper tool


Css Delivery

Css delivery optimization is similar to "Lazy load" principle, that delivers styles and scripts needed for showing only a visible content. preventing render blocking css. Rest content is downloaded afterwords or downloaded on demand. For more information about it please refer to Google's guidelines.  


Http Caching

This mechanism allows you to control what content and for how long to keep in user's browser cache.
Each time browser about to get file from the server it checks whether it already have up to date copy of it. Less files downloaded is better. Here is Google Developer's guidelines about this topic.


Mobile version of website

Having dedicated mobile version of your web application, of course will be best solution for slow network users, however it will take extra cost to develop and maintain it. Development of mobile version   





Photo taken from www.freegreatpicture.net

No comments:

Post a Comment