Save the Internet from WordPress speed abuse.Updated: June 2017
We want to explain the pros and cons of the new Twenty-seventeen WordPress theme.
But first we must review a few basic branding principles. Excessive (or expressive) branding slows page loads. So why even include branding components on a site? Why not just have plain text?
Branding alters audience perception. It isn’t only the site text (content) but rather how it is imagined in the user’s minds. Branding and creative positioning strategy work hand-in-hand. They enhance visitor imagination or mood. Don’t get us wrong. Visitor motive or search intent do influence site perception. But other symbolic and intangible elements also are important. They affect how people feel when arriving and using your website.
On the web, we call this emotional perception – or feelings – user experience or UX. Branding differentiates a website from the competition. Branding fulfills customer expectations and satisfaction. User satisfaction is a component of website usability.
Users are not consciously aware of good branding. Unless of course, that’s their field of expertise. Bad branding feels fake, contrived, or noisy. Good branding is transparent, genuine, and only detected at a subconscious and visceral level. Many elements that create branding sensations are design related. These include:
- Speed (page load time).
- Color combinations (theming).
- Fonts (typography).
- Symbols (including logos, icons, and favicons).
- Styling (expressive or classic).
- Ease of use (navigation).
Speed is first in a good branding strategy.
When visitors feel frustrated or annoyed by a slow page load, they won’t tolerate it. They’ll leave by clicking the browser back button. This wastes the hard work invested in aesthetics and content relevance. We call this “twitch” behavior – or the economy of attention. Attention spans and tolerance levels are decreasing.
Branding increases the website perceived-value and credibility. It’s the famous first impression. This creates a halo bias or effect that skews all later site interaction. It’s your opportunity to present positive website body language. This improves your customer loyalty results. Increases repeat visits, encourages longer visits, and a lower percentage of single-page sessions (bounce rate). In other words, your site feels like the right place to be.
Now, back to our real topic, the problems with Twenty-seventeen theme.
Twenty-seventeen uses the full screen to present a single image or motion video. On desktop, both get loaded. On mobile, no video loads. Just the “fallback” JPEG image. Superimposed over the screen in the bottom left corner is a small amount of text. This is the site title and tag line placed in the WordPress customizer.
“The problem with large Hero images for mobile.” Our article explains two reasons:
1) If the hero image fills the whole screen, it may not communicate the purpose and relevance of your website. What if people, go, “Huh?” wondering over the meaning of your big image? You may just bounce another visitor. You wasted communication space (above-the-fold area).
2) A large JPEG image is heavy. Video is extremely heavy. Those slow down page load. Another bounce risk.
Are bounce risks worth it? Remember the visitor does have a motive for visiting your site. And it’s not to admire your artistic hero image. Unless you’re an artist, of course.
Automatic resizing note: If you upload a header image with dimensions different than 2000 x 1200 pixel, the theme resizes the image to make it full screen on desktop computers. It stretches images of wrong dimensions and makes them look grainy.
The header fall-back static image is responsive but it resorts to cropping-to-center on mobile. This is a common technique to avoid a small header image and a large gap beneath the image as it proportionately resizes. It was the decision of the theme developers to crop the image.
More Twenty-seventeen temptations.
We wrote a benchmark article. In our benchmark, we mention how easy it is to overload the home page with featured images and motion video.
Go ahead use stock off-the-shelf images and video. You will have a page load time of between 2 seconds and 4 seconds on Pingdom.com or WebPagetest.org. But that is deceptive. That is the perception of speed. It’s the lazy-loaded speed or initial load time. It doesn’t take into account all the mobile bandwidth gobbled up to complete the page load. That can be over 10 seconds.
Today, the average page weight is 2.3M.
Armed with Twenty-seventeen theme and stock imagery, the page weight will far exceed that. We guess around 5M typically. All in the name of branding, WordPress introduces more web-speed abuse. They have chosen to go with the herd – purely for expressive aesthetics and thus slow down the Internet.
WordPress’ design team attempted controlling the bloat with aggressive image optimization of featured images. And by capping hosted videos at 8M. And adding nice lazy-loading. These are all commendable. But you can also load YouTube full-length feature films if you want. No cap. And someone will.
WordPress is being cool and fast at the same time. Unfortunately, they opened Pandora’s box. It’s our opinion most website owners will not understand the implications. There is a learning curve with this theme. Instead site owners will wonder if caching or a CDN will fix the problem. They will use heavy stock images and fill all the empty slots on the home page. It’s inevitable.
Education is the solution. WordPress doesn’t have the resources – or care enough – to invest in that. This is: Apathy.
Can you make the Twenty-seventeen theme load fast in under 2 seconds on shared hosting? Yes. But it takes discipline and planning.
Serious Mobile WordPress Speed Strategy for Business