7 minute read
Can you get better speed test scores with motion header 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!
Performance grade: “A” 100
Load time: 854ms
Page size: 449k
on Nov 23 at 05:06
First view: 1.609s
Repeat View: 368ms
Page size: 334k (lazy load), 447k complete
on 11/23/2016, 5:19:37 AM
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? [smack forehead now]
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.
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)
on Nov 23 at 02:48
First view: 4.145s
Repeat View: 1.836s
Page size: 1.8M (lazy load), 4.6M finished
Requests: 33 (lazy load), 65 finished.
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 >
A personal note from Steve:
I‘m recommending the Twenty-seventeen default theme. I’m not following my own convention of being unconventional. You may have expected me recommending something more esoteric. Or perhaps a *premium* theme. It may seem an evasion or path of least resistance. Not so. The main reasons for using this theme are:
1. It’s WordPress endorsed. They are the biggest theme author and theme publishing company in the world. The future longevity of this theme is excellent. It will be updated and kept current for many years. It won’t be abandoned or sold.
2. I torture tested the pre-release back in October – and have continued testing it since (9 months). It’s fast for mobile – even when abused with sloppy design practices that bloat most sites. If a site is slow using this theme, it’s not the theme’s fault. It’s something else. It has potential most people don’t realize.
3. Pages are a classic one-column layout suitable for modern mobile business sites (not a blog format with sidebar). The parallax, front-page, sectional, featured images can be used or not. It has flexibility.
4. With a little imagination, using color-depth-limited GIF images allows big-screen graphics to look “grand scale.” Yet, still be fast loading. This is a standard-issue theme with uncommon mobile adaptation.
5. It works well for responsive mobile screens. It does require planning and creativity for the fall-back header image.
Don’t hesitate or be embarrassed for using this theme. While one person at Automattic designed it, a team of 103 contributors put many hours into reviewing and tweaking it. It had a high price tag for WordPress to produce it. So just because it’s free, doesn’t mean it’s cheap.
Mobile WordPress Speed – without coding!
What others think of us: