Washington State University has a single multi-network installation. They serve over 2 million page views a month across almost 1083 WordPress sites. Gak! We choke on the sheer enormity of the project.
We met Jeremy Felt and other’s of the WSU WordPress team at a Meetup in Moscow, Idaho. We admit they intimidated us. We knew these brilliant guys were way out of our league. PagePipe is a little David with a puny slingshot by comparison. Could we make recommendations for performance enhancement to these Giants?
We used Yslow extension for Google Chrome and WebPagetest.org speed testing tools to peek behind the scenes. Here’s what we saw:
There is some low-hanging fruit and unrealized potential.
The Home page had 113 HTTP Requests for elements. Those components added up to a total page weight of 3.45M! We quickly Googled the most recent-published, average-page weight. It’s up to 2.2M as of January 2016. That demonstrates the excesses of designers and developers of recent years. Pages have increased in weight about 30 percent per annum for the last four years. But the “pipe” (throughput) is not getting bigger or faster. Congestion!
So how long did this big page take to load? 9 seconds – occasionally 10 seconds. It could have been worse. On mobile devices, they’re on the verge of the 11-second lost train of thought (see the illustration below). We’ve reported people won’t wait that long. We did another quick-and-dirty test with a hand-held device. Connecting via a wireless router, the Home page load time was over 20 seconds. Hmm? Not good.
WSU is doing many things right. The Home page is impressive and awe inspiring. We admit the perceived load time is pretty fast – between 2.5 and 3.5 seconds on a desktop. Of course, not as good on mobile. Part of the speed problem is not the fault of the developers – but rather the fault of the stakeholders. The desire for impressive and expressive aesthetics have superseded speed as a primary goal for mobile users.
Classic design is strongly connected to perceived site usability. Expressive design is for memorable branding.
A committee with many goals (or values) will create a page with too much – or no emphasis. That sounds harsh. But “no emphasis” is our verdict and it’s causing a speed problem.
When you emphasize everything, you emphasize nothing.
As we scroll deeper on the page, panels reveal new ideas. But what’s most important? We can’t tell. What are we supposed to do next? Is the “beauty” overselling?
Overselling creates suspicion.
Overselling includes using big, background panoramic images. Plus it encompasses interactive elements like a complex Google Map, and parallax scrolling, too. They’re slick, gimmicky, and trendy “features” to impress visitors. They’re expressive aesthetic. They add a lot of page weight. It’s entertaining – even beautiful – but does it have genuine value?
Some small potatoes:
We’ve a few small questions. They may make no difference whatsoever in speed: Are they lazy loading images? Why no minification plugin? (Some files were minified by hand). Why are they using Typekit Proxima Nova instead of a Google font. Many Google fonts are already cached in every browser on the planet. Not true with Typekit.
We just wonder. We know these aren’t oversights. These guys are thorough and professional.
We see a way to reduce the page weight by 1.4M. But it’s gonna hurt. And it could buy 3 seconds.
“It’s the Map! It’s the Map” – Dora the Explorer
From our rough calculations, we’ve found the biggest culprit. It’s the much-worked-on, sweat-over, interactive Google map – showing all WSU locations. It’s calling 56 HTTP elements. It’s hogging almost half of all HTTP calls. They are mostly loaded in parallel which helps.
The map accounts for 692k – or 20 percent – of the page weight.
But the map is so cool. You can’t kill it. Can you?
The map has too much invested history to let go of this mammoth. It’s not leaving the site – but it should leave the home page. The solution is simple. Place a responsive (or dynamic-resizing) static-image link (screengrab) and simply offload the map to it’s own page.
That would be a brave and gutsy thing to do. But it’s also smart. Why? Because here is the responsive view:
And here the WSU map is displayed on an iMac using Google Chrome browser:
Wait! There’s more savings:
The map is only half of the solution. According to WebPagetest.org, the images have a problem. If they were more aggressively optimized, WSU would whittle off another extra 441k. That’s a 22 percent reduction in page weight.
We wonder are these images sized for Retina displays. If so, is that wise and necessary? Only visitor web statistics (which we don’t have) would tell. No clue. But that may be another speed-saving compromise. Because of the WSU student population, we suspect at least a big chunk of the audience are on remote devices like tablets and smartphones.
We’d optimize even harder than WebPagetest suggests. We experimented with a few page images. We figure the aggregated savings could easily be 688k – about 34 percent reduction.
Is there a reason to not optimize images? Yes. Uncompromising perfectionism. Ouch.
Take the page’s 3.45M original weight. Now subtract a 692k map and then reduce the image weight by another 688k. The final weight is 2.05M. Finally, we can claim that WSU’s home page weight is average.
We challenge WSU not to be average. Can they compromise or reduce stakeholder expectations? It’ll require sacrifice and negotiations. And clear, concise communication goals. They owe it to their iOS and Android users. Those are mostly students, parents, and alumni. Not faculty desktops and laptops.