3 Best Practices to Improve Web Page Performance

Performance is a feature that your website cannot miss delivering on. A slow website results in poor user experience, lower page rank, leading to lower conversions and lost revenue.

According to Google, 50% of users expect a page to load in less than 2 seconds and 53% abandon a site if it takes more than 3 seconds to load.

Google TalkWalmart’s data shows that conversion rates dropped significantly as load time increased from 1 to 4 seconds.

Walmart Study

Is my Website Fast Enough?

Determining whether your web page is fast needs to be an objective assessment. The good news is that there are a few free online tools that can do this for you: GTMetrixPingdom Tools, and our own SynTraffic Tool. All of these tools provide a comprehensive and detailed analysis of your web page performance.

TIP: When you input your webpage URL, it is important that you choose a location that is a close proxy for where your users are. That way the results will reflect how your real users are seeing it.

As part of the results the tools provide page load time as one of the metrics and this number determines how fast your web page is. The lower the number the better and anything under 3 seconds is ideal.

How do I make my Web Page Fast?

Now that you have assessed how fast or slow is your website, how do you go about making it faster? The factors affecting your web page load time are numerous – hosting provider, servers, client browser/device/connection speed, page layout, page content (HTML, CSS, JavaScript, Images, Video).

The best part of the tools above is that they also provide a comprehensive set of suggestions to help improve your web page speed. Some of those suggestions can be trivial while others can require significant changes to your page.

Here are the 3 best practices that you can apply quickly as they are mostly configuration and do not require changes to page layout and/or content.

  1. Deliver faster: eCommerce websites like Amazon that are content heavy can load as fast they can because they deliver the page faster to you. Here is how you can do it too:
    1. Fast Hosting Provider: Choose a hosting provider that is known for its network speed. Also choose servers that are performant for your website needs.

      Read recent reviews of hosting providers from HostingFacts to make an informed decision.

    2. Cache: Cache static assets by setting expiry period on them. On repeat visit you don’t have to deliver them. Better yet, host your static assets on a CDN

      If you are just getting started, leverage free CDN offered by Cloudflare before getting a professional/business plan.

  1. Decrease size: We don’t necessarily mean that you should cut down on content, but there are clever ways to decrease your page size while keeping the content intact.
    1. Compress: Compression can reduce your web page size by 90% and can improve response time significantly. 

      Check here to know if your website has GZip enabled. Use this guide to enable compression for various web servers.

    2. Minify: Minification removes characters from your CSS, JS and HTML files that are important for human readability but doesn’t change how your page is rendered. This is a low hanging fruit and it never makes sense not to do this. 

      If you are hosting your website on WordPress, use Better WordPress Minify to perform minification right.

  1. Minimize Requests: A web page is made up of a lot of resources (HTML, CSS, JavaScript, Images, Video) and your client’s browser is pulling them down by making a request for each of that resource. The fewer the requests that the client browser makes the faster the web page will render.
    1. Inline Images: Small images and icons can be delivered as part of the web page by specifying them as a data URI. This technique of inlining renders images without fetching them separately and hence improves the page load time.
    2. Concatenate Resources: Combine and concatenate multiple CSS and JavaScript files on your page. This will allow you to reduce the number of requests to the server which should lead to faster page load time.

A fast loading web page is important for user experience and the results will show in user engagement, conversion rates and your bottom line.

Start with measuring your site speed, apply the practices we have discussed and share how they have helped improve your web page speed.

Posted in Best Practices | Leave a comment

Newsletter December 2016

Happy New Year 2017! Hope you all had a great 2016 and are as excited as us for 2017. Here is what we delivered as part of our December 2016 release:

1. PageSpeed Monitoring:

Our tools release last month was well received and based on the feedback we have introduced PageSpeed Monitoring. If you are a Designer or a Marketer who is making changes to the website but aren’t sure how the website performance will be affected, you can rest assured with PageSpeed Monitoring. Once you have the URL you want to monitor, setting up PageSpeed Monitoring takes less than a minute. Once the monitor is running you get a trending report of Google’s PageSpeed and YSlow scores along with Page load time and Page Size.

You can now see the snapshot in time of your website performance and catch trends of your scores as they improve and fix if they degrade. We also preserve the HAR Report displayed as a waterfall, which can help you analyze page performance issues.

You also get a daily email and web report sharing with you changes in your PageSpeed score, YSlow score, Page Size and Page Load Time.

Try it out and let us know what you think!

PageSpeed Daily Report

PageSpeed Daily Report

2. True Device Emulation:

Our customers had brought to our notice that our website performance emulation platform wasn’t doing a true emulation for Desktop or Mobile. A specific issue was that our emulator wasn’t honoring srcset to deliver images based on the device type. The core issue was that we were using PhantomJS for our emulation and in this case it was broken. We have since changed our engine to Chrome browser, so now the results are from a real browser with true device emulation.

Test it out and share your feedback.

3. YSlow Score:

You can now get YSlow score when you use our free tools service to analyze your website performance. Better yet we also give you recommendations to improve your score which translates to a faster website, happier customers and/or better conversions.

Have feedback?

We have more exciting updates in store in January. If you have a feature request or functionality that you require, do not hesitate to share it with us. Send your questions as well as feedback to support@syntraffic.com.

Posted in Monitoring, Newsletter, Tools | Leave a comment

Newsletter November 2016

Hope you all had a great Thanksgiving. We are excited to share our latest tools and features as part of our November release.

1. Website Speed and Performance Optimization:

We are excited with our new tools release that can help you measure your website speed and offer you performance optimization tips. Provide your website URL, location where you want to run the test from and type of client (Desktop/Mobile) and let our analysis engine crank.

Our results page show you Page load time, Page size, PageSpeed score and lot of other metrics that can help you understand website speed as experienced by your customers. We also offer optimization techniques to help you improve the experience for your users. The best part is this is free with no login required. Try it out here and share it away.

Page Performance Analysis Syntraffic

2. Custom Reporting:

All our paying customers can now get custom reporting for the last week, last month, last year. The report links are available from your dashboard as well as your reports page. One of our paying customers was using this view to understand the performance impact of – new ad provider, video and other changes. From this new reports page he could clearly see how his users were being affected which helped him fine tune the changes and deliver a better experience to his users.

3. Monitor Groups:

With microservices architecture and more cloud services being deployed everyday, the new reality is that we always have lots of monitors to configure and management of them can become a real pain. Also not all monitors are created equal when it comes to alert and notification settings. With our latest release, we have made management of your new monitors as simple as drag and drop and sometimes just a click. Here are a few highlights of this feature:

  • You can configure monitor groups to have their own alert settings (higher threshold for your offline services perhaps) and notification settings (no notifications for my test services). The settings are inherited by all the monitors in that monitor group.
  • You can manage your monitor settings by dragging and dropping the monitors into their respective monitor groups where all settings are inherited.
  • You can drag and drop your monitors in a specific order which is preserved between logins.
  • You can move your monitor groups by clicking arrows and now your monitoring dashboard has a consistent view between logins.
  • The alert and notification settings are still in the same Alerts menu but organized differently. You can now give friendly names to your alert settings (eg: ‘High Threshold for 4xx’) and notification settings (eg: ‘Alert Devs Only’). This makes for easy identification when you are creating new monitor groups.
  • You can now specify additional email addresses as part of your notification groups.

Sanity restored!

Have feedback?

We have more exciting updates in store in December. If you have a feature request or functionality that you require, do not hesitate to share it with us. Send your questions as well as feedback to support@syntraffic.com.

Posted in Monitoring, Newsletter, SynTraffic, Tools | Leave a comment

Newsletter October 2016

Happy Diwali and Happy Halloween to you all. Here are our latest features and updates from October.

1. Global Status Page:

We have a new class of status page – Global status page, that rolls data from all your public monitors into a single status page. Global status page also provides you the last hour data which includes availability, response time and any downtime incidents. You can publish upcoming maintenance windows and announcements from your status page settings page.

Global Status Page

Downtimes can happen to the best of the websites. Issues on your website could be due to engineering issues or things outside of your control like the recent DDoS attack on DynDNS. This targeting of DynDNS infrastructure not only melted down parts of the internet, but it also took down monitoring and alerting services like pingdom and pagerduty.

While we never want any of our customers to have any downtime, it is the nature of the internet and software in general that things will go wrong at the most unexpected times. The key to not only survive but maintain your customer trust during those difficult times is to be open and transparent about it. Your public status page is the trusted communication channel through which you can share information about an going incident – triggered either by an internal or external event.

It is also important that your status page isn’t part of your infrastructure so that your customers can still reach it when your infrastructure goes down. This was exemplified during the Oct 21st issues at DynDNS, Pingdom and PagerDuty where the status pages were accessible while their infrastructure was having issues. If you have’t already, configure your status page here.

2. Monitor AMP sites:

SynTraffic can now monitor your website as a mobile client. This can help you monitor the performance improvements of your Accelerated Mobile Pages (AMP) site. We will be adding more exciting features in this area, so if your customer uses a mobile client, talk to us and see how we can help you.

3. Manage Subscription Plans:

You can view, subscribe and manage your payment plans from your account page here. For your payments we accept all major credit cards as well as paypal.

Have feedback?

We have more exciting updates in store in November. If you have a feature request or functionality that you require, do not hesitate to share it with us. Send your questions as well as feedback to support@syntraffic.com.

Posted in Monitoring, Newsletter, SynTraffic | Leave a comment

How to Mock Entity Framework?

In our previous blog posts, we introduced mocking, and how to mock ASP.NET Identity?

In today’s post we will walk through the steps to mock Entity Framework (EF). Entity Framework is a object-relational mapping framework for ADO.NET. It allows you to work with data as domain-specific objects without having to know the underlying database schema.

Prerequisites

In this blog post, we will use a standard ASP.NET MVC project that uses Entity Framework (EF) to work with a database and OWIN Framework for Identity and Authentication. The web application along with the unit tests are available at our public git repo: https://github.com/syntraffic/share.

For Mocking we will use the popular framework Moq, available as a NuGet package.

How to Mock Asp Entity Framework?

We will use a simple ToDo application to showcase our mocking example. The application allows users to register, login, add/edit their ToDo tasks. The user profile data as well as their ToDo tasks are stored in a database. The application uses EF to interact with the database.

Keeping with our purpose to make our unit tests repeatable, we want to localize our tests and removing any external dependencies. In our scenario, the external dependency is the database abstracted by the EF. So here we would mock EF so that we can interject the calls to the database and there by making all the tests stay local within the process boundaries.

Before we go further there are a couple of core classes of EF that you might want to get familiar with:

  • DbContext is the entry class of EF that is responsible for interacting with data as objects. Think of this as the subset of the database schema (collection of tables, views, stored procedures) that your application interacts with.
  • DbSet is the entity set (table/view/stored procedure) that is used to perform create/read/update/delete (CRUD) operations.

These classes are auto-generated when you import schema objects from your database. This will typically look like:

    public class MyDbContext : DbContext
    {
        public DbSet<MyTable> MyTable { get; set; }
        public DbSet<MyView> MyView { get; set;
        public DbSet<MyStoredProc> MyStoredProc { get; set; } 
    }

 

To successfully mock EF, we will have to mock DbContext as well as DbSet.

First lets create a mocked DbContext:

    	var m_Context = new Mock<MyDbContext>();

Now we will setup the DbContext to return the mocked DbSet object when its DbSet property is accessed.

To get to that we will first create a list with dummy ToDo objects:

    var todoList = new List<ToDo>();
    var queryable = todoList.AsQueryable();

Now we will set up mocked DbSet to return the above list as IQueryable. This will allow us to run queries against the DbSet.

    var dbSet = new Mock<DbSet<T>>();

    dbSet.As<IQueryable<T>>().Setup(m => m.Provider).Returns(queryable.Provider);
    dbSet.As<IQueryable<T>>().Setup(m => m.Expression).Returns(queryable.Expression);
    dbSet.As<IQueryable<T>>().Setup(m => m.ElementType).Returns(queryable.ElementType);
    dbSet.As<IQueryable<T>>().Setup(m => m.GetEnumerator()).Returns(() => queryable.GetEnumerator());
    dbSet.Setup(d => d.Add(It.IsAny<T>())).Callback<T>((s) => sourceList.Add(s));
    dbSet.Setup(d => d.Remove(It.IsAny<T>())).Callback<T>(s => sourceList.Remove(s));
    dbSet.Setup(d => d.FindAsync(It.IsAny<object[]>())).Returns<object[]>(ids => Task.FromResult(todoList.Find(t => t.Id == (int)ids[0])));

Now set up the mocked DbContext to return the mocked DbSet.

     m_Context.Setup(c => c.ToDoes).Returns(mockedToDbSet.Object);

With that we have now successfully mocked the EF. Now when you access “ToDoes” properties of mocked DbContext it returns our dummy ToDo’s list. You can now continue adding more mocked DbSet objects as required by your unit test scenarios.

Putting it all together, invoke the controller with mocked DbContext as well as your mocked application user manager that we built in our previous post:

    var todoController = new ToDoController(m_Context, m_userManager);

There you have it. All your unit tests would now be running without any external dependencies.

Let us know if you any questions or suggestions for future topics by commenting below.

Posted in Best Practices, Quality, Unit Testing | Leave a comment

How to mock ASP.NET Identity?

In our previous blog post, Software Development: Mocks, we introduced Mocking and talked about what is mocking and why mock? In today’s post we will talk in detail about how to mock?

How to Mock?

Depending on the language of your choice, there are a wide variety of frameworks to help you Mock. In this blog post, we will use a standard ASP.NET MVC project that uses Entity Framework (EF) to connect to a database and OWIN Framework for Identity and Authentication. The web application along with the unit tests are available at our public git repo: https://github.com/syntraffic/share.

For Mocking we use the popular framework Moq, available as a NuGet package.

How to Mock Asp Net Identity?
ASP.NET Identity is a NuGet package that provides a rich framework to manage user profiles for your web application.

We will use a simple ToDo application to showcase our mocking example. The application allows users to register, login, add/edit their ToDo tasks. The web application uses ASP.NET Identity framework for registration and login functionality. A registered user needs to login before they can perform the add /edit actions. As would be the case, all actions would try to identify the logged in user before proceeding with the action. When you use the Identity framework, this typically looks like:

   var currentUser = UserManager.FindById(User.Identity.GetUserId());

Now to successfully test any of the actions, you will need to mock two objects from the Identity framework – User.Identity, UserManager.

Mocking the User Identity object requires that we add a mocked user with appropriate security Claims to the Controller Context of the controller that we are calling. In our example we have an action in “ToDoController” which returns all tasks of a user:

public ActionResult Index()
{
   var currentUser = manager.FindById(User.Identity.GetUserId());
   return View(db.ToDoes.ToList().Where(todo => todo.User.Id == currentUser.Id));
}

In this case, we return a mocked UserId when the code invokes User.Identity.GetUserId(). We can do this by adding a security principal to the current HttpRequest. This will be part of your mocked controller context.

   var m_HttpContext = new Mock<System.Web.HttpContextBase>();
   List claims = new List{
      new Claim("http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name", username),
      new Claim("http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier", userId)
    };

   var genericIdentity = new GenericIdentity("");
   genericIdentity.AddClaims(claims);
   var genericPrincipal = new GenericPrincipal(genericIdentity, new string[] { });

Next setup mocked HttpContext’s User property to return the generic principal from above. Now create a mocked controller context and setup mocked controller context’s “HttpContext” property to return mocked http context.

   m_HttpContext.SetupGet(x => x.User).Returns(genericPrincipal);
   m_controllerContext = new Mock();
   m_controllerContext.Setup(t => t.HttpContext).Returns(m_HttpContext.Object);

Yay, we have successfully mocked the user identity.

mock asp.net identify

Next we mock the application user manager. We can do this by creating a mocked user store and then create a mocked application user manager object. We will then set up a mocked application user manager to return the mocked user when “FindByAsync” method is called.

    var userStore = new Mock<IUserStore<ApplicationUser>>();
    var m_userManager = new Mock<UserManager<ApplicationUser>>(userStore.Object);

We can inject the above mocked user manager by calling controller constructor with user manager as parameter.

Now lets look at how we can mock the UserManager. A typical way to do this is to overload the constructor of your controller-under-test and have it take UserManager as a parameter.

   public ToDoController(MyDbContext context, UserManager userManager)
   {
      db = context;
      manager = userManager;
   }

In your unit test cases you would invoke the overloaded constructor and pass in the mocked UserManager.

With that you have now successfully mocked Asp.Net Identity.

Posted in Best Practices, Quality, Unit Testing | 2 Comments

Newsletter September 2016

We were hard at work in September to bring you exciting features and updates.

1. Single Monitor Multiple Locations:

Now you can monitor any probe url from all global locations with one click. All your alerts, real-time reports, status page and daily availability report display your monitoring data by each location.

single monitor with multiple locations

Single monitor with multiple locations

This is different from how most of the other monitoring providers like pingdom where they round robin from different locations. The competitor products make your monitoring data inconsistent especially when you want to track your response times. Round robin locations can also lead to false positives for truly distributed systems where a component in your local region goes down.

2. Auto-Manage Incidents:

SynTraffic now auto-creates incidents when your alert thresholds are reached. The system also closes your incidents once it detects that they got resolved. By default, these incidents are private.

As a DevOps personnel, you can choose to make the incidents public while annotating the incident data. Once you make them public, the data becomes available for your customers through the status page. Please review your status page settings here and ensure that the right monitors are made public.

3. Real-time Dashboard:

The running monitors on your dashboard now show your last hour availability and response time in real-time. When you start a monitor, you will now see that the monitoring data streams back instantly on your dashboard with no wait time.

4. Connection Issues:

Based on your feedback, we have created a new class of Alert Triggers for Connection Issues. Please review your alert triggers and set appropriate thresholds and take advantage of our smart alerts.

The connection issues will also reflect in your availability metric and the count of connection issues displayed on your daily availability report page.

Have feedback?

We have more exciting updates in store as we go full steam into September. If you have a feature request or functionality that you require, do not hesitate to share it with us. Send your questions as well as feedback to support@syntraffic.com.

Posted in Monitoring, Newsletter | Leave a comment

Newsletter August 2016

As the summer of 2016 comes to an end, we are excited to bring our newest release – Page Resource Monitoring (PRM) as part of the August release at SynTraffic. PRM enables SynTraffic to monitor an entire page and its resources. Here are the top benefits you can get by enabling PRM:

1. Page Load Time:

Page load time (PLT) is the total time it takes for a page to load in the user’s browser. This is an immportant metric that affect’s user engagement, user retention and search ranking for your page and hence has direct impact on your bottom line.

SynTraffic can now monitor as well as show trends and reports of your web page’s PLT. You also get a daily availability report that shows how your PLT is compared to the previous day, there by helping you catch regressions in PLT early.

Page Resource Monitoring

Page Resource Monitoring

2. Page Resources:

By enabling PRM, you get a real-time report of the response time of all the page resources. You can view the breakdown, sort by min/max/avg to find out what resources are making your website slow. It cannot get any easier than this to deliver better to exceptional performance to your customers.

We also give you the ability to compare the last few days average to the last hour’s average. This can help you quickly find your new resource bottlenecks or see the performance improvement from your latest deployment.

3. Resource Alerts:

Get alerted when your page resources are unavailable (4xx/5xx errors). This has already helped our beta customers find out about degraded user experience on their websites when external resources on their page have become unavailable. Get notified before your customers do.

Have feedback?

We have more exciting updates in store as we go full steam into September. If you have a feature request or functionality that you require, do not hesitate to share it with us. Send your questions as well as feedback to support@syntraffic.com.

Posted in Monitoring, Newsletter, SynTraffic | Leave a comment

Newsletter June 2016

We have been constantly releasing exciting updates in June at SynTraffic. Try out these new features and as always continue sharing your feedback.

1. WebHook Alerts:

As our premium offering, you can now get alerts via webhooks. Webhooks allows you to drive automation scenarios when SynTraffic detects downtime for your website.

Login and navigate to Alerts page to enable webhooks for your account.

SynTraffic Webhooks

SynTraffic Webhooks

2. User Management:

Individual users from your organization can now manage and customize what email alerts do they want to receive from the organizational account.

Login and navigate to your Settings page to manage your alert settings.

3. GitHub Login:

We all hate setting and then remembering passwords for yet another website, don’t we. This is why we continue to integrate with other well known OAuth providers. Starting this month, you can now use your GitHub account to login into SynTraffic.

For all you registered users who would like to use your GitHub account, login with your current account and go to Settings page. On this page, click on Manage for External Logins and integrate your GitHub account. No more passwords to remember.

4. Alert Email:

Alert emails have got a overhaul with a beautiful new design. As much as we don’t want to see the alert emails, the new design, hopefully, make alerts a little more likeable.

Have feedback?

We have already started executing on our July plans and have exciting updates in store. If you have a feature request or functionality that you require, do not hesitate to share it with us.Send your questions as well as feedback to support@syntraffic.com.

Posted in Newsletter, SynTraffic | Leave a comment

Software Development: Mocks

Quality is an essential part of everything that we do at SynTraffic. In our effort to have high code quality, we had very early on embraced Test Driven Development (TDD) for building software components. As our code was a healthy mix of different technologies and frameworks, we had our share of experiences in applying TDD and effectively writing TDD tests. Over the next few blog posts, we wanted to share our learnings and best practices for writing effective unit tests.

TDD tests are more than unit tests. For the purposes of this blog series, we will focus explicitly on unit testing where the concepts can easily be extended to TDD tests too.

What is Mocking?

Mocking is a technique that allows unit testing of your code by simulating external dependencies. A typical scenario is when the block of code you would like to unit test consumes external resources (database, network). In such cases, you would typically create mock objects which mimic the behavior of the real object (database, network) where your client object remains unaware if the external resource is a real or a mocked object.

In the scenario below, (A) is your real-world login action performed against a RealDataStore (implements the interface IDataStore). Scenario (B) is your unit test, that sets up a MockDataStore (also implements the interface IDataStore) and interjects it in your application FooBar, before calling the Login Action. By doing this, we have ensured that the application code paths remain the same for both real-world as well as our unit tests, thereby validating the behavior of the application using our unit tests.

One key point to note is that in the real-world scenario the RealDataStore sits on a different machine (Mz) than the application (Mx). In the mock scenario, MockDataStore is on the same machine (Mx) and running in the same process as the application.

Mock DataStore

Mock DataStore

Why Mock?

Here are a few reasons you would want to mock:

1) Repeatable/Reliable: It makes your test repeatable. When your tests use external resources such as database or any other network operation, and your “successful” unit test starts to fail, you now end up debugging multiple places to understand the issue. Often times these failures happen due to transient errors which now make your test non-repeatable and unreliable. By mocking the external dependencies and keeping everything within the process, you make your tests deterministic.

2) Higher Test Coverage: Mocking allows you validate your code in the hard to test/repro scenarios like database connectivity failure, disk failure, out of disk space exceptions by simulating them locally. You can also setup any given state of the application/ database/external source. For example you can setup a real world scenario of a disk failure or database failure which is otherwise impossible to setup in a unit test. Now you can validate if your application responds as expected in these scenarios, thereby increasing your test coverage.

3) Improved Efficiency: You get efficiency gains as your unit tests can now run faster without waiting on large, unwieldy resources like a database. This way you will encourage the culture of running the tests after each check-in, thereby catching bugs early and help ship a quality product.

4) Faster Evolution: As we embrace agile, the product is evolving constantly and so follows the features, design and the code. As the unit tests serve as the gatekeeper of the current state of your product design and code, you can refactor the code with greater ease and that helps your evolve faster.

In our next blog post, we will talk about How to Mock?

Posted in Best Practices, Quality, Software Development, Unit Testing | Leave a comment