fbpx single-white-chevron-left Asset 1
School of Hard Knocks | Campaign
Focused Support | Interface Design
Killer Innovations | Product Design
Advanced Drone Control | Software Design
SelectHealth | Branding & Web Tools
Rosette | Interface Design
SelectHealth.org | Website
Anthem | Branding
Lashbrook | Campaign
Blip | Branding & Web Tools
Dish One | Campaign & Branding
Xpress Bill Pay | Branding & UX/UI
SpaceX
American Express | Interface Design

Big-D | Website Optimization

The folks at Big-D Construction work on an enormous range of construction projects, from simple offices to restaurants, factories, and hospitals. And no two projects are alike, each comes with its own set of requirements and challenges.

As a consequence, the builders at Big-D Construction have a monumental portfolio of projects to showcase, showing both indoor and outdoor views in high resolution, which translates into many megabytes of media in their online portfolio.

All of this means that the Big-D website was not loading as quickly as the site owner would like. In 2018 Stotion was tasked with updating some legacy code on big-d.com, with an emphasis on improving site speed and responsiveness.

Dedicated Server

Due to some legacy requirements, big-d.com was hosted on an in-house web server. Our developers updated the code to provide compatibility with common LAMP-based hosting solutions, and we assisted in relocating the site to a dedicated server at Dreamhost. Their superior hardware and bandwidth eliminated a major bottleneck in serving big-d.com content.

 

Custom Theme

The Big-D website is built on WordPress, a free and open-source Content Management System (CMS). WordPress is hugely popular, powering over one third of all websites on the web. One benefit of this popularity–or downside, depending on who one asks–is the rich ecosystem of themes and plugins available for WordPress sites. Unfortunately every plugin adds a small performance penalty, and most themes are written to maximize flexibility rather than maximizing performance.

For Big-D, we made sure to work within a totally custom theme that is purpose-built for this site, eliminating all unnecessary CSS, Javascript libraries, and other common WordPress theme baggage. We also made sure to eliminate all unnecessary plugins to streamline each page request. Further, we updated the layout to be responsive for modern desktop and mobile browsers rather than offering separate desktop and mobile sites.

 

Page Caching

WordPress is notoriously “chatty” with its back-end database, and as a result, a single page request on a WordPress site can result in dozens of costly transactions with the database. To minimize the penalty of these database queries, we implemented aggressive HTML caching so the database isn’t needed at all for the vast majority of visitors. The site generates the HTML the old-fashioned way when a page is first requested, then saves that HTML so it’s ready for subsequent visitors.

 

Content Delivery Network

One major bottleneck in media-heavy websites is maximum concurrent connections. A modern website is made up of multiple different kinds of files—HTML, CSS, Javascript, images, videos, fonts, and so on, and each file requires its own HTTP connection. Each HTTP connection takes a few milliseconds to establish, which can add up to noticeable performance penalties. And sometimes there are more files than available connections (due to limitations of the browser, operating system, Internet provider, or website host). In these cases the HTTP requests can be put in a queue, each waiting its turn. Furthermore, if the visitor is far away from the website host, delays can occur due to the distance each HTTP request needs to travel.

To address both of these issues, we recommended and implemented a Content Delivery Network (CDN) to serve Big-D’s media files. A good CDN has a very high maximum number of connections, and has data centers all over the world so there is always a server a reasonable distance away.

 

Lazy Loading

When a browser renders a webpage, its first priority is to start “painting” something to the screen as soon as possible. This minimizes the perceived load time for the human user. Webpages with a lot of media can paint in a slow and twitchy fashion while the images pop in one by one, forcing the other content to reflow around them.

To mitigate this problem on big-d.com, we implemented “lazy loading”, a feature where each image is initially a very low bandwidth placeholder of the proper size. Once the HTML has loaded, a bit of Javascript replaces each placeholder with the real image, one by one. This does not speed up the page load, strictly speaking, but it improves the perceived page load time, and prevents the content from shifting around in an unsightly manner as the images are downloaded from the server.

Sprites

In order to further reduce the overhead of multiple HTTP connections, we implemented “image sprites” on multiple areas of big-d.com. With sprites, one image file actually contains many images arranged in a grid. If viewed normally the image would take up a lot of screen space and be surrounded by many other unnecessary images, but with the clever use of CSS and Javascript, we can display just one segment of the image (a “sprite”) anyplace on the screen at any size. This condenses many HTTP image requests into one.

 

Scalable Vector Graphics

Most images on the web are “raster” images, such as JPEG or PNG. Under the hood these files are each essentially a long list specifying the color for each pixel in a given rectangle of screen space. The more screen space an image requires, the more pixels there are, and hence a longer list of pixel colors is required, and a larger image file is the result. There are further complications when considering modern computer and mobile displays, where a pixel is not always a pixel. Nowadays many devices have pixels so small they use four or more physical pixels to render one on-screen pixel. This provides the opportunity for very crisp images, but only if the image file actually has pixel data for every physical pixel. As a result, images optimized for modern, high-pixel-density displays are beautiful, but greater in file size to fill the same screen space.

One solution to this problem is Scalable Vector Graphics (SVG). Rather than the raster, map-of-pixels approach, a vector image is a description of the image’s geometry—its lines, shapes, curves, and colors. SVG files tend to me much smaller in file size than raster images. When rendering an SVG image, the web browser reads these instructions and draws the geometry in the specified area of the screen. As a result, SVG images have maximum crispness at any size, on any screen. SVG isn’t a panacea; it is only suitable for geometric images like logos and buttons, not for photographs.

On big-d.com, we converted most UI elements to SVG graphics to ensure they will load fast and look sharp. Furthermore, we implemented SVG sprites—similar to the PNG sprites mentioned above—reducing the number of HTTP connections necessary to load the page.

 

Security and DDoS Defense

Login security is an oft-overlooked contributor to site performance. Out of the metaphorical box, WordPress has little by way of proactive security measures. There is no protection against brute-force login attempts, so it is common for bad actors to run automated scripts trying thousands of common passwords against the ‘admin’ user for WordPress sites. Handling these login attempts can put a severe load on a site; and if the hackers do manage to log in, the botnets and spam-generators they install will not only compromise information security, but they will also put a tremendous load on the server. In order to prevent mitigate such login attempts, and prevent intrusions, we installed the plugin Wordfence, which has blocked hundreds of thousands of invalid login attempts.

WordFence also scans for malware on the site: WordPress has a rich ecosystem of plugins and themes from developers around the world, but there is very little oversight in making sure these add-ons are written securely, and without back doors. Like a virus scanner, WordFence check site files against a list of known malware, and can alert the site owner if any new files appear unexpectedly.

 

What More Could Be Done?

We did a lot of work on big-d.com, and as a consequence the site performance improved considerably, but there is always more one can do to improve the performance of a website. In the future we hope to enable GZip compression; minify the Javascript and CSS files; and convert remaining raster UI elements to SVG.