Understanding – Time to First Byte

Introduction

I faced slow website loading in a project and I am sure many of you must have faced the same. Now-a-days, people are worried about responsiveness of web server and speed of their websites. There are many reasons as to why your website might be slow! Typically, the most common reasons are inappropriate hardware configuration, incorrect coding practises, slow internet connection and so on. Apart from these, there is an overlooked but highly important factor that degrades the performance of your site and that is TTFB - Time to First Byte.

What is TTFB?

TTFB – Time To First Byte, is a metric to measure responsiveness of web server and speed of website. In simpler words, it is the time any browser has to wait for the first byte to be received. TTFB is not the only metric to measure the speed of your site. In spite of this it cannot be overlooked.

Organizations make use of TTFB to identify the weak points like speed of their website when they make http request. By identifying the weak points, they know whether it is a server configuration issue or an application issue etc.

Following is the illustration of TTFB seen in Chrome Developer Tools. There are also various other components in the image below starting sequentially is Request Sent, TTFB and Content Download of the website.

The Request sent to the server took 0.16 ms which is acceptable. Then there is a waiting time for the content to be downloaded. This waiting time is TTFB where we receive the first byte of the response. So TTFB is the first thing that we have received before the content is downloaded and TTFB for current site request is 2.85 seconds which is huge. Finally, the content of website like CSS, images and scripts and so on, are downloaded in 8.55 ms which is also acceptable. So we can easily understand from the image below that TTFB is the first byte that we receive even before the content is downloaded.

Tools for Testing TTFB

There are various tools available online to test the performance of your site. Testing the performance of your site is indirectly, nothing but measuring TTFB. Following are the free tools you can use to measure TTFB of your site:-

1. WebPageTest
2. Google Chrome – Developer Tools (this is recommended as it is default integrated with Google Chrome Browser)
3. Pingdom
4. KeyCDN

TTFB Impacted by/Causes of High TTFB

TTFB is impacted by many factors, there are reasons as to why your TTFB is high. Following are some of those reasons:-

1. Server Configuration
The first thing that hits us is inappropriate server configuration. Off course, inappropriate server configuration is one of the major reasons to high TTFB. If your server configuration is inappropriate it will affect the performance of your site. It can make the processing of any request slow which will in turn result in high TTFB and the performance of your site will degrade.

2. High CPU Usage
Even if your server configuration is good your site might perform slow. Reasons to high TTFB are innumerable, one of which is High CPU Usage. If the CPU usage of your server is high it might degrade the performance of your site. Your server will not be able to process your requests quickly.

3. Slow Database Request
Slow Database Request is also one main reason for slow performance of your site. If your database is not structured well(indexes) or your query is not well-formed, then it will for sure add some delay in execution and will result in slower performance of your site.

4. Inefficient code on server
One of the main reason for slow performance of your site is inefficient code. Inefficient code will slow down the execution of your application and also will ultimately increase the CPU usage which will result in slow performance of your site. So, it is recommended that you always use best coding practises for your application.

Effect of TTFB

TTFB strongly affects the search ranking of your site. If TTFB of your site is high then it will affect the ranking of your site by not listing it at the top when searched. So the ranking of your site is directly linked to TTFB of your site. Though TTFB is not the only metric of low ranking of your site, however, it plays a major role in ranking of your site.

Improving TTFB

Improving TTFB can greatly help you increase the performance and speed of your site. Improving TTFB is nothing but reducing the TTFB number i.e. if the TTFB of your site is 4 seconds then you can improve TTFB of your site to 1 second. Following are the ways you can improve TTFB of your site:-

1. Improve your server configuration

Good server configuration can ultimately increase the speed of your site. It will automatically perform faster in serving end user’s request and also can speed your database queries and application processing. You can add a load balancer to improve the performance of your site. Load balancer balances the requests received by end user when actual server is running out of memory. Your load balancer server will just perform like your actual server.

2. Implementing CDN

A CDN is a spread over network which delivers html pages and other web contents from the server to end user based on their geographical locations, the origin of the web page and content delivery server. Implementing a CDN is a really good idea to improvise the performance of your site. Fetching everything from your hosting server over the network can cause latency and will reduce the performance of your site. Thus implementing a CDN will really be helpful if the request is from where the CDN server is present and will not cause any network latency. Ultimately improving the performance of your site.

3. Caching 

Caching is a process of temporarily storing the data you request in cache. For example, the files you automatically request by looking at a Web page are stored on your hard disk in a cache subdirectory under the directory for your browser. When you return to a page you've recently looked at, the browser can get those files from the cache rather than the original server, saving you time and saving the network the burden of additional traffic. Caching is a good technique to increase the performance of your site. It is mainly used for static content of your site. It will also reduce the network latency of your requests, thus increasing the speed and performance of the website.

Conclusion

