SpeedHeader: Twenty-seventeen before-and-after benchmarks.5 min read

Serious WordPress Speed Strategy for Business

Save the Internet from WordPress speed abuse.

Can you get better speed test scores with SpeedHeader graphic elements?

Twenty-seventeen theme on steroids using free SpeedHeader – and extras.

Straight “A” ratings and 100 scores are great bragging rights. But those don’t matter as much as real speed. We got those perfect test marks easily. But most importantly with SpeedHeader, time-consuming HTTP requests were reduced from 73 to only 9. The page speed was reduced to a worst-case 1.6 seconds and best-case 854 milliseconds. And page weight was now a mere 450k. So what? Who cares? Your suffering mobile website visitors that’s who!

https://youtu.be/IHlqYF3-pWQ

 

TEST 1

Pingdom.com
Performance grade: “A” 100
Load time: 854ms
Page size: 449k
Requests: 9

Tested from New York

on Nov 23 at 05:06


TEST 2
WebPagetest.org
TTFB: 601ms
First view: 1.609s
Repeat View: 368ms
Page size: 334k (lazy load), 447k complete
Requests: 9
Tested from: Dulles, VA – Chrome – Cable
on 11/23/2016, 5:19:37 AM


THE OOBE

https://youtu.be/xlg-5clvT8c

Here’s our story about the “Out-Of-Box-Experience” for WordPress Twenty-seventeen theme. Our raw baseline is pretty fast. But wait until we abuse the theme.

If you don’t add any images assets, the Twenty-seventeen Home page will load in under 1 second. Measuring with Pingdom.com, we got an 805 millisecond speed test. The page weight was 471k with 14 requests. Worst case, measured by WordPagetest.org, was 1.5 seconds. Still not bad. But not impressive enough for a page with no content and only one still-header image!

So we decided to do the amateur approach. Let’s fill all the page graphic-asset options – to the maximum! These included:

  • Fall-back image (the 115k, 2000x1200px default included with the theme).
  • 44-second, 11M, YouTube hosted “atmospheric” MP4 video.
  • Five high-res, featured, digital camera images ranging from 6M to 11M in weight.

We added five camera images because there were places for that many shown in the Twenty-seventeen customizer and Home page. The assumption is filling all the Front Page Content Sections must be normal and good practice. That many, of course, aren’t truly needed – or even wanted. But how would a site owner know otherwise. The content areas can be left empty. That, also, isn’t mentioned anywhere – like in a read.me file.

We borrowed an “atmospheric” MP4 video. We note here that the Twenty-seventeen theme header accepts smaller-sized .MOV files, too. We tested it. But .MOV format will not play on Google Chrome browser. So why bother? Maybe because .MOV is the default format used by most stock video houses. File conversion is then necessary. We admit we picked a heavy 11M video. Most freebies are in the 3M to 6M range. But what’s to stop someone from loading a full-length, 2-hour YouTube movie?

We uploaded the temporary video to our free YouTube account. We copied the YouTube link URL address into the theme customizer. The faster-loading alternative is hosting the video from the WordPress theme media library. We discovered it’s the better delivery method. The Twenty-seventeen read.me file again doesn’t tell you that nice speed tip. But, we wanted to build a worst-case scenario. So we used YouTube. This option falsely appears to be the most sensible.

YouTube has high-bloat overhead. Many third-party HTTP requests are introduced by YouTube hosting. There are no warnings of potential speed damage. Whereas, only one request occurs loading video clips from the WordPress media library. Requests cause delays.

The sample stock images came from Death to Stock. We used The Collaborative collection. Each digital-camera JPEG image was uploaded to the media library. It took a while to process because of the big sizes. But we were curious what WordPress would do. Would it fail?

The still-image weight changes after WordPress processing:
WordPress automatically compresses all image uploads. All images were also mechanically resized to 2,000px × 1,200px by the theme.

Before > After upload
1. 5472 x 3648px, 11M > 106k,
2. 4126 x 2693px, 7M > 141k
3. 4220 x 2373px, 6M > 167k
4. 4240 x 2684px, 7M > 158k
5. 5472 x 3648px, 11M > 105k

After WordPress processing, all images pass WebPagetest.org’s criteria for optimization equivalent to a Photoshop JPEG quality setting of 50. Beautiful! We’re impressed with WordPress’ image optimization capabilities. No fancy plugins were required. But we’ve added 677k to the page weight! Ouch.


We jammed WordPress Twenty-seventeen Theme full with big, generic stock images and motion video. A worst-case scenario test – with an idiot at the wheel. The final results still aren’t horrible: 1.5 to 4 seconds load times. We’ve seen much worse.

https://youtu.be/poa2HN5BQyQ

This video above is a quick scroll through the beautiful page. But, we deliberately loaded up the Twenty-seventeen theme to be heavy. Let’s see what the test results are for speed now.

Note: Because of good lazy loading practices, the perception of speed with Twenty-seventeen is very good. But uncaring bandwidth consumption affects mobile data throughput – crummy UX results and higher connection costs. The extra page weight makes a big difference for mobile device users.


The data as evidence:

Pingdom.com (best case)

Performance grade: B 87
Load time: 1.53s
Page size: 9.3M
Requests: 73
Tested from Dallas

on Nov 23 at 02:48


WebPagetest.org (worst case)

TTFB: 552ms
First view: 4.145s
Repeat View: 1.836s
Page size: 1.8M (lazy load), 4.6M finished
Requests: 33 (lazy load), 65 finished.
Tested from: Dulles, VA – Chrome – Cable
on 11/23/2016, 3:29:02 AM


To achieve those great speed test results for SpeedHeader and Twenty-seventeen theme, did we cheat?

Honestly? Us cheat on a speed test?

Yes. We cheated. Just a little bit for a boost. Here’s good news from our plugin back story >

Notes for extreme-speed fanatics (like us): Twenty-seventeen theme does a great job of optimizing JPEGs to the new 82-quality setting (was 90 before). This makes large images pass WebPagetest.org’s image-compression test criteria. That’s the equivalent of a 50-quality setting using Photoshop. Wonderful. But…

We did one of our favorite signage speed tricks, using large-size – but small-weight – PNG files. Uploading the featured PNG images to Twenty-seventeen theme the weight automatically increased by 3 to 4 times the original. We found that if we used GIF images we had “no changes” and a smaller image file resulted. Freakish image voodoo.

For example: This 2000x1086px simple, red 9k-PNG signage (above) converted to 32k as a featured PNG image. Fail! As a 25k JPEG, WordPress automatically converted it to 58k of JPEG bloat. The solution: make it a 15k GIF. Then WordPress wouldn’t change it. Oddity.


You can download the lightweight motion header used in this test and other goodies for free here >

 

Steve Teare
performance engineer

Serious WordPress Speed Strategy for Business

What others think of us:


"Bloat was out, lean and speedy sites on multiple platforms with easy editing was the new target. Steve hit the bullseye with our new WordPress sites … Give Steve a call if you're serious about a highly effective website for your business or organization." visitpalouse.com Washington, USA

by - Mike Milano0 min read