Creating Blazing Fast Web Pages

by
Categorized in: Company news, Other, Product development | No Comments
       

Creating Blazing Fast Web PagesPerform a search at google.com and just above the search results appears the amount of time it took to execute the search. Why? It’s Google’s way of demonstrating that they take speed seriously and work hard to shave every millisecond possible off the time it takes to load search results into your browser. While you might not think of a second or two as being a big deal, studies show it has a measurable and significant impact on conversion rates as demonstrated at this infographic. While “conversion” in that infographic refers primarily to online shoppers, in the context of elections, it means voter participation.

So committed is Google to speed that they make available something called PageSpeed. Described in their own words as follows. “The PageSpeed family of tools is designed to help you optimize the performance of your website. PageSpeed Insights products will help you identify performance best practices that can be applied to your site…”

Contrary to what the name might imply, PageSpeed does not actually measure how quickly a web page loads in your browser. Instead it measures how well optimized a page is to perform as quickly as it’s able. In other words, a web page could do everything right, but also simply be very “heavy” due to the amount and type of content, or reliance on external resources such as style sheets or script files coming from sites other than that serving the main page. Lots of images is heavier than lots of text so an image-laden page will take longer to transfer from server to browser even though everything about it might abide with best practices. Conversely, a small page may be completely out of order in terms of being optimized for speed, yet still load quickly simply because there isn’t much to load.

With that said, the ballot pages served by ElectionsOnline earn a PageSpeed Insights score of a virtually unheard of 100 out of a possible 100! For comparison, here’s how some other sites score:

  • Google’s homepage = 98
  • Amazon.com = 85
  • CNN = 60
  • Homepage of ElectionsOnline’s chief competitor = 50

Furthermore, because the ElectionsOnline ballot pages have a relatively minimal design, there’s not a lot to transfer from server to browser. In other words, they’re lightweight to begin with, but have also been optimized to ensure what little bit does need to transfer is transferred at blazing speed making them some of the fastest pages in existence. And all without compromising visual attractiveness. I was a voter in an election recently being conducted through a competitor’s service. While the ballot pages were indeed minimal and lightweight, they also had the feel of something I would have had my students create back when I was teaching Intro to HTML at Georgetown University. While speedy ballot pages are good for voter turnout, so too is professional design good for instilling voter confidence so they feel every facet of the system has been professionally created.

A perfect score leaves no room for improvement, but PageSpeed Insights did mention the following as things to “consider fixing”:

  1. Enable compression
  2. Minify HTML

Let’s look at each of these and examine why they showed up.

  1. Enable compression. As stated at this article, “Using compression is the single most effective way to reduce page load times.” While one could argue that minimizing the number of trips to the server for the various files needed to build a web page has a larger performance gain than compression, there’s no denying compression is huge and in fact the static parts of the ballot pages, things which don’t change from one request to the next, are compressed. “Static parts” means things like cascading style sheets and javascript files. The dynamic parts aren’t, and PageSpeed picked up on that and included it as something to possibly address. As an example of what compression can do, consider the online voting system page. While this page doesn’t score a perfect 100 like the ballot pages do because of the inclusion of some external assets, it’s still an incredibly fast page thanks in part to compression. Its size is 25 kilobytes, but because it’s compressed when sent to a browser, only 7.2 kilobytes goes across the wire. And that’s just the HTML source. There’s also a cascading style sheet attached to the page that weighs 8 kilobytes, but when compressed only 2.2 is sent across the wire. Another weighs 25 kilobytes, but is reduced to just 5 when compressed. So if compression gives such huge gains, why not compress dynamic elements as well? “Dynamic,” means capable of changing from one page request to the next. This means a web server can’t simply compress a file one time, then keep a copy of that compressed version in its cache for each subsequent request which is what happens for static content. For ever-changing dynamic content, a web server would have to first build the page dynamically, then compress it, then send that back to the browser on each page request. There’s some CPU consumption involved with compressing files and when the act of compressing needs to occur on each request the benefit of sending a compressed file across the wire is not generally worth the tradeoff in the amount of time, or CPU consumption, that is necessary to compress it.
  2. Minify HTML. Minifying means take a source file, like the HTML source file of a web page and reducing its file size by eliminating things like spaces and carriage returns. The same thing can be done to any plain text source file like for example a javascript file or cascading style sheet. Spaces and carriage returns are characters like any other and as such, add to the “weight” of a file. Eliminating them reduces the file size, but also makes the file virtually unreadable to a human. So generally the true source file is used by a web developer to do work. Then once that work is done, the file is minified and it is this minified version that’s put into production. Because in the field of web development changes are made less frequently to things like cascading style sheets and javascript files it isn’t too much of a hassle to keep a source file and a minified counterpart for them. But because HTML files are modified a bit more frequently, most developers don’t generally regard the theoretical performance benefit of minifying them to outweigh the hassle of maintaining source and minified copies.

A PageSpeed score of 100 doesn’t happen accidentally. The things which accounted for the perfect score are:

  1. There are no landing page redirects.
  2. There has been a complete elimination of render-blocking JavaScript and CSS in above-the-fold content.
  3. Browser caching is being leveraged.
  4. CSS (when in an external file) is minified.
  5. JavaScript (when in an external file) is minified.
  6. Images are optimized.
  7. Visible content has been prioritized.
  8. Server response time has been reduced.
  9. Compression is enabled.
  10. Asynchronous loading of JavaScript (when in an external file) is in place.
  11. Site makes use of sprite images.

The Google Developers web site explains the above more thoroughly than I could, so if you’re a site owner/manager interested in learning more, you may do so at the following links.

  1. Avoid Landing Page Redirects
  2. Remove Render-Blocking JavaScript
  3. Leverage Browser Caching
  4. Minify Resources (HTML, CSS and JavaScript)
  5. Optimize Images
  6. Prioritize Visible Content
  7. Improve Server Response Time
  8. Enable Compression
  9. Use Asynchronous Script
  10. Using Sprite Images

As high speed Internet connectivity has become more ubiquitous over the years, many web designers have regarded it as a permission slip to add things to web pages that slow down the page’s speed without adding a great deal of value to the user. It’s a sentiment to which I, like Google, do not subscribe. I believe faster connection speeds should equal faster page load times for humans and continue to optimize pages as if the whole world were accessing the ballot using a dial-up connection. It’s an approach I’m sure a great many voters are thankful for, even if they aren’t aware it was done.

       

Leave a Comment

Name:
Mail:
(it will not be displayed)
Comment:
Leave this field empty
Powered by...
Mango Blog