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.
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.
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.
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.
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.
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.
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.
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.