TTFB is an important metric in measuring the performance of your site. Above mentioned measures to improve TTFB are fairly simple to implement. A TTFB time of 500 ms or less is recommended.

Written by Rohit Sevaramani, Tech Lead (MCP) at Eternus Solutions

Read More »

Fast Track SharePoint Add-ins development using Angular2

Integrating technologies is a nightmare for software engineers! Building a SharePoint add-in using only JavaScript/jQuery involves a lot of complexities, especially the effort required in keeping the code clean and maintainable. However, the premise of integrating AngularJS and SharePoint is quite promising and that’s our Everest to peak today!

AngularJS has helped us overcome the issues pertaining to clean code and its maintainability for quite some time now. We also used it to integrate with our SharePoint Add-ins and it worked like a charm, helping us reduce a lot of development efforts. One of the best things that it provided was the ability to write modular code.

I heard about the new version Angular2 which is due to be released and was quite inquisitive about what was new in it and how I could use it to build better SharePoint applications. I started off by creating a sample application. While developing it, I thought of integrating it with a SharePoint hosted Add-in. This is where all my problems began! An app which runs with "npm start" command won't run with SharePoint.While struggling to make this work, I discovered this solution.

Step 1:

The first step is to create a new SharePoint hosted add-in in Visual Studio and then remove jQuery using NuGget package manager.

Remove jQuery using NuGet package manager

Step 2:

Create a new NPM configuration file “package.json” with dependencies as

npm dependencies

And devDependencies as

npm dependencies

Package.json will be used to download and install the required packages to run our Angular2 App. Packages under dependencies are considered crucial for the application to run and packages under devDependencies are considered vital for development which can be excluded while installing on production environment.

Now create a new TypeScript JSON Configuration file “tsconfig.json” and TypeScript Definition file “typings.json”.

tsconfig.json

typings.json

Now you can delete the folders that we won’t be using like Scripts, Images, and Content. Move default.aspx in the root directory and delete Pages folder as well. Create a new module and name it “app”. So our folder structure would look as shown below:

Folder Structure

Now install all node modules using command “npm install”

Step 3:

We now need to create a component in “app” module with name “app.component.ts”.

app.component.ts

Create a new file “app/main.ts”.

main.ts

Step 4:

Now we will configure our app for Webpack. Webpack is a very powerful bundler. Basically  it bundles the JavaScript files together and serves it to the client as a single response. Webpack will search for all the “import” statements in our application and then it creates the bundles along with its dependencies.

To use Webpack we will create a file “Webpack.config.js” and configure it to create bundles app.bundle.js and vendor.bundle.js in "dist/" folder.

webpack.config.js

Add a typescript file in app module with name “vendor.ts”

vendor.ts

Step 5:

Now before running the application, run the following command to generate the required JavaScript files.

webpack -config webpack.config.js -progress –colors

and then include the folder “dist” in your project. To do this, click on Show all files and then include the folder “dist”.

Now your solution will look like this:

Final Folder Structure

Now add references in default.aspx.

Default.aspx

Step 6:

Now we can run the SharePoint Add-in

Wasn't that easy? We can  use Angular2 to develop a SharePoint hosted add-ins with reusable and loosely coupled components. 

Reference

You can read more about Webpack with angular2 in angular2's developer guide (https://angular.io/docs/ts/latest/guide/webpack.html) or Webpack's official site (https://webpack.github.io/).





Written by Manish Patil, Angular JS Expert at Eternus Solutions

Read More »

Angular 2.0: A revolutionary angle!

Hello there! We are right nigh to the final release of Angular 2.0, which means it's time to decipher what this excitement means to the developers’ community and understand the business impact of this new framework backed by none other than Google Inc.

Angular 2.0: A brief history

At the ng-Europe conference on 22nd September 2014, the Angular Team announced its next major release, a.k.a Angular 2.0, disclosing that there would be a drastic change in the codebase and semantics. To everyone’s surprise, they also announced that Directives, Controllers, $scope and jqLite will be dropped off, clearly indicating towards breaking all the compatibility with existing codebase.

Understandably, this created a huge uproar amongst the developers, with the absence of migration path from 1.x to 2.0 versions causing a lot of confusion.

With the growing popularity of other frameworks like ReactJS and Ember in late 2014, the Angular Team decided to restructure their core architecture in order to meet the market requirements and build the best ever JavaScript Framework while ignoring the animosity from the community.

On 30th April 2015, when AngularJS was moved from Alpha to developers’ preview, it caused a big hullabaloo in the market to see this new code structure. As promised, many features were drastically changed and the compatibility with previous versions was totally ruled out. This resulted in some amount of disappointment. However, most of them were excited to ride a new wave in the field of front end technology which was about to begin. In December 2015 Angular 2.0 was moved to the Beta phase, pushing it closer to its final release. Once again AngularJS became the talk of the town for front-end developers!

Why we should not ignore this wave?

• AngularJS is powered by Google Inc.(need I say anything more?) which further increased its community size, making it one of the largest used front-end development framework.
• Increased community results in increased count of plugins and support which will grow this framework further. Very soon, it is expected to become "The Framework" which cannot be ignored while talking about JavaScript based UI development.
• Although google has declared in ngConf 2015 that it will continue its support to 1.x version till the community continues to use this, in order to push its new baby in market, Google might take a decision of invoking the support after a stable release of 2.0. This might mean that no new features are released in the existing code base.

What benefits can Angular 2.0 provide to my Application?

• With restructuring of $watch, overall performance of Angular 2.0 has drastically improved when compared with Angular 1.x. The team which built Angular 1.x is the same team working on Angular 2.0, opening up their weekly status meeting to the community, hence carrying their extremely valuable experience of previous version along with the constructive criticism from community, ensuring this framework becomes far better than the previous version
• Binding technique in Angular 1.x was based on ng-modal. Instant change in Javascript POJO was one of the main features of Angular 1.x to make this framework very popular amongst the developer community. Let's see how it works.
  • Angular creates patch points for all the asynchronous interactions with the form on page load.
  • On these patch points, Angular runs a dirty checking on scope object to see if any of the associated variable is changed. If so, it triggers the corresponding watchers.
  • These watchers in turn synchronize the UI and modal value through multiple dirty-check and run-watcher cycles.
  • Problem with this approach:
    • It is not clear which watcher will be fired in which sequence. Additionally, it is difficult to predict the number of times these watchers will be called.
    • Digest cycle consumes considerably large number of resources so although this technique just about works, there is a great scope of improvement.
    • It is extremely difficult to control the sequence of model update cycles. Registering a dependent listener is very risky.
  • How Angular 2.x solves this problem.
    • Angular 2.x has adopted a zones mechanism which is equivalent to a local-thread model in any of the multi-threaded languages. This increases the data update to be more transparent and also avoids the need for a conventional digest cycle.
    • This blog gives more clarity on how Angular 2.x change detection system improves the performance over conventional digest cycle approach.
• Many new integrated features, including flexible routing in Angular 2.0, have reduced the dependency on third party libraries. It has also dropped off the less used modules, understanding the real need of common UI development. These changes will make this library more lightweight and less error-prone. Below is a code snippet to understand how Angular 2.0 has simplified routing to great extent.
  
  
  
• Development of Angular 2.0 version is focused towards the mobile platforms. The thought behind this focus is that it’s easier to handle the desktop side of things, once the challenges related to mobile (performance, load time, etc.) have been addressed.  The 1.x version was not designed with this approach. Although Ionic framework was helping the usage of angular 1.x on mobile devices, performance wise it was still very slow.
• Angular 2.0 is based on Typescripts which provides compile time error handling. This feature helps developers understand the errors well in advance, reducing the bug fixing cost and make the development process almost twice as faster. Angular team is also planning to release this framework in multiple variants that supports Dart and plain ECMA6 as well.
• Annotation support and improved dependency injection (DI) will reduce number of lines of code to improve maintainability.
• Simplification of language syntax has reduced the learning curve of Angular 2.0 to great extent. However, a considerably good online tutorial can help you easily put this weapon in your quiver. This will help rapidly ramping up the team to get started. Given below is a code snippet of Angular 2.0  which appears to be quite simple for any beginner level developer compared to the code snippet in second window.
  
  

  

  Angular 2.0 code snippet

  
  

  

  Angular 1.X code snippet

  
  
• Lazy loading was one of the biggest challenges in Angular 1.x. Yet some third party libraries like ocLazyLoad and requireJS had enabled this feature in angular 1.x. Ideally a framework itself is supposed to provide this lazy loading feature in order to maintain a better hierarchy of modules and corresponding files. Considering this limitation in 1.x, Angular team has addressed this issue in 2.x and have come up with considerably better lazy loading techniques. This blog gives a better idea about how Angular 2.0 has approached to solve this issue using asynchronous routing techniques.

Is there any bitter bite as well?

No technology is perfect enough to meet all the expectations of community. Angular 2.0 is no exception to it. Let's highlight some of the challenges associated with Angular 2.0

• Huge number of applications have been built across the globe based on Angular 1.x framework. As the direct migration path is not given by angular team, migration of these existing projects in Angular 2.0 is going to be a real challenge for the community.
• Although thousands of blogs and tutorials are already online, a real enterprise product experience of this framework is yet to come out.
• Release date of this framework is still not fixed, resulting in an uncertain wait.

The Last Word…

There are still lot of things to be analyzed as Angular 2.0 framework is coming with a lot of promises for the UI developers community. Till the beta release, it has already fulfilled many of them. It is clear that Angular 2.0 is going to revolutionize UI technology to great extent and begin a new era of UI development.

Happy Coding…!!




Written by Mahesh Kedari, AngularJS Expert at Eternus Solutions

Read More »