A typical web request and response has the following pattern: a web client makes a request to your server, a response is generated, and the response is sent back to the client and is rendered in a web browser. This leave three key points where performance can be improved:
- Server side response generation
- Network transfer time
- Client side rendering
In the first stage, your server often pulls content from a database and processes it in some way. With proper caching, the time spent generating the response itself can be made minimal.
Second is the actual network performance. This is dependent on several factors, including your server’s network port, the physical distance between your server and visitor, as well as the network of your visitor.
Because networks are often extremely good at transferring data quickly, a bottleneck is usually latency– the time it takes for a request to actually travel to the server and back. Latency is often affected mostly by the physical geographic distance between your server and visitor. For example, the minimum latency between North America and Europe is around 50ms due to the length of the transatlantic communication cables and the speed of light in fiber optic cables. In other words, if your server is in New York and your visitor in London, you’ll have a minimum latency of around 60ms. New York to New Zealand is worse, with a minimum latency of 200ms or more.
You can use the
ping command in your command line to get a sense of latency between you and your server. In the case of latency, a lower number is better.
Once the response data reaches your visitor’s web browser, the content has to be rendered. At this point, performance can be increased through the careful use of shorter CSS selectors and placing script and stylesheet tags in the “right” order in your HTML.
Server Side Performance Monitoring
There are several tools that can be used to measure your server’s performance.
New Relic is a popular package that measures database query times, JVM performance, and more. It can be expensive, at $24 a month per server (with an annual commitment), but the statistics it can provide are extremely valuable. While I won’t go into specifics on installing New Relic, you can find the installation guide on their website.
Another similar service is Boundary, which can be used entirely for free for 24 hours of data retention. While it may not be useful for finding performance issues after the fact, it is real time and provides a pretty slick dashboard.
Bloggers using WordPress may find the
timer_stop function useful. As expected, the function returns or outputs the amount of time taken to render the page.
Latency of your website can be monitored through various online and local tools. Pingdom provides an online tool which can be used to not only measure the latency of your website, but the time each individual resource takes to download.
The Web Page Test, supported by Google, also gives detailed statistics on the load time of each component of your website, along with averaged results across multiple trials (with and without a primed browser cache). They also have tens of servers (and geographic locations) ranging from Virgina to Paris to Tokyo, as well as the ability to emulate limited connection speeds, such as those experienced by users on 3G or dial up.
If you prefer to test your website under more “realistic” conditions, you can use the developer tools of your web browser. In Chrome or Safari, you can easily view each request in a timeline format. The web inspector not only shows when each request starts, but the time taken to resolve DNS and transfer the data itself. Remember, if you want to test your website accurately you must empty the cache or use your browser’s incognito or private browsing mode. Also, the specific timings you measure using your web inspector will only be accurate for your particular network and geographical location– visitors from another part of the world will have a different, albiet similar, experience.
ping command in your command line or terminal can be helpful in generally determining the latency between you and your server. More technical users may want to consider using a traceroute to diagnose latency issues and determine exactly how data is flowing to your server.
Client Side Rendering
Client side rendering performance generally is not a huge bottleneck on desktop and laptop computers. However, it can be extremely important to avoid specfic CSS properties and habits when optimizing for mobile phones and tablets which have lower power ARM processors and fewer resources.
One tool that can be used to measure the amount of time and power required to render your page is the Webkit web inspector available in Google Chrome. The timeline tab shows, in detail, the exact amount of time spent downloading resources, as well as painting them onto the screen.