loading...

Learning Web Server Performance

dannylee8 profile image Danny Lee ・9 min read

https://www.panix.com/~dreamer/buildapc#gpu-monster

Intro

This week I had a technical interview with the NYC Tech Talent Pipeline (TTP) and my most important takeaway was how much I need to drill down and dig deeper and fill out my knowledge. The question that stumbled me was “If your server started getting heavy amounts of traffic and slowed down, how would you alleviate this issue?”

My answer hit on some vague points about using a load balancer to divert traffic to multiple servers and route them back to the requester. Two separate times in my rambling answer the word ‘Nginx’ came up in my mind, but I refrained from uttering ‘Nginx’ because the only thing I know about it is that its pronounced ‘Engine x’.

So, I got off the call, not discouraged, but more aware I needed to improve my lack of knowledge in web server performance (especially for front-end developer work). And also, to be able to describe it to a non-techie in an understandable way ( ELI5 is a good strategy).


Load Balancers

So, load balancers…I mentioned it in my technical interview and I mentioned it in this article, but at this point its still just some fuzzy buzz biz-ness 🤣. I couldn’t tell you how they work, how to set them up or what their actual benefits o disadvantages are.

My ad-lib explanation would be that they act like a traffic cop, standing at the intersection of data and requests. On one side the web browser requests come in and on the other side is where the servers (data) lives. And, this traffic could would redirect traffic if any particular road leading to the servers (data) is congested with traffic or is closed for some reason.

And voila! Nginx.com describes “load balancing”the same way, but much more thoroughly. However, this article isn’t about load balancing. It’s about the other ways to improve website performance, before you get to the point you need to implement load balancing. Just like you wouldn’t use a chainsaw to cut a piece of paper, you need to find the appropriate tools for your situation.


Speed matters

What is Bounce Rate?

The bounce rate of a website is the percentage of visitors that come to your website, requests a single page (the front page), and then leaves. This could be the case if your page takes so long to load that they leave before the front page has even loaded. There are many studies and statistics that clearly show the longer waits, mean higher bounce rates. Around 2.5 to 3 seconds of loading time is acceptable to most users, beyond that, the bounce rate rises exponentially.

Source: Google/SOASTA Research, 2017.

What is a conversion rate ?

Its the number of conversions (goals reached) divided by the visitors to the page. The higher the bounce rate, the more visitors who come and go without even looking at what a website has to offer.

According to Akamai’s 2017 research, a 100 ms delay can cause a 7% drop in conversions, a full second can decrease conversion by 70%!


This all makes sense. Doesn’t it? There’s nothing more frustrating than seeing a great product or website, so we click on it and … wait …. a blank screen …. some image holders …. a loading icon….nope, not for me. I’ll never return here.

So, yeah, speed matters.

https://gph.is/1eQTxkz


First Steps towards Improving Server Speed

The Mobile vs Tablet vs Desktop experience

The first area that can be addressed is the different requirements of each of these devices. A desktop with a hard-wired connection may have much greater speed and/or bandwidth (what is the difference between speed and bandwidth?) than a mobile device on 4G LTE. (If you’re curious about your device’s bandwidth — try Speedof.me.) The new 5G network will greatly improve mobile device speeds (see chart at kenstechtips.com) but creating device-specific versions of your website will still have performance benefits.

Adjusting the dimensions and file size of your media (videos, photos, etc.) to the specific device as well as limiting dynamic content can greatly improve the download of the individual elements of a web page. I’m still trying to understand how image dimensions and file sizes work on mobile devices vs desktop devices and the optimal way to resize them. (If anyone knows of good resources for this or can explain it, please comment below or message me! 😀)

https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview

This next illustration shows the average web page size by content from 2016/2017 (source: pingdom.com).

https://royal.pingdom.com/page-load-time-really-affect-bounce-rate/

As you can see the size of initial download of a website is growing. Video sizes are increasing and being a bigger part of web pages as Internet bandwidth and speed increase. By reducing video size and optimizing photos, we can reduce that very important loading time (ref: How to optimize images from Shopify).

Differentiating between the site we serve to mobile and desktop devices can help create an efficient balance. Providing “good-enough” quality, while providing the best download experience.


Shared Hosting vs Virtual Private Server vs. Dedicated Server vs CDN

The bottom of the ladder, when it comes to web server hosting, is Shared Hosting. All of the websites on a shared hosting server are contained on a single physical machine (server) and share resources like memory, CPU time, network bandwidth, and hard drive space.

Think of this as a having a single apartment (website) in a building with scores, hundreds or even thousands of other apartments (server). Resources are shared and if the elevator goes down it doesn’t work for everybody. If everyone is taking a shower in the morning, water pressure will drop in your shower.

https://www.pexels.com/photo/apartment-buildings-architecture-black-and-white-building-584191/

The pros of shared hosting is that its cheap and low maintenance, the cons are that you are sharing resources, which can cause performance issues if the server is overcrowded or if other websites on the same machine are resource (memory/cpu) hogs.


A step up from shared hosting is Virtual Private Servers (VPS). Think of these as connected townhouses or brownstone buildings. They are physically connected, but have separate plumbing, electricity, and other resources. In a VPS server the different hosted websites are allotted a specific set of resources so they don’t step on each others toes.

https://www.flickr.com/photos/thecourtyard/27328804624/

However, they are higher cost, require maintenance (either by you, managed VPS by the host, or a third party, like a system administrator). You can also upgrade and add more “machines” or “resources” if you need them, which you cannot do with the shared hosting.

If you are looking for VPS hosting, please look into Panix.com’s VPS offerings (let them know I referred you! dreamer@panix.com).


The next step up is Dedicated servers. Now this is a big step, because much like purchasing a home, it can be big or small, tall or wide, have many amenities or barely any at all. And also like buying a home, it requires maintenance. Either by your own hand or a hired one, somebody has to make sure the snow gets shoveled and the gutters get cleared each season.

http://www.antiquealive.com/Blogs/Hanok_Traditional_Korean_House.html

But, the benefits of owning your own home is that you get to keep all of its resources to yourself. You have full access to everything the house (web server) has to offer and you know that your needs will be put first.

If you are looking for Dedicated Web Server hosting, please look into Panix.com’s offerings (let them know I referred you! dreamer@panix.com).


Lastly, you can use a Content Delivery Network. I would say this is like having pied-à-terre in many different geographic locations. A north facing Central-park apartment for the spring, a cliff-side, beach front, elevator-down-the-cliff resort in Uluwatu, Bali, and … wait that’s all I need. 🏄🍻👨‍💻

With a CDN, rather than use a single server, which is physically located in a particular place (e.g. Panix.com is located in NYC), a CDN has an origin server which replicates your website to its network of delivery servers located in geographically diverse locations allowing your visitors to be serviced by the server that is closest or has the best connection.

https://www.keycdn.com/blog/high-traffic


Compression, Minify, Remove and Cache

Other methods to getting performance gains include using gzip compression. An excellent article on the why and how to implement this strategy is here.

Minifying your html, css and javascript is another way to get some performance gains. Minification optimizes code by removing comments, whitespaces, unnecessary character and reduces the size of the file being downloaded to your visitors. There are different tools for css minification, javascript and html.

Remove or move any blocking javascript files. Placing a call to a javascript file to early in your HTML file can actually delay the load of your page. This is because a browser will stop to load (and execute) your script, before finishing up the HTML that comes afterwards. This delays the building of the DOM tree and prevents the page from rendering.

Caching is a deep rabbit hole, its an important part of reducing the reloading of a page’s resources that have previously been downloaded. In this way, we can reduce network latency (what is network latency?). Its possible to set varying caching times so that resources will be reloaded after a specified time has passed.

Amir Boroumand wrote an excellent article that goes in depth into what caching is, how it works, and the different options available to a developer to control the way visitors’ browsers will interact with your site. I highly recommend reading it!


Closing

So, I’ve had a chance to examine some of the basic ways that we can improve the performance of a heavily-loaded server that does not jump right to the heavy guns (load balancers). I’m frankly a bit embarrassed about my answer. Sometimes, I can have one idea of what people are expecting me to say or share, when sometimes the simple answers are really all that’s needed.

I hope in future technical interviews I can remember to slow down, be more thoughtful and humble instead of trying to throw around buzzwords. (Which I hope I haven’t done too much in this article. 😀)


References

Loading speed effects and research:

Strategies to improve speed on high load servers:

Posted on Apr 9 by:

dannylee8 profile

Danny Lee

@dannylee8

a nyc based programming enthusiast, who also loves handywork, propagating african violets, gardening, woodwork, welding, painting, and travelling to bali, to visit my future home.

Discussion

markdown guide