How web design colors affect mobile speed.

Can studying Google Analytics web statistics influence design color choices? More ways than you might think. But first you have to know where you’re at. And where you’re going. You must know what is most important. What is valuable and what is not? To answer that you need objectives – goals for making good choices. Even for something as simple as colors.

You have a WordPress website. This imaginary site gets good traffic. Monthly, two percent of your new web traffic comes from Facebook. Almost nothing! Social media has failed. Everything reported is organic Google search results: 100-percent traditional. Imagine your information site receiving 20,000 unique visitors per month with 18,000 leaving in under 10 seconds. Most everyone plainly perceives they landed in the wrong place.

Perhaps the description underneath the Google search link misled them. Somehow, you didn’t serve the information they were hoping or expecting. They then reacted negatively by hitting the back button – and kept on searching. On the web, people’s behavior is impatient and intolerant.

Of your remaining new visitors, only 2,000 per month stay for 3 minutes to over 30 minutes. Those are the people who are engaged and interested. They read content because it’s perceived as relevant. They watch videos in hopes of getting answers to their problems. They may even do something beneficial like signup or buy.

What if Google Analytics tells us 60 to 70 percent of visitors use Apple iPhone and iPads? Those real numbers are whopping. The majority is mobile. Is that normal? Sometimes. It’s happening on many sites now.

Your imaginary home-page, load-time is under 4 seconds. That doesn’t seem so bad. But Google reports your most popular landing pages are averaging 6-seconds or more to load. That speed (slowness?) doubles into about 12 seconds on a mobile device. This wait is beyond the human 10-second threshold of pain. Attention wanders. That means viewer boredom, frustration, annoyance, and abandonment increases. Hmm? No wonder the bounce rate is high.

You have a big user experience problem affecting website profits. Speed is killing opportunity. Can color help solve this speed problem? Maybe.

Speed is primary to achieve mobile site goals. We have to get past that barrier and achieve an ideal 2-second load time. Yet, we need branding (decoration) that communicates to the right audience. Decoration adds page weight. Bloat occurs on overly decorated sites.

Alexa gives us demographic data that Google’s free service can’t provide. What if our marketing goal is to appeal to an all female audience? Not men. But Alexa indicates 40 percent of site visitors are male. Men are unqualified leads. How can we subtly tell men to get lost and not waste our time? How can we entice women to stick around? Can we filter sales leads with color? Can color be “weightless”? (Weightless meaning not adding any page weight or drag to the site).


An unconventional solution.

Women know when a female designs a website. If your audience is female dominant, you need the touch of a female designer. Men aren’t so perceptive.

The speed-and-decoration balance lies in one simple trick. We must discard photographic images – and all Jpegs for that matter. Instead, we must use solid-color, illustrative, PNG-image files. Not Jpeg format.

JPEG is the most widely used image type on the Internet. Of all websites, 70 percent use JPEG images. JPEG image compression exploits certain properties of our eyes. This allows for compression for smaller files. But they are rarely as small of files as illustrations.

We’ll demonstrate. 259k Jpeg vs 17k PNG.

Screenshot at 2016-08-08 20-08-40
Above: Typical banner Jpeg image, 400k, 1920px × 1280px, background image. Heavy for mobile bandwidth.


Above: Typical custom line-drawing header with reduced color numbers (hero-image substitute), 17k, 1100px × 259px. Much lighter. 17k vs 259k. Hmm? Which will load faster? Illustration always wins over photos for speed.

A PNG illustration banner or hero image consumes so few kilobytes because it’s visually simplistic. Visual complexity increases image file size. Therefore, consider using illustrations and graphics rather than detailed photographs.

But, you say, “They aren’t the same image! Is that a fair comparison?” Actually, yes, it is. Because they both communicate. An illustration is less complicated. It can focus the message with fewer details and fewer colors. This improves viewer attention. And speed!

Big Wow: Smush now has lazy loading … and it’s free.

We hated it when Yahoo sold Smush to these marketing guys: WPMU DEV (Owned by Incsub of Australia).

The best Lazy Load plugin has no weight and no cost:

Lazy Load by WP Rocket

That’s right. Same lazy load feature as the WP Rocket paid plugin – for free.

Read about how to get the other Smush features here for less.

There are various free lazy-loading plugins that add no extra load time to your pages – and also are free.

How to show high-resolution portfolio images on mobile screens.

My brother Brad is an artist. He does landscapes, woodcuts, abstracts, book illustration, comic books, and many other artistic expressions. His million-view blog is ThickPaint.  His YouTube-channel has around 1.4 million views. He’s an art “thought leader” with a reputation.

rad wanted to show landscape images to gallery owners. Speed was not an issue. The target audience has ultrahigh-resolution, large screens and fiber-optic Internet connections.

Retina-friendly images for professionals – and speed for curiosity-seeking mobile visitors?

Typical screens now have a resolution of 1024 x 768 pixels or higher. Mobile presentation of fine art is unusual. Who reviews and critiques artwork on a small, mobile screen? Not a serious buyer. Version 4.4 of WordPress added support for mobile, responsive images. That addition takes care of most mobile users needs for image resizing. (More, in a bit, on image high-resolution enhancement with a plugin).

Common ultrahigh-resolution displays are between 1,920 × 1,080 pixels and 2,880 × 1,800 pixels. 4K and 5K displays pack millions more pixels than lower-resolution displays. 4K computer monitors have a display resolution of 3840 × 2160 pixels. This is about four times as many pixels as a typical 1920 × 1080 pixel display.

Apple coined the marketing term “Retina displays” to describe ultrahigh resolutions. One-third of all iPhone users still have a 4-inch screen. Thats a pixel density of 326 pixels per inch (ppi) on a 4-inch, diagonally-measured screen. The goal when introducing the iPhone 4, was about 300ppi for a device held 10 to 12 inches from the eye. That’s the same as 300-dpi, catalog-print-quality resolution. The iPhone 7 (2017) still has the same resolution – but on a 5.5 inch screen (diagonal).

Retina images are heavy and slow loading. Very heavy. Very slow.

In 2013, Retina displays were on 1.1 percent of computers. Today, it’s much higher because iPhone and iPad tablets use them, too. Images get heavy when catering to creative professionals using large, desktop Retina screens.

Web designers can’t prepare Retina images the same as normal 72ppi web images. Images that aren’t optimized for high-resolution screens don’t look very good. Our opinion is this extra care matters little for most websites – and their users. We don’t ever prepare Retina-ready images. It’s unnecessary overkill.

Recommended image sizes:

  • Smartphones: 888 x 888 pixels
  • Tablets: 1366 x 768 pixels
  • Laptops: 1600 x 900 pixels
  • Desktops: 1920 x 1080 pixels
  • Retina Displays: 2560 x 1600 pixels
  • 4K Displays: 3840 x 2160 pixels

What size should you upload? The bigger the better. This, of course, is horrible for speed.

WP Retina 2X
100,000+ installs
2.7 million downloads (4 percent retention)
1.1M zip file

The WP Retina 2X plugin creates the image files required by retina devices. Then your website looks crisp on every device. The plugin recommends full-size image resolution of 2520 × 1200 pixels. Then the plugin generates a full set of eight images required by your WordPress website. Double the normal number.

The optimized plugin won’t slow your site down. Nor does it weigh down your WordPress database. The plugin only makes one HTTP request and it’s for a script called picturefill.min.js. It weighs 5.5k and loads in parallel with other page files in 123 milliseconds. It’s as if the plugin is transparent.

For Brad’s site, we uploaded images about 3024 × 3024 pixel size. These weighed from 1.5M to 2M file size. We did optimize images before uploading using “save for web” features in GIMP for Linux. The JPEG quality setting was 80. This reduced the image weight from 3M to 2M – about 30 percent.

Today, average web pages weigh 1.3M. Extremely heavy. The Retina images are larger than all components to build a single web page.

That image size on a mobile page destroys speed. The delay isn’t tolerated. The answer is to use a gallery plugin with lightweight thumbnails. The one we chose is Oqey Gallery plugin.

Oqey Gallery plugin was closed on January 26, 2018 and is no longer available for download. Reason: Security Issue SQL Injection Vulnerability. – Thanks for the ehads up to Vee Valkonen.

From our past research, people will only look at about 12 images per portfolio section. They get bored around nine. So we wanted a grid of 12 thumbnails. Those then open up a view of the heavier, Retina-quality, full-screen images.

We chose a free, bare-bones theme called Graphy from our under-1M-compressed speed collection. We needed a simple, unadorned, classic look that wouldn’t detract from the portfolio.

WordPress Graphy Theme demo page. home page with thumbnail grid.

Slider lightbox with Retina image quality.

Mobile version on iPhone.

Under 1-second Speed Specs
Pingdom test

Performance grade: A 100
Load time: 842 milliseconds
Faster than: 92 percent
Page size: 409k
Requests: 35
Tested from Dallas


How large hero images affect mobile speed.

“Hero image” is a term used in web design for a specific type of web banner. A hero image is a large banner image, prominently placed on a web page, generally in the top, front and center.

A large hero image (usually a WordPress featured image) on a posts is irrelevant or generic if it doesn’t help move site visitors towards a conversion goal. There are only two critical performance metrics: sales lead generation and improved engagement (stickiness). Visitor engagement is indicated by click-through, page dwell time, and multiple visits. These are the inverse of high bounce rates. Information is no longer scarce – attention is scarce.

As content has grown increasingly abundant and immediately available, attention becomes the limiting factor in the consumption of information.

A high bounce rate means we’re attract the wrong people (traffic) – unqualified leads. The decision to leave a page is an impatient and intolerant “snap judgment” from interpreting subconscious relevance cues. These include typography, speed, readability, color usage, images, and symbols. These combined together are sometimes referred to as branding or design. In the end, it’s nothing more that a feeling of being in the right place.

If it takes the user too long to locate something, they will find it through another application. This is done, for instance, by creating filters to make sure the first content a viewer sees is relevant, of interest, or with the approval of demographics.

A large hero image is positioned in the most critical place to influence a visitor’s stay-or-go decision. It’s usually the first thing a  viewer sees. It becomes a critical device for attention and engagement. It’s our responsibility to make sure the hero image is relevant to the user – it’s not a job for the viewer. Otherwise the image becomes attention pollution.

What are you providing by serving up a large featured image? Is it merely a cue to content? Or graphic signage to make pages appear different and less boring? Does the use of a large image communicate a message worthy of the longer load time? It the page real estate wasted?

What is really needed are systems that excel at filtering out unimportant or irrelevant information.

Users have words and phrases in their mind that will cause them to click on a link. We call these trigger words or cues. They are essential to good navigation. Users want to get to a site’s content as quickly as possible. For this, they use information scent. Good information scent give clues and implications that they are hunting and searching in the right direction. They “feel” they will find the solution to their need or problem soon. This is also called findability.

Is herd mentality affecting hero image choices?

Just because your competitor is using stock hero images in the banner of every blog page doesn’t mean it’s a good thing. The herd majority is presently doing this page design treatment. It becomes invisible or transparent. It is ignored. Why?

Milestones during typical page loads:

2.5 seconds for the headline overlay to appear.

3.5 seconds for the background hero image to appear.

4.5 seconds all critical elements are on page.

6.5 seconds for the page to finish rendering. Note: Lazy loading Facebook “garbage / widgets” during that 4.5 to 6.5 seconds window is the most common delay. That’s what takes so long for complete rendering. Can you hear our contempt for Facebook’s speed apathy!?

Double those times for mobile screens.

When you place text on top of photographs, you usually ruin the image aesthetics and the text readability simultaneously. This happens and is bad practice – but part of popular WordPress theme rigidity.

The background image (hero image) is sometimes much bigger than needed for mobile because of the desire to conform to large-screen, retina-display standards. This poor image decision most likely is made by a designer concerned first about their portfolio. Not mobile experience. A mobile audience doesn’t use these kinds of screens – let alone can afford them.

We need to limit the number of page design elements that compete for visitor’s attention.

The size of a typical hero image on sites is around 1920 pixels x 1280 pixels and is scaled to size in the browser window. HTML code downsizing means the browser must calculating page space on the fly – a bad practice for speed. It causes a screen-rendering delay as “the machine” stops to think. And only a small portion of the big image is actually seen. The Jpeg image can weigh above 400k! Optimizing a little bit more might knockoff 100k easily. agrees with us about that image-optimization assessment. But the reduction to 300k is still too heavy for mobile page loads.


Typical page layout with hero image.


Actual size 400k background image. The whole image isn’t used.

Much of what determines where people invest their attention is below the level of pure reason. Indeed, research suggests that one of the most important factors for gaining and sustaining attention is engaging people’s emotions.

Mobile screens may be just 320 pixels wide.

One source of large, free hero images is They have classy, professional photography. A typical Pexel image download is almost 700k page weight and 2682px x 1782px dimensions. Resizing and optimizing helps – but is still not good enough for mobile design.

The takeaway: The fastest image to load is – surprise – no image at all. Next best is a repetitive image that is already cached in the browser. But that can get pretty Spartan and boring. For information sites, textual content is more important than images – unless images illustrate or demonstrate a point.

Since Hero images frequently fill the whole screen, it forces users to scroll to find the point of your website. Hero images are frequently eye-candy and don’t have relevance to the article or blog post. It takes work and thought to find the right stock images. So, there is often a disconnect. Instead, using a call-to-action linked with an image would make more sense. Or even a large signup form. Publishing a positioning statement about “who we are, what we do, and why you should care” is good communications strategy and good ideas, too.

Large background images add a large amount of weight to a page for very little actual gain. Any user whose screen is generally smaller than 1024 pixels will absolutely not see the background image. Small screens simply don’t have the screen real estate to display content and background images. WordPress now attempts to load an appropriately sized “backup” image based on mobile screen size. But we aren’t seeing results in speed testing yet.

A video placeholder as a hero image is a creative technique by making it seem like the entire hero image background is a video that can be played. It’s just a static image that if you click on the “play” button you get a video Lightbox that starts playing a normal-sized video for you. The idea though is that the “play” button is the bull’s-eye of the top portion of the home page. The way it is placed makes you really want to click on it. Then the video sells you on the product or service.

Moving the header hero image down the page for lazy loading is wise, also. But is it still a hero image? We don’t know.

Better hero images do the following:

  • Answer customer questions.
  • Highlight your value proposition.
  • Make an announcement.
  • Feature a service or product line.
  • Include a built in CTA button.
  • Have consistent branding.
  • Reduce customization for limited resources.
  • Make our best promise that we can keep.

Good hero images contribute to the following feelings:

  • Immediacy – priority access, immediate delivery.
  • Personalization – tailored just for you. Personalization is one of the most important factors in viewers choice to attend to one piece of information over another.
  • Interpretation – support and guidance.
  • Authenticity – how can you be sure it is the real thing?
  • Accessibility – wherever, whenever.
  • Embodiment – books, live music.
  • Patronage – “paying simply because it feels good.”
  • Findability – “When there are millions of books, millions of songs, millions of films, millions of applications, millions of everything requesting our attention — and most of it free — being found is valuable.”

What kinds of images get immediate attention:

The factors most highly associated with getting attention, in rank order, are:

  • The message/image is personalized.
  • It evokes an emotional response.
  • It comes from a trustworthy or respected source.
  • It’s concise.

Messages/images that both evoked emotion and are personalized are more than twice as likely to be attended to as the messages without those attributes.

Image rotation using plugins for site efficiency.

Image rotation is our plugin invention for improved speed and reduction of workload. This scheme is helpful – not only for the designer – but also the website owner. Managing fewer featured images is easier and cost effective. This method is less backup-intensive thus using fewer server-resources (particularly RAM). And it’s better for speed from caching benefits, too.

OBJECTIVES: Create the perception of custom featured images on every blog post. This enhances user experience. The image loads faster because it’s already in browser cache. Visitors need a visual change to register that a very fast page just loaded. This differentiates pages and post giving a sense of change and place.

There’s no SEO penalty for repetitive images. They aren’t considered duplicate content. There’s no harm to your search ranking if you use duplicates. Google can’t be bothered with the amount of policing and sorting required.

The Featured Image is a standard WordPress theme feature. Site developers can add a “representative image” for posts and pages.

The problem: Researching relevant stock images for 100’s of blog posts is time consuming and even tedious. Creating custom images or illustrations for 100s of post is also cost prohibitive.

The goal is an illusion of different images on successively-viewed blog posts. We solve this with randomly-rotated images. It’s labor-economy with image reuse. This saves time and money.

The typical site visitor reads a few posts at a time. How long a visitor stays on pages is engagement or dwell time. Google interprets these metrics as “intent.” Visitor intent affects SEO. How much? No one knows but Google.

If the same image is used on every page and post, the reader often isn’t aware the fast page changed. A different image remedies this static illusion caused by rapid changes.  Swapping images is a good cue and provides page variety to combat user boredom. We want to remove confusion because it causes poor user experience.


Simple Content Adder
Active installs: 30+
Zip file size: 1.2M
All-time downloads: 358
Retention rate: 8.3 percent (low)

WP Image Refresh
Active installs: 700+
Zip file size: 823k
All-time downloads: 4,630
Retention rate: 15 percent (medium)

The two suggested plugins are free, obscure, and esoteric. We’ve experimented with various plugins. This combination works best for us.


How to use these suggested tandem plugins:

1. After plugin installations and activation, we go to Added Content > Added Content in the left black sidebar.

2. We “Add New” and create a “post” called “TOP.”

3. We select top, bottom, or both positions. For this case, it’s top.

4. We set “Include In” to Posts, Pages, or Everywhere. We want this rotator only on posts.

5. We specify “Content to Add.” In our case, this is two shortcodes.

Usually shortcodes are added in sidebar widgets – or main text content area.

WordPress-specific code in brackets – [example] – is a shortcode. Shortcodes embed files or create objects normally requiring complicated code into just one line. A shortcode is a coding shortcut reducing effort.

The content we’re adding are two right-justified shortcodes. These are the “Content to Add.”

6. The first shortcode is:

[(bracket) wp-image-refresh (bracket)]

The WordPress Image Refresh Plugin shortcode shows a different random image every time a post loads. The plugin shortcode works for posts, pages, widgets and sidebars. This technique won’t slow down pages or posts. There’s no site drag from global loading.

7. The second shortcode is from a plugin called Shortcode For Current Date. We only show month (F) and Year (Y). This line is tinted a gray color #666. This creates an automated “evergreen” freshness effect.

Updated: [(bracket) current_date format=’F Y’ (bracket)]

8. We also add a plugin called WP Author, Date and Meta Remover to strip the normal WordPress default meta information from all pages and posts. We don’t want content perceived as stale because of a date stamp.

9. We now go to the left sidebar WP Image Refresh > WP Image Refresh and add 6 custom, 8-bit PNG, hand-optimized images. An image is uploaded to the media library and selected. The PNGs are 524px × 214px. The extremely light weights vary from 6k to 9k. The images are hot linked to a destination page with a URL.

First Image Example: 8-bit PNG rotating image for PagePipe blog posts.

Determine the post’s main-column width. When rotating full-page-width images, obviously the dimensions are different. Every theme has it’s own unique column width. Calculate these values by adding media. Use a test feature image and make a measurement using a screen-ruler utility or browser tools. Then remove the browser-resized “dummy.” Then manual resize your images to match.

How it works:

After following the above steps, one different pseudo-featured image appears at the top of body text on all blog pages. Images change for each post. Occasionally, images may repeat. They are random and not in sequence.

These aren’t *real* featured images. They aren’t linked to other theme constructed pages as thumbnails for grids, blog listings, navigation, or related posts. This is a limitation we can live with on most sites.


The UX navigational benefit is perceived variation during page or post changes. There are speed benefits, too. The images aren’t optimized using WordPress automated cropping. That can do weird things bloating image weight.

8-bit PNG, line-art illustration is almost always faster than compressed JPEG photographs. When using JPEGs, the goal is a compression equivalent to the Photoshop quality setting of 50 to 60. The WordPress default is a quality setting of 82 and yields the equivalent of Photoshop 50Q. This is “The-standard-of-goodness” used by When hand optimizing, we use Linux GIMP with a JPEG-compression quality setting of 70. We don’t use aggressive settings on client sites.

Onsite link: Using image optimizer web utilities for improved speed.

Using 6 customized images reduces the overhead in your WordPress media library. This reduces the server load when backing up your site. Automated shutdown happens when you overrun shared hosting capacity. But now you don’t have 100s of featured images. Only six.

Also, using fewer images means the browser cache is likely primed with an image from other post loads. Primed images are instantaneous loads. This repeat-view speed benefit isn’t reflected in online tests.

Using image-optimizer web utilities for improved speed.

When you’re working hard to optimize a website, you learn that image file size is an important detail for speed. Many online publishers haven’t the time to learn Photoshop or other image editing programs. Automated optimizers are the next best thing and can speed your production. But which ones do a good job and how good is good enough? Big questions.

We’ve tested some nice online utilities for optimizing images, but only three stand out. These can be as frugal as optimization done in standalone programs like Photoshop. Don’t just ignore image speed issues. Sadly, halving the image weight on your home page will not make it load twice as fast. There are many other things to take into consideration. Nonetheless, image size and weight are the biggest contributors to site bloat. It’s worth your time to learn a few compression tricks.

Images are the biggest lump of sluggish web page weight. Everyone hates slow loading pages. Automated image workflow is an effortless way to improve user experience. Without difficulty, you can achieve the right balance of image file size and best quality. Optimizing images helps reduce your website visitor’s frustration.

We did a simple test of online optimizers with just two images. We weren’t interested in the nuances. We only wanted to know if the optimization tools met a minimum processing criteria. We describe our goals below under the section “PagePipe’s quick-test criteria.” Here are the two test images:

Test Banner JPEG Image

trees-rocks.jpg, weight: 122.2k, dimensions: 1024 x 300 pixels

Test Camera Output JPEG Image

wood-test.jpg, weight: 5.5MB, Dimensions: 4378 x 2916 pixels

PagePipe’s recommends only three web image-optimizer utilities.

Please try the 3 image utilities and see if they have value for the web file sizes you use.

1. DynamicDrive Online Image Optimizer

DynamicDrive image results are displayed by Quality-10 increments. We liked this simple, still-image visual feature a lot. DynamicDrive had an upload size limit of 2.86MB. That is too small for images straight out of a digital camera. We couldn’t upload the larger test JPEG because it is 5.5MB. We still like this browser-upload utility best for most web work because it shows all ten results for comparison. No fiddling with controls. Visual selection is easy.

DynamicDrive Results:
17k, -85% savings

2. Optimizilla

Optimizilla Results:
11K, -91% savings

121K, -98% savings

3. Web Resizer

Web Resizer Results:
19.29k, -83% savings

63.94k, -98% savings

Size limit = 10MB, 2,000px wide, Cropping or resize option.

PagePipe’s quick-test criteria.

      • We’re only interested in compressing photograph files. The online compressor is best if it works for two different samples: a large digital camera file and a smaller web banner. Both JPEG images. Specifications for test images are below:
      • The software needed for image optimization must be only the browser. No other programs or plugins; such as Adobe Air, Windows Only, Flash, etc.
      • We want to upload the test images by browsing or drag-and-drop.
      • We consider it a bonus if the browser imaging tool has an image resizing option.
      • The tool must work. Seriously? If it fails, it’s off the list.
      • We’re only interested in [tipso tip=”a type of compression where a certain amount of information is discarded.”]lossy compression[/tipso] for the most page-weight reduction.
      • We prefer optimizers with reduction control in steps of 10-increment quality settings. 90Q down to 10Q range. We pushed down to 10Q for testing when possible.

The 7 random losers.

We’ll share these just so you don’t wonder if we tried them or not:
We’ve used before. It’s part of Yslow performance measurement tool by Yahoo! It never makes much of a difference. There are better alternatives. Many swear by this method. We don’t think it’s that cool by comparison. On the test, it failed to upload the images. We tried again – and gave up. We didn’t care that much.

What? Oh, oh! is gone. Abandonware. Read about it. >

Oh, Boy! WP Smush takes it’s place. Finally, got rid of the Bad naming!
Download >
We think Kraken has potential with the WordPress plugin version. But the online browser version doesn’t allow you to make quality settings. Our trees-rocks test image only compressed by 12.4%. Unimpressive. And the larger “wood” image wasn’t allowed. They said for that size we’d have to upgrade to Pro version with an upper limit of 16MB. Forget it!

RIOT (Radical Image Optimization Tool)
For Windows only. Disqualified.

Puny PNG
FAILED uploading and gave an error message.
“Sorry, there was a problem with the image(s) you are uploading. Please ensure your image is a supported format and complies with your quota.”
Our images worked fine everywhere else? Go figure. Yes. We tried more than once.

Shrink O’Matic
Desktop app for Adobe AIR. Disqualified because it requires more than a browser.

TinyPNG — 5MB limit
Has a 5MB limit and made no difference. “Zero Percent” change on the trees and rock image. didn’t cut it either. trees – rocks only compressed by 24%. That’s not good enough for us. The “wood” image was better (-72%) but no resizing option. It wasn’t of much value for those big, fat digital camera images.

Free PDF Download – PagePipe Guide to Image Optimization

72k, 8-page, 8.5 x 11 inch, printable b&w

Slow speed is caused by images that aren’t optimized. It’s a trade-off between file size and image quality. Learn about proper image optimization. Heal the Internet.

72k, 8-page, 8.5 x 11 inch, printable b&w

There is no one-size-fits-all solution for image optimization. No common formula. That’s why robot-plugin optimization is usually too conservative and overcautious. They don’t compress enough. The human eye is the best judge of how much is enough. Every image is different in potential gain. Only optimize on your 10 most important landing pages. You don’t need to worry about every image.

Even though you could squeeze an additional 200k of image weight from the homepage, it wouldn’t make significant difference. Why? Browsers load images in parallel.

How Live Chat affects mobile speed.

Live support is a web service for communicating with text in real time with web visitors. Third-party live-support applications are commonly used to provide customers information. It’s also called live help or live chat.

People don’t want to chat … they want answers.

LiveChat helps you support customers in need of help. It allows you to increase your sales by engaging the right prospects at the right time as well as by generating a ton of new leads. – Source

Is that self-serving statement by LiveChat, LLC about “tons of new leads” true? Popular popup-style live-chat are often found on WordPress home pages and landing pages.

Does live chat really boost conversions? You’ll find plenty of affiliate articles answering, “Yes.” Promises, promises. Face it, live chat is an overhyped and overused fad to sell plugins and API services. Making money isn’t bad. Lying is.

Do you have live chat activated on your Home page? Are you really getting benefit from this heavy feature?

For example: Live chat heaviness typically is 9 requests and around 350k of page weight added. It may cost $17 per month or $180 annual overhead. Does live chat really contribute to profitability? It may be your heaviest web asset.

Site owners include wasteful live chat – even when it’s ridiculous presumption.

Sites using live chat often try saving money on a per-interaction basis. A chat agent handles three to six conversations at once – while a telephone agent handles just one.

Because you have cool technology doesn’t mean it provides a better user experience. Didn’t mother ever tell you, “Just because you *can* doesn’t mean you should?”

Live chat is bad when you’re using a free or low-quality chat provider. Your page loads slower. Or may not load at all during chat-provider downtime. Before-and-after speed measurement tell how bad the impact is on performance.

Chat technology takeover hasn’t lived up to the marketing gimmick hype.

Live chat on home pages and landing pages is intrusive. It interrupts the user experience in the same way popups do. It distracts attention from page content. Pages have content for a reason. There’s a message to deliver. Chat popups distract.

If users can’t find what they need, without the help of live chat, then there’s something wrong with your site. You need to fix it, not chuck another slow-loading gizmo on top of it.

Does live chat feel trustworthy? It reminds us of gimicky slick tricks. Herd mentality strikes again.

Live chat only works if there’s someone caring behind the software to respond to customers.

Some sites use live chat because their forms suck. Some think live chat is “better” than web forms. There must be something wrong with your form design. Fix your form before adding live chat.

Improve your forms instead:

  • Use form elements correctly.
  • Remove unnecessary fields.
  • Remove unnecessary clicks.
  • Improve mobile performance.
  • Stop using CAPTCHAs.
  • Take it easy on validation.
  • Stick to single columns.

We recommend not using live chat because it ruins UX and performance speed. It’s also indicative of sloppy marketing communications. Improve your content instead.

New Research: 21% of Companies Fail to Respond to Live Chat Requests

Baked-in font bloat.

WordPress themes often come with two icon fonts employed. Genericons is an open-source icon font to replace image icons. Genericons fonts have a page weight of 25k to 100k page weight (average 75k). Why different weights? We’re not sure. But we know it happens. We’ve tested it.

The other font is Dashicons (67k page weight). WordPress uses Dashicon in the WordPress administration control panel. But themes can access the invisible and unused font.

WordPress baked Genericons into four themes: Twenty-twelve, Twenty-thirteen, Twenty-fourteen, and Twenty-fifteen. Many other theme developers are in love with the font. We have a low opinion of the icons because it requires hacking to remove. They are dead weight. Just because you can do something “excellent” doesn’t mean you should.

Many designers who care about load time wish they could disable these icon fonts. It’s possible to do – but requires “unorthodox code exorcisms” via FTP. Risky business. We’ve messed with it and it’s not fun. We wish there was a plugin for disabling font icons.

The problem is, when calling even one single icon symbol from your theme, WordPress loads the entire icon set. In our testing of themes, we’ve seen 30 percent of Genericon loads produce 404 errors.  The server can’t find the requested icon font. That’s a big fail because 404 errors cause page-load delays. They can be worse than loading the heavy font itself.

It’s possible to subset icon fonts to accelerate load times. Sub-setting creates a font that only contains the characters you use. This can reduce icon page weight. Fontello Font icon generator is an example of online automated icon sub setting. Genericons and Dashicons are not in the collection – yet.

These are the freeware icon sets available on Fontello:

  • Fontelico
  • Font Awesome
  • Entypo
  • Typicons
  • Iconic
  • Modern Pictograms
  • Meteocons
  • MFG Labs
  • Maki
  • Zocial
  • Brandico
  • Elusive
  • Linecons
  • Web Symbols

If your WordPress theme carries an icon speed burden, perhaps you should give in and leverage it as a graphic asset as best you can. You can adjust the size of the icons via css or, when using a shortcode, the size attribute. Default size is 16px.

To make this functionality happen on post, pages, and widgets, just use free Genericon’d plugin. It enables easy use of the Genericons icon font set from within WordPress. You can insert icons using either HTML or a shortcode. But remember 25k is equal to 12 to 25 two-color, 8-bit PNG images. Is it worth slowing down every page on the site with font drag when you could have just one page bear the burden of a PNG image? One tiny 16 x 16 pixel Twitter bird icon font symbol can add 39k weight to all site pages!

Of 167 free WordPress themes we examined,

25 Genericons 25k, 7@ 404 errors

25 Font Awesome 77k, 2@ 404 errors

7 Dashicons 67k

2 Glyphicons 33k

2 themes used both Genericons and Dashicons. This is overkill.

3 Misc:
Eleganticons 48k
Elusive 61.8k
G.F. icons 16.9k

TOTAL 64 of our theme sample used icons (almost 40 percent). It’s an official bloating trend!

Evergreen Content: Expired dates diminish site credibility.

There are times when date stamping your website or it’s content can be good – or bad. Say, you wrote an article five years ago and it’s still relevant today. You may prefer to not reveal the original publication date. A date would skew audience perception that the material is irrelevant or stale. Even when it isn’t.

Evergreen content is relevant long past its publication and stays fresh for readers. It has no expiration date or shelf-life. It retains long-term value. It can be reused and adapted. Informational articles and How-To’s are usually considered Evergreen.

expiredA lightweight plugin alternative is installing WP Old Post Date Remover. This free WordPress plugin removes or hides the date of a post or page. We prefer our articles appear timeless – as in classic. We don’t want to look stale or erratic in our posting schedule – even when we are! If visitor’s see a decrepit post or copyright date, they can think the site is abandoned. Expired dates diminish site credibility.

We also like fast-loading: WP Author, Date and Meta Remover, Active Installs: 40,000+, 4.1k download size, 26 percent retention rate (high).

And another heavier plugin: WP Meta and Date Remover, Active Installs: 60,000+, 932k download size, 27 percent retention rate (high).

Note: If you’re using GeneratePress theme, the ability to remove author and date is built-in.

How to add a computer copyright date stamp.
Jonradio Current Year and Copyright Shortcodes is a perpetual copyright plugin for WordPress. It provides Shortcodes to display the Current Year and/or a Copyright symbol. One shortcode inserts the © Copyright symbol, a blank and the current year. Place this plugin’s shortcode almost anywhere. We used a footer text widget.  You’ll always appear fresh and up to date.

Just make the page feel “fresher.”
One more plugin trick to consider, is “Date and Time Widget.” This is a simple lightweight plugin (9k compressed download) that can put a date (and/or time) in your sidebar or footer. The date is derived from the internal computer clock of the user’s browser computer. This old trick makes the page look “fresher” as if it was just updated and hasn’t expired.

The Date and Time Widget plugin has the choice of formats for both date and time. And you can customize the font, font size, text color and background color.

To write comprehensive, in-depth evergreen content, it should be at least 2,000 words long. When crawlers crawl the page, they view it as highly topical, when covering the content title well.

We frequently update our articles. We then want  a fresh publication date. When making changes – if you just press the publish button – it won’t alter the publication date. You then must manually enter a date.

Ah, there’s a plugin helper to insert today’s date and time for you. That helps  keep posts “evergreen.”

Date/Time Now Button
Active installs:
Zip download size:
All Time Installs: 10,191
Retention rate: 19.7 percent (good)

Date/Time Now Button is an older plugin but still works fine. Here’s how:

First: Click on the Edit text link.


A little “Now” text button then appears.


Click it and the new date is then loaded. Then press the “Update” button and it replaces the old date.

Two other handy plugin auto-increases text years and numbers for evergreen content:

Magic Dates
Active installs: 200+
Zip file size: 1.7k
All-time downloads: 1,477
Retention rate: 13.5 percent (low)


Years Since
Active installs: 10+
Zip file size: 2.5k
All-time downloads: 72
Retention rate: 13.8 percent (low)

A few other plugin tricks while working on the backend when you have a lot of posts:

Admin Post Navigation


Search Exclude
We use to this plugin to exclude some content from onsite search. It may be password protected posts – or something like testimonials and quotations. The plugin keeps these from appearing in search results. Nice.

No audio

Updating publication date improves clickthru from Google listings. Users click on recent Google results. A published date from 2013 appears stale. One from a couple of months ago seems fresh.

Change Last Modified Date

Bulk Post Update Date

Post Date Time Change

How to properly crop thumbnails for UX and speed.

Thumbnails are a scaled-down or cropped representation of larger pictures. They help in recognizing and organizing images. Thumbnails are used on web pages as separate, smaller copies and linked to the original image or another page. This distributes page load, reduces bandwidth, and speeds up load time. Thumbnails serve as web signage or navigation links.

Proper cropping is usually a more important issue than quality settings for thumbnails. In other words, compositional interest or focus provides viewer recognition and motivation to click. Rather than create a smaller dimension image copy, some web designers cheat by making the browser shrink thumbnails with HTML code. This is not good web practice but sometimes unavoidable. This results in no saved bandwidth. Visual image quality from mathematical resizing is usually poor. So both quality and speed suffer.

Graphic dimensions specified in HTML code are not always the same as the actual image dimensions. This forces the web browser to calculate the difference before displaying the graphics. With the large number of graphics on popular masonry and image grid pages, this adds significantly to the download time.

No image scaling on the fly. Thumbnail “math” can slow down a page. When pixel versus code dimensions mismatch, the web browser must recalculate the page graphics. That takes a long time. And it clogs the pipes. Make sure image dimensions match your code for a faster-loading page with better-looking images.

Brad’s portfolio example. A grid thumbnail layout for navigation to individual posts. No captions are used. Captions appear on roll over. This makes for a more geometric, Bauhaus grid.
BRad's thumbnails were custom built at 385 pixels square. They were added as the feature image. Normally, the large feature would be shown on the post page and the thumb would be a mathematical resize in the browser of the original. This means the thumb would weigh considerably more.
Brad’s thumbnails were custom built at 385 pixels square. They were added as the feature image to posts. Normally, the large feature would be shown on the post page and the thumb would be a “mathematical resize” in the browser of the original. That means the thumb would weigh considerably more and wouldn’t look as good. The large image was inserted into the body area instead. We used 2 images instead of one but kept the Home page loading very fast.

Displaying a relevant crop instead of a full image helps maintain recognizability or emphasis. For example, when thumbnailing a full-body portrait of a person, it may be better to show the persons’ face than a small figure.

Kathy’s case study. This is a masonry grid style with captions extracted from the post content. Using the default WordPress crop.


Better thumbs are hand-built in an imaging editing program.
Better thumbs are hand-built in an imaging editing program. Customized cropping and optimizing.

WordPress automated cropping of thumbs can be pretty bad at times. Above: On the example van thumbnail, the automatic crop cut off the most important detail: the graphic wrap above the wind shield.

We didn’t let WordPress create the thumbnails. Instead, we cropped and optimized them in a desktop imaging program. This reduced the weight by 5X. The featured images are “zoomed in” for detail and exclude type. This is because, at small image sizes, text becomes unreadable and people will squint to try to read it!

WordPress automatically produces preset thumbnail sizes. It also applies unsharp mask to them. Sharpening images restores and improves internal edges. Humans do pattern recognition based on edge shapes.

Default Media Settings
Thumbnail, 150 x 150 pixels
Medium, 300 x 300 pixels
Large, 1024 x 1024 pixels

Images are centered and cropped to these dimensions. These three image sizes, as well as the original full size, are the only ones available when you edit a post and insert media. They can be changed in the WordPress administration panel under Settings > Media.

Media image sizes allows you to change the maximum dimensions of images that are displayed on posts and pages. When setting a thumbnail size, the image will be cropped and resized to the setting. Medium and large images will keep the dimension proportions, taking the maximum width and height into account.

Set large images at the theme’s screen width for full width pages and posts, and medium images at the width of a content column.

Regenerating Images
Any time you change your WordPress default image size definitions, they will only apply to new uploads. All your existing images remain at the original dimensions. There’s a great plugin that will go back through your posts and regenerate these new image sizes for you.

AJAX Thumbnail Rebuild lets you select which sizes to regenerate, and will work through your archive. The plugin won’t resize images already inserted into posts. Regenerating images makes new sizes available to use in future pages. You can’t bulk edit the size of existing images that you’ve inserted already.


To do that you need to use Media Replace plugin. It’s still one-at-a-time work.


Even if you’re no longer using a certain size, old images will remain on the server. WordPress won’t delete unused images for you. We don’t like wasting server space. The Image Cleanup plugin will help by scanning and giving you the option to delete unused images. [This plugin has been retired. There is a plugin called DNUI (delete unused images) that is very dangerous and can delete all of your media files with one button click. Be careful!]


My-Eyes-Are-Up-Here plugin helps you control how WordPress crops thumbnail images. Finally, a WordPress plugin to help with cropping by using facial recognition or a user-specified hot spot. It’s a step in the right direction. When WordPress generates thumbnails, you run the risk of a bad image crop. This plugin remedies most bad photo crops of thumbnail images.

If you have uploaded a full-portrait image of a person, WordPress may center the image so you end up with just a headless person.

Original image of a model in a plum-colored dress.

Or let’s say you have a landscape image, with a person’s face on the right hand side, but you need it to display in a square thumbnail. You’ll end up with half a face as WordPress centers the image.

Original face.
Original face.

With this plugin, you can either use the automatic face detector or if you want even more control, you can manually add hotspots.

Navigate to your media library then click on the image you want to edit. Use the detect faces or edit hotspots option to edit your image. You’ll see thumbnail previews when you’ve applied these edits, when you’re happy hit update. Pretty simple.

You can increase or decrease WordPress JPEG image compression. WordPress used to automatically compress JPEG images to 90Q. They now compress to 82Q. Because JPEG quality settings are non-linear that setting actually produces a big reduction in file size and the quality is visually the same. If you’d like to change that default, paste the following code in your theme’s functions.php file:

add_filter('jpeg_quality', function($arg){return 100;});

Setting it to 100 would mean that WordPress would compress the image at its highest quality. We don’t recommend that setting except for photographer portfolios (maybe if insisted upon). testing online recommends compressing images between 50Q and 70Q in Photoshop save for web feature. 82Q is the same equivalent in WordPress.

We don’t use the code method any more. We make our setting using Imsanity plugin. We usually set the JPEG compression quality to 70.

Plugin tricks to personalize WordPress posts.

Why would anyone want to use a plugin to add a signature to the bottom of a post? It’s marketing communications touchy-feely stuff. The logical explanation isn’t that easy and not everyone “gets it.”

No one really explains the cosmic reason why signatures are “good” practice. So explaining from a marketing standpoint could be better. It seems so obvious to signature-plugin authors that they forget not everyone can see a benefit to an automatic signature.

It’s always been our recommendation for clients to add a personal signature on About pages — or what we sometimes label as Interview pages. The client always asks, “How come?”

These special pages with signatures (for us anyway) are in a FAQ format. For some reason, search engines think these are important pages. It could be the keyword “interview.”

Anyway, a signature (even a fake one – like a calligraphic script font) in blue ink on white background has a “feeling.” (Blue seems more pen like than black – again silly human memory stuff). It’s more intimate and experiential. It’s marketing voodoo. People consciously know you didn’t sign the screen – but they have a feeling of connectedness. They secretly wish you did sign each post.

Like a personal letter from a family member or friend, it’s subconscious psychological weirdness triggered by a scrawl onscreen. But it works. It’s endearing. It seems friendly. Perhaps because it appears handcrafted instead of by machine.

It definitely has to do with memories. Just like color combinations do. Or the smell of crayons. Or old songs on the radio. Why do those take us back in time? And make us smile or cry?

We could see creating a blog where we wanted that personal feeling on every page. Then we’d want a plugin so we didn’t always have to repeatedly place an image file at the end of each post.

Each post would then become a personal message to the reader (like a personality).


Above is an “interview” page we designed for a photographer. His signature is essentially his logotype and part of his branding. It’s at the top of the scrolled text. But most frequently, we put them at the page bottom. Here the signature almost serves as a caption for his photo.

His signature is quite distinctive. We humans can tell the difference in those small quirky details in a persons handwriting. We actual recognize the patterns and can say, “This note is from my cousin Bill. I’d recognize his sloppy handwriting anywhere.”

There are several ways to solve this automated signature problem. But not worth it if it adds one second to the load time. We didn’t do any speed tests.

We did a search on “Why put a personal signature on your WordPress blog?” and got a listing of various plugins and how to edit functions.php files that do this stuff. But no one explained why post signatures are a good idea.
156k download, Requires: 3.0 or higher, Compatible up to: 4.1.11, Last Updated: 1 year ago, Active Installs: 3,000+
The screenshot of the controls looked overwhelming. It wasn’t clear if an image file is included or if it’s just text.
179k download, Requires: 2.5 or higher, Compatible up to: 4.4.3, Last Updated: 3 months ago, Active Installs: 800+
Has integration of TinyMCE. This allows the addition of copyright, links, images, or ads at the bottom of pages or posts.
41k, Requires: 4.0 or higher, Compatible up to: 4.5.2, Last Updated: 2 months ago, Active Installs: 20+
This plugin is brand new for 2016. The author said, “All I wanted was to be able to select an image for my user, and set the alignment and size for the displayed image inside the blog post.” He felt the other plugin offerings were too bloated. We agree. To add your signature image, go to your profile page in the WordPress dashboard and, at the bottom, you’ll find a new section for selecting an image using the standard WordPress media upload screen.
4k, Requires: 2.5 or higherCompatible up to: 3.5.2, Last Updated: 3 years ago, Active Installs: 1,000+
Appears old, abandoned and suspicious of calling offsite resource. It’s too small of file size. Did you ever think you’d hear us say that?) Too scary to use.
69k, Requires: 3.1.2 or higher, Compatible up to: 3.6.1, Last Updated: 3 years ago, Active Installs: 1,000+
From the WordPress plugins site: “for those who have multiple authors on a WordPress site and want to show author information at the bottom of every post for each author like a signature. This can include an image, a short bio, a link to the author’s website and their social profiles.” This is overkill for us.

Based on this quick information, the plugin to use seemed pretty obvious: Danix Author Signature. It was fast and easy and didn’t add any drag to our page loads.


Building a PDF library the right way.

We’ve done library sections on websites before. They are popular (meaning they are visited from search engines). But success is contingent on several things for SEO (search engine optimization). These things are details improving what is called findability.

Findability means visitors can easily find what they are searching for on the site. And it also means being able to find relevant information from offsite (from search engine listings – like Google).

So why this tutorial?

The newsletters that are frequently on websites are not findable. They are invisible. In fact, they aren’t listed on Google.

Our goal is to get every single page and document listed on Google. WordPress will handle most of that problem. But other things can help.

Why are some PDFs not listed? They aren’t MACHINE-READABLE. They are image files. If you try and highlight (select) the body text with the cursor, it can’t be done. That means search engines can’t read the text either. The files haven’t been saved with embedded text.

Do PDFs rank well when they are machine readable? The answer is “yes.” Engines can crawl them just as well and fast as regular old web pages. The PDFs rank sometimes even better than HTML web pages. Search Engines are looking for credible content. And PDFs have high credibility. They take longer to prepare. They are less disposable. They have a longer shelf life.

A library directory is a good thing. But library production requires a little more tender-loving care (process rules of how things get done).

Here’s what that means:

1. Save a PDF with embedded text.

2. Optimize the PDF for fast download.
There are various ways to automate optimization (file size reduction) with plugin or online tools. PRESS quality PDFs (300dpi) are too fat for downloading. Even PRINT quality (150dpi) can be marginally fat. SCREEN quality (72dpi) can ruin images. So some experimenting is required. Visitors won’t tolerate slow downloads. And heavy PDFs open and scroll too slow. Fat PDFs say, “We don’t care.”

3. Build a thumbnail image for navigation.
We can’t use the regular WordPress thumbnail function on PDFs. It works on Jpegs and PNG files. So we build the thumbnail by opening the PDF in an image editing desktop program. And then just save the cover page as a Jpeg image file. We then upload that to the WordPress image library. This will become the link to the actual PDF.

4. Add the thumbnail image to the library page.
Editorialize the image link. This means descriptive text is added that tells what sort of content is in the PDF and why the visitor would benefit from downloading it. (Search engines read this stuff, too). This text is called information scent. It cues the reader that they are on the right track. The text should state that the download is free. Also, the file size, dimensions, color, and page count should be stated. This information helps them know how long they will wait when they click the link. Visitors don’t like surprises and are apprehensive about pressing any “mystery buttons.” Consider this advertising the PDF.

So there are a few hoops to jump through when preparing a library. Based on our experience, do we think the trouble is worth it? Absolutely. Library sections are popular with both people – and engines. They are a good draw. Some people will drop into the site right on the library page – bypassing all other pages.

We also encourage harvesting content from the brochures and make HTML entries to the blog. This redundancy is perfectly acceptable because people like information delivered in different ways. They have a choice.

Just a note: These kinds of pages with many thumbnails (also called catalog pages) benefit from a WordPress lazy-load plugin to keep load time fast. One we recommend is Rocket Lazy Load. Lazy loading delays loading of images in long web pages. Images outside of the browser viewport (below the fold) are not loaded until the user scrolls to them.

For more about automated PDF optimization, read our article: Polite PDF Downloads

Should I disable Font Awesome and Google Fonts for improved speed?

There’s not enough time to test all new free WordPress themes for speed potential. So we set easy limitations to reduce our workload. We look for signs or clues of author sloppiness and wasteful shortcuts.

The ideal speed theme is a download file of under 1M-compressed. This is our arbitrary threshold and indicator for speed potential. Once decompressed – and with the demo screenshot subtracted – it will total between 1M and 2M. These generally create 500-millisecond to 2-second page loads. And that’s on cheap, shared hosting.

It’s plain many themes above this 1M-download cutoff may be fast. But we don’t want to mess around searching. It’s also rare for a theme to make written guarantees. Nothing about speed, page weight, or even number of HTTP requests. Many imply they’re fast. But they don’t give specifications.

A 1M cutoff drastically reduces the number of theme candidates. This is a quick-and-dirty filter. It prevents you from wasting time on themes with low-speed potential. The package size is indicative of the theme author “caring” about performance.

Note: A lite theme means it has crippled features or stripped down from the “pro” paid version. Lite doesn’t mean lightweight.

The nine free themes listed below all have commonalities. We won’t put them on any preferred list. Even though some are attractive. We’re using them to prove some font facts. For us, they’re toward the bottom of the speed barrel – but still pass the 1M limit barely. They have 1-to-2 second page load potential. They aren’t as forgiving as other less “feature-rich” themes.

Why aren’t they so good? They have built-in site drag. They weren’t authored with speed as a priority. That’s indicated by the frivolous, slow “non-features.”

What are non-features? Unnecessary bloated decorations. Expressive aesthetics like animation. They all use cloud-based Google fonts. And they all have Font Awesome icon font onboard. Four use sliders. Sliders activate JavaScript and are heavy and easily abused. (Read our article about sliders and why they are bad for speed.)

But in spite of these infractions, the themes still pass.

The Font Stacks

We ask ourselves, “How much speed difference does font baggage make?” So we did some testing with the help of free plugins.

Asset Queue Manager
This plugin is almost a secret. Only 900 installs. It’s used for hardcore performance optimization. It allows us to switch off (dequeue) Font Awesome. Of course, it’s used for dequeuing other scripts, too. But we’re just using it for our Font Awesome experiment.

Font Awesome is a font and icon toolkit released in 2012. And quickly became a crutch for theme authors to create “cheap art.” Twenty percent of websites with third-party fonts use Font Awesome. We find it on half of new theme releases. It ranks second place after Google Fonts. We hate it because the lightest version uses 70 to 80k of page weight globally. And it has no websafe system font fallback like when using a CSS font stack. That means if we disable it, the site may look broken. Not always. Just especially mobile pages.

Frequently, Font Awesome loads on every single page whether there are any icons used or not. That’s bad for mobile bandwidth usage. Font Awesome may be loaded in parallel with other page assets. That makes the drag invisible to users. So why do we even care? Requested font data is still transferred on each page. And that costs someone time and money.

The inclusion of Font Awesome is a solid indicator of a slow theme. Authors who care about speed don’t include it (Tiny Hestia, Astra, GeneratePress, and Twenty-seventeen default theme are good examples) . They let the site owner decide to install it with a plugin if needed. Like Better Font Awesome plugin.

Our other beef with Font Awesome is that only three icons are traditionally used. These are:

  • the magnify glass for search fields
  • the mobile navigational “hamburger”
  • the up-arrow on top-of-page links

(Also social icons. But that story we’ll save for another day.)

You could make 70 PNG image icons with the same total weight – or less – than Font Awesome. It’s equal to a hero header image. We’d rather not see any icons – either font or image. Overused and boring.

It’s possible for a theme to load Font Awesome – and then a plugin may load it again, too. This duplicates the global load. Doubling the additional page weight by around 150k. Wow. That sucks.

Is it worth removing or dequeuing Font Awesome? Nope. You might save 50 to 100 milliseconds. But, it usually will break something somewhere. Not always. Some theme authors don’t use Font Awesome for the hamburger and magnifying glass. They are merciful. Those authors deserve a medal for going the extra mile.

Is it worth finding a theme that doesn’t use Font Awesome? Yes. We think so. We hunt for those jewels. Remember half of new themes don’t use this iconic boat anchor. (The same statistic goes for unneeded sliders. Half do. Half don’t.) But leaving out Font Awesome is usually futile. It won’t make any noteworthy perceived speed difference in tests. It makes a difference in how much data goes back and forth from server to browser. And if you think that browser caching might help, sorry. Font Awesome comes in many oft-changing versions and flavors. That means browsers probably aren’t storing the right one for your users.

Font Awesome sometimes does weird fluctuations and delays loading by an extra second. Why? Voodoo! Why even take this speed risk?

So does removing Google Fonts make a difference in speed?

External font scripts like Typekit or Google Fonts slow down your site. Typekit is the worst for speed. Websafe fonts are guaranteed to be faster. According to HTTP Archive, as of October 2016, web fonts are just over 3 percent of an average page’s overall weight.

Disabling with Remove Google Fonts References plugin makes an average difference of only 53 milliseconds in our tests. But in the extreme, one theme (Martial-Lite) had a 300 millisecond gain in speed. In some cases, there was no change in speed at all.

The difference in weight is anywhere from 60k to 300k. Again, it’s wasted mobile bandwidth.

Would we delete Google fonts and go with default browser fonts just to save 300 milliseconds? You bet. When we’re working on getting under 2 seconds or even 1 second, that can make a big difference.

Again, there are times requesting Google Fonts will throw a 1-second delay. Just like Font Awesome. Why? We don’t know. Go ask Google. And, of course, the more fonts you call the slower things get. There’s a plugin that combines the Google font requests. Google WebFont Optimizer finds every Google Font request. It bulks them all together. Then your website only asks Google once for the fonts, instead of multiple times.

Finally, there are a bunch of elements that have become something of a standard with modern website design that, while not offensively intrusive, are often unnecessary. I appreciate great typography, but web fonts still load pretty slowly and cause the text to reflow midway through reading the first paragraph. REFERENCE

So our speed recommendations are:

  • Find a 1M or less compressed theme.
  • If it doesn’t have Font Awesome, it’s best.
  • If you can bear turning off Google Fonts, that’s even better.
  • Avoid sliders.

Only about 20 percent of new themes meet these criteria. No surprise.

Another plugin alternative for speed: Google Fonts cause slow external requests to Google’s servers. You can host the fonts locally on your server instead. Hosting fonts locally won’t always make your site load faster. If the font is popular (like Lato or Roboto font) and already cached in a visitor’s browser, those fonts load pretty fast. But a plugin exists to help optimize local Google font hosting. It’s CAOS for Webfonts (11.5k zip download). The plugin decreases page load times, leverages browser cache, and minimizes DNS requests.

If you’re new here, start with our best primer speed articles.

If you’re ready to give your WordPress site wings, here are powerful tools to speed up your site.

Learn how the most popular plugins and ideas waste your time – and hurt web speed. Includes important tips for mobile speed without coding.

Web readability is 16px size with gray #333.

Human eyes have limitations. There’s a theme trend to use light-gray type on web pages. This is not good UX. But designers, who should know better, are setting bad examples. Black on white was the standard  for many years. That color combination is fatiguing when reading large block of text onscreen.

The recommendation is #333 dark-gray on white to reduce harsh contrast. But going lower contrast than #333 makes viewers squint to attempt reading text – even when the font size is 18px. We recommend using browser tools for checking font specifications including color and size. We use FontFinder for Firefox. There are equivalent tools for Google Chrome.

FontFinder type specification tool using Google Chrome.


“An article about how the web is becoming unreadable has been making the rounds. I feel like most designers already know that light gray text on a white background is a bad idea. The article focuses on text color but I think a more relevant issue is font weight – I’m seeing so many sites these days set body text in 100 and 200 weights which were not designed for body text use.” — Jeremiah Shoaf of TypeWolf

How the Web Became Unreadable
I thought my eyesight was beginning to go. It turns out, I’m suffering from design. by Kevin Marks

Look at these websites. They look fabulous indeed but how good is that if people can’t read them?

Light-gray text is fake minimalism.

“Minimalism in web design started as a backlash against decades of interfaces that increased the prominence of so many elements at once that they all clamored for attention and became visually overwhelming.

What’s great about minimalism is the principle of stripping out non-essential elements. In most cases, this is a best practice to follow.

When it becomes an issue is when there is lots of essential content on a page. Having a lot of content doesn’t suit the minimalist approach to design. So the designer’s compromise has become reducing the contrast of those elements so that, at a glance, the page still ‘looks’ minimal.

Yes, low contrast text does ‘look’ minimal, the same way a blurred photo on Instagram can ‘look’ retro. But you wouldn’t blur your website even if it were fashionable. Don’t lower your contrast, either.”Nielsen Norman Group

Easy reading helps learning and enjoyment, so what we write should be easy to understand. Readability is about ease of reader understanding. Text should be inviting. Text depends on content (vocabulary) and typography (font size, line height, and line length).

Readability Plugins for WordPress
An interesting article about web readability mentions several WordPress plugins that help assess readability of body text. The one plugin we feel is most appropriate (because it’s lightweight) is: FD Word Statistics Plugin. It shows word and sentence counts at the bottom of the WordPress editor. Plus a readability analysis of the page or post currently being edited is shown using three different readability measurements. Those are the Gunning-Fog and the Flesch-Kincaid indexes. (Plus one labelled Flesch that we don’t care about).

Various factors to measure readability have been used, such as speed of perception, perceptibility at a distance, perceptibility in peripheral vision,  visibility, the reflex blink technique, rate of work (e.g., speed of reading), eye movements, and fatigue in reading.

Readability and legibility aren’t the same. Legibility is a measure of how easily individual letters or characters can be distinguished from each other.

The average adult reads at the 9th-grade level. It also shows that, for recreation, people read texts that are two grades below their actual reading level.

Four variables give the most reliable measure of web reading ease:

  • Words per sentence.
  • Average grade level of words.
  • Characters per word.
  • Sentences per paragraph.

Readability should be your number one goal. Someone in your company or organization should especially check graphics to ensure they’re readable. This means:

  • No “reverse” (white body text on a colored background, which is hard to read).
  • As few italics as possible (they’re hard to read).
  • Not too much boldface (ditto).
  • Not too much super-wide full-width copy (ditto).
  • No type above headlines (confusing).
  • No hard-to-read colors like light grays. There should be a 30% grayscale differential between text color and background color. We search for edges of letters for character recognition.


Measure onscreen font sizes in pixels using the Firefox browser tool: Font Finder or the Google Chrome browser tool: WhatFont.

6pt, 8px, 0.5em, 50% Sample text

7pt, 9px, 0.55em, 55% Sample text

7.5pt, 10px, 0.625em, 62.5%, x-small Sample text

8pt, 11px, 0.7em, 70% Sample text

9pt, 12px, 0.75em, 75% Sample text

10pt, 13px, 0.8em, 80%, small Sample text

10.5pt, 14px, 0.875em, 87.5% Sample text

11pt, 15px, 0.95em, 95% Sample text

12pt, 16px, 1em, 100%, medium Sample text

13pt, 17px, 1.05em, 105%, Sample text

13.5pt, 18px, 1.125em, 112.5%, large Sample text

14pt, 19px, 1.2em, 120% Sample text

14.5 pt, 20px, 1.25em, 125% Sample text

15pt, 21px, 1.3em, 130% Sample text

16pt, 22px, 1.4em, 140% Sample text

17pt, 23px, 1.45em, 145% Sample text

18pt, 24px, 1.5em, 150%, x-large Sample text

20pt, 26px, 1.6em, 160% Sample text

22pt, 29px, 1.8em, 180% Sample text

24pt, 32px, 2em, 200%, xx-large Sample text

26pt, 35px, 2.2em, 220% Sample text

27pt, 36px, 2.25em, 225% Sample text

28pt, 37px, 2.3em, 230% Sample text

29pt, 38px, 2.35em, 235% Sample text

30pt, 40px, 2.45em, 245% Sample text

32pt, 42px, 2.55em, 255% Sample text

34pt, 45px, 2.75em, 275% Sample text

36pt, 48px, 3em, 300% Sample text

Don’t bring down the Internet with bloated video headers.

Don’t bring down the Internet with bloated video headers. We offer some lightweight ideas- and a free optimized web graphics for branding the WordPress Twenty-seventeen-theme home page.

Save the Internet from slow and destructive Zombie design. Our Promise: You will improve first-time user perception of branding and page speed.

If you cram the Front-page Content Sections with generic stock photography then … surprise! Your Twenty-seventeen Home page is now ridiculously heavy. Outrageous even on a desktop! You can avoid these new theme pitfalls and also take advantage of some great speed opportunities.

Video headers are specially created for branding your Twenty-seventeen theme home page. It takes knowledge, skill, and patience to find – or build – non-bloated visual elements. The hunt for orchestrated, featured images is a huge time sink. We save you time and frustration.

1What’s an “atmospheric” video header? They’re decorative elements – like header images, but with motion. They play automatically, loop by default, and don’t have sound. They work best when paired with a static image for mobile fallback. Motion video is a short, looping background video without controls – except for a pause button which you can easily make more transparent.

Regarding the Twenty-seventeen theme video header, it’s either locally hosted mp4 and mov files or external, hot-linked YouTube videos. But we recommend self-hosting your motion header in the media library and not using video hosted on YouTube. The experience is much better this way. Try it. You’ll see.

2Doesn’t video ruin page speed? Twenty-seventeen theme lazy loads the header video only on desktop computers – and no load at all on mobile devices. Then just the static fall-back image is displayed. Lazy loading means the theme defers video loading until last for user perception of speed. Bandwidth is still consumed. This occurs only on the front page for viewports at least 900 pixels wide and 500 pixels tall. As a safeguard, the maximum video file size is also capped at 8MB. The theme customizer validates that local videos have a supported format, proper file size, or that external video links are to YouTube. The WordPress development team strongly encourages using smaller files. Why? Visitors won’t spend time on big, long videos. It’s a waste of resources. Hefty videos gobble bandwidth. Video hurts performance. And, duh, it causes a Web Apocalypse destroying Internet usability.

Even with an 8M theme cap for video file size, its inclusion on the site’s front page with standard, shared hosting can easily result in your site slowing down. This is due to bandwidth overages or excessive data transfers. Video files put undue strain on both the host and the visitor.

It’s not easy preparing a video that looks good, is lightweight, and loops well. It requires special knowledge to deal with the complexities of meeting a file-size limit so small. That’s what we can do for you.

3How much does your our SpeedHeader demo cost? It’s free! You get a super-fast loading, 16-second video motion header, a fall-back header image for mobile, one optimized JPEG feature-image photograph, and four other color-coordinated, large, home-page featured images that are lightweight GIF files. All visuals are harmonized to work together. Keep reading.

4Why GIF instead of PNG format for featured images? WordPress imposes automated resizing to the PNGs when they are used as feature images. They bloat up to 3-times heavier in weight. That makes them load slower. For unknown reasons, GIFs don’t get the same treatment. WordPress doesn’t touch them. They stay light.

5Are there conditions where I don’t need your demo SpeedHeader? Most site owners have found these graphic accessories a lifesaver. It keeps your website focused, mobile-friendly – and the perception and reality of fast page-loads. Our header will keep your site lean – and simultaneously save the web from certain doom.

6Can I use these free visual assets on more than one site? Help yourself. We don’t charge usage fees. But please don’t resell or giveaway our creative work. Cousin Guido doesn’t like that. Save your kneecaps.

7Does your SpeedHeader help my SEO? Lighter page weight doesn’t improve search engine ranking or visibility. Testing shows that speed affects ranking less than 1 percent. But fast pages do reduce bounce rate, improve engagement, and rescue your user experience. That is equally as valuable as improved SEO. Plus the added sense of being a good, responsible web citizen.

So, do SpeedHeaders hurt my SEO? WordPress video headers do not affect page rank or time to get listed on Google. There is no downside for SEO. And that’s without any SEO plugin help. Good SEO practices are inherent in WordPress.

Headers affect User Experience (UX). That is how people feel when they are using your website. Motion headers fall in the realm of mood. Stock 16-second video tends to be around 3 to 5M in file size – and cost about $19. These double or triple the average 2.3M page weight currently on the web. Slow speed causes user frustration. This degeneration ultimately leads to the Web Apocalypse.

Heavy video slows down the Internet. This causes poor user experience – even with lazy loading. Poor UX is the real downside – not SEO – and it’s why we created SpeedHeader. Our motion header loads fast.

TIP: We use a rocket GIF animation as PagePipe’s header image. It weighs about 300k. Much less than video and it plays on mobile this way, too. Load your animated GIF as one of the static header images. You can also rotate header images randomly in the customizer with each page change. Nice trick.

Intense E-motion – freebie header for Twenty-seventeen theme!

Using faster Unicode symbols instead of Font Awesome for speed.

To be read in modern browsers, HTML/CSS files must be UTF-8 – an encoding scheme developed in 1992. WordPress uses utf8mb4 and is 100% backwards compatible with UTF-8. So what? What does that trivia have to do with speeding up mobile websites?

You can customize your site icons by setting a Unicode font-size, color and text shadows, just like regular CSS text. The name is derived from Unicode (or Universal Coded Character Set) Transformation Format – 8-bit. UTF-8 is the character encoding accounting for 88.4% of all Web pages in January 2017.

When we think of pretty font icons like arrows, hearts and stars, we think of trendy font icon services like Font Awesome or Fontello. Font Awesome is a unicode UTF-8 font referred to as a glyph icon library. You can use it as decoration, logos, or navigation. Because these are webfonts, they cause extra page weight and HTTP requests. Font Awesome and other icon fonts slow down page load times. The frequently add 75k to 100k extra page weight and HTTP requests. That slows things down.

If you are developing a website using only simple shapes, you can use unicode UTF-8 symbols as replacement for font icons. The unicodes are essentially part of your operating system so you don’t need any special library or plugin and you treat them like regular text. For example, to change the icon size, simply change the font-size values as usual.

Detoxify the Web. Make your site fast.

Above is an example of a colorized Unicode biohazard symbol.
Unicode Character 'BIOHAZARD SIGN' (U+2623)

We use a solid Unicode star in our site identity.
Unicode Character 'BLACK STAR' (U+2605)

The trouble with image files as icons.

Using raster-images files to create a menu icon – especially 8-bit PNGs – are faster loading than Font Awesome or Genericon icon fonts that are usually included with many free and paid themes. Image icons can be lightweight but still slow down your site with another HTTP request and time for the image to load. With images you don’t have flexibility over the color and scaling. SVG vector image alternatives are still not faster than plain-text (Unicode characters). Unicode doesn’t require additional HTTP requests and can be made to scale nicely.

The Unicode character for menu icons (“navicons”).

For the basic, three-line navigation menu icon, there are two Unicode characters:
One is the Chinese glyph (the trigram for heaven). It looks just like the “hamburger” navigation menu icon. It’s available as the following HTML entity:

&#9776; <!– Results in ☰ –>

The unicode character for ‘IDENTICAL TO’ (U+2261), is more bulletproof than  the TRIGRAM FOR HEAVEN’ (U+2630) on different operating systems.

The mathematical operator is used in more fonts than the iChing symbol.

Most recommend using the UNICODE character UNICODE U+2261 (8801), ≡ IDENTICAL TO as illustrated below rather than the UNICODE U+2630 (9776) ☰ TRIGRAM FOR HEAVEN which seems to have font support issues on some older Android devices.

≡ Menu

Use ≡ (x2261) shown above, instead as it has better support (96 percent).

Is there Unicode glyph Symbol to represent “Search”


You should use (in HTML) &#1F50D; or &#1F50E;

Or use “Telephone recorder” U+2315: ⌕? It resembles a magnifying glass and seem is included in standard fonts, where U+1F50D and U+1F50E aren’t always.

Or use the ⚲ symbol (encoded as &#9906; or &#x26B2;)

HTML Entity (decimal)     &#128269;

Unicode character information
Left-pointing magnifying glass

Displayed on your computer as: ????

Unicode name: Left-pointing magnifying glass
Alternative names:

Magnifying glass, left-pointing

Codepoint (hexadecimal): 0x1F50D
Codepoint (decimal): 128269

Unicodes are Icon-like, Arrows, Special, Currency, Weather, Pointers, Card Suits, Chess, Math, Fractions, and Roman Numerals.


Symbols gone amok:

How to make the fastest loading favicon for mobile-first speed.

Favicons (or site icons) are a recognizable element used by web browsers. It’s good for memorability and branding. Favicons are for browser tabs (next to the page title), address bars (next to the URL), bookmarks, and windows tiles.

WordPress makes it easy to add a favicon to your site right from the customizer. This is often the recommended method. But it produces heavy image files.For speed’s sake, don’t do it!

A favicon improves site credibility, memorability, and findability for users. It’s easier to find a bookmark with an icon next to it than to read text.

An ICO file allows storing multiple images with different sizes in one file. This is not good for speed or mobile data consumption. Choose the simplest export possible usually 4-bit color depth. You can create ICO files in a photo editor like Gimp. But an online favicon generator is a good option.

In WordPress, favicons are called Site Icons. Since WordPress 4.3, the Customizer has a Site Icon option. For extreme mobile speed performance, we don’t recommend it.

Since HTML5, the PNG format is also an acceptable format for favicons. All major browsers support PNG now. All browsers (even old ones) support ico format.

RED ALERT: If you don’t use a favicon, it creates an unwanted 404 error or delay. So don’t think “no favicon” is faster. The browser waits for favicon loading – forever – or time outs. That’s bad new for speed.

WordPress themes generate 4 favicon sizes when you add a site icon from the WordPress Customizer. This is overkill. An original image uploaded to the Customizer is at least 512 x 512 pixels. WordPress then creates other sizes from that original file:

  • 32×32 pixel favicon.
  • 180×180 pixel app icon for iOS up to the iPhone 6+.
  • 192×192 pixel Android/Chrome app icon.
  • 270×270 pixel medium-sized tile for Windows.

These favicons are in your WordPress media library. If you use three colors in your favicon, all this other image baggage is unnecessary and wasteful. A favicon is not a logo. Use a photo editor like Gimp or Photoshop to design a 16×16 pixel square.

Here’s our method for best mobile speed:

Only 3 colors are in the 16×16 pixel image file – colors you use on your site. Exported the image in Microsoft .ico format. This makes for the fastest loading favicon. We export custom images using free Gimp image processing application offline. Sample colors with a color picker if necessary.

Favicon.ico sample above.

The number of colors and bit depth are what determine the icon page weight. In this case, 318 bytes. A theme often produces two or more icons using the WordPress Customizer. These can weigh 32 to 64 kilobytes (heavy for such a tiny element). This is unnecessary bandwidth waste. Plus over-detailed microscopic favicons aren’t readable or recognizable. Simple and few colors are a better memory cue. This is branding without complex, intricate image files.
Another favicon.ico sample above.
Use BleuT FavIcon plugin.
Find this plugin settings under Appearance > My Favicon * BlueT
This is an old plugin. But works great even with PHP 7.2 – and has zero page weight. We compared all freebies plugins to install a favicon – and this is the lightest. No site drag.
Upload the image using the browse button. It will store the favicon in your media library. Then click “Save this new one.”


This is the fastest way to add a lightweight favicon.

Alternatively, upload the icon to your server root directory via Cpanel file manager. Either method causes the favicon to lazy load last on your page. If you upload to the server via Cpanel, it may take time to appear because of propagation delays. From our experience, the plugin seems to work faster.
If your Favicon doesn’t appear on the frontend right away, use the “F5”  key to refresh the page. If you can’t see it right away, clear the site cache if your using a caching plugin.

Twenty-seventeen theme: a branding and speed problem with a learning curve.

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).
  • Photography.
  • Illustrations.
  • Symbols (including logos, icons, and favicons).
  • Layout.
  • Readability.
  • 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 or 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.

WordPress secretly grows your manual image optimization making image files slower for mobile speed.

That’s right. WordPress undoes your manual image optimization efforts. We use an offline image processor like Gimp or Photoshop for manual image production and optimization.

Few discover this hidden truth about WordPress automated image editing. It’s has an odd and strange ability to increase image files size slowing down speed. It only occurs if you use their photo editor to crop images. When it asks you to crop – “skip” it. That’s usually a better choice if the image is already sized. Uploaded originals are untouched when placed in the media library – unless you resize or crop such as an image thumbnail. Then things grow. Why? Who knows? WordPress looks the other way about this unreported speed problem.

Plainly, this upsizing strangeness isn’t a problem for most site owners or visitors. They don’t care. Otherwise, there would be millions screaming for a bug fix.

GIF is not an acceptable format for photos. JPEG is the better choice.

When you upload an image to the media library, WordPress core builds many mobile-size images for swapping on the fly. This is an attempt at a responsive mobile speed solution.

You as a site owner care more about image quality than the majority of your site users do. Image quality is way down the visitor-frustration list. Not significant. The number one complaint is slow loading pages being “the worst experience of a user’s day.”

Is Retina screen resolution important? There’s almost 1 billion active users of iPhone. And there are an estimated 300 million second-hand iPhone in use.

Retina display is a marketing term invented by Apple. Their primary goal is reducing eye strain when users read small type. Not improving image quality – a fortunate byproduct. It’s all about font-type readability.

There exist circumstances where images must be uncompromising. One is on portfolio sites. The other is with photography showing important product details. Both are instances where you’re selling something that depends upon good image representation. Images then are more important for buyer decision making. Product photo quality affects web profits. In all other cases, users aren’t discerning or are forgiving. They’d rather you build for speed and compromise in the image quality department.

Are you selling something on your site?

If you’re not selling, visitors only need to recognize what the color blob is. That is it. The caption is more important to users than photo quality. But often site owners neglect to use captions for better communications.

Building for Retina images is an exercise in futility.

When you *must* build for high-resolution Retina displays, there’s a superior way. Please read the article linked below. Remember to keep web goals in perspective. Some things don’t matter. Most web browsing today is on mobile devices. But mobile visitor expectation is low in many regards for type-font and image design. That doesn’t mean you’re justified in delivering garbage. But major image effort often has a puny return on investment.


In this article above, we recommend WP Retina 2X plugin. Try it. Test it. But only if Retina-screen compliance is critical.

This novel plugin creates many new alternate high-resolution versions of your images. Another plugin feature is automatic detection of Retina displays. It then loads the high-resolution version of an image rather than the regular one.

WP Retina 2x serves up src-set images which pull smaller sized images off the server – and theoretically decrease bandwidth. – Ian Rance

Only 4 percent of site owners who install WP Retina 2X keep it. That’s a low-retention rate. It wasn’t worth the Retina-resolution hassle even when this plugin made image decisions and production painless. So there’s lots of variable screen sizes. Big deal. Retina-image preparation does NOT have widespread adoption by web designers or developers. It’s perceived a production annoyance (or non-feature) delaying site launch – and project payment.

These three offsite links below may help you make decisions. You have a design choice. You can workaround or ignore Apple-mandated techno-specs. We won’t tell.

For PagePipe’s site, the strategy is not using photography for large headers. We choose the alternative of building custom illustrations for reduced load-time speed. That means using 8-bit GIF and PNG with 2,000×1200 pixel images with reduced color palettes. Those files weigh just over 21 kilobytes.

Where we use featured JPEGs, they weigh under 200 kilobytes. It’s fortunate the big “hero” image is lazy loaded by the default theme.

But the fastest sites on earth have no images. Only a small number of site owners make that choice (about 10 percent).

PagePipe screengrabs are JPEGs. They’re optimized harder than WordPress recommends. WordPress saves images at a compression of 82 – which is the equal to a Photoshop 50. Why is this important? It makes the images pass the criteria – a real speed test owned by Google. It’s most used by professional performance engineers. Not Google PageSpeed Insights for commoners. PageSpeed insights doesn’t even measure page speed in milliseconds. It only produces a weird score. They let you kill yourself for a meaningless 100 A+ while your site still remains a slug.

We build all JPEG images to screen dimensions. We optimize offline with a 70-quality setting (or more when we can). We use free GIMP image processor. We avoid cropping online with WordPress. We save-for-web our 8-bit PNGs and GIFs with reduced color palettes.

We’ve only had one client request Retina-quality images. That’s Steve’s brother, Brad Teare. High-end art galleries using fiber-optic connections were his target market. Speed was a nonissue. But we built the portfolio for both large screen and small screen,  just in case. The galleries asked how he pulled it off. A great compliment. People’s curiosity sparks a speed question, “How did you do that cool magic trick?”

When we have a choice, we choose ignoring Retina specifications. And Retina’s been around for awhile. We may change our policy in the future. But we doubt it.

An unconventional optimization example.

The PagePipe “Start Here” page contains an animated GIF. It isn’t built to the recommended spec of 2000×1200 pixel dimension. Instead, it’s 1132×697 pixels. We let the browser stretch with math and mess with this image. This is bad practice. Dimension recalculation causes small speed delays. So why do it? Because not doing so would produce an even worse super-slow page. Abandoned by users clicking the back button.

We also ran the animated GIF through an online compressor squeezing it’s file size way down. This introduced tons of noise and artifacts into the animation. Do we care? No. Because it’s good enough for average users. It’s noticed by inspector-type personalities. But 80 percent of visitors (or more) are oblivious and unaware of best design practices.

Being perfect in-every-way has too high of cost in time and money. “How good is good enough” is a hard judgment call. Relax your tolerances and standard so you can work on what counts most.


Mobile image optimization.

Image credit: Pixabay

Your Guide to Image Speed Optimization On Mobile

Have you been told you need to optimize your images for mobile? Worried that slow load times, or a bad mobile UX are hindering your sales and conversions? Here are some truths about optimizing your images for mobile — as well as some actionable tips and advice on how to make your mobile site perform better.

Compression & re-sizing is key

One of the most important thing you need to do to your images? Compress and resize them. This will not ruin the picture, as long as you strike a balance between file size and visual quality.

Compression helps improve website performance and speed because it essentially makes image file sizes smaller. Using a plugin like ShortPixel means you can retrofit your image library, even if you didn’t do anything to them when you first uploaded them.

Resizing is just as, if not more, essential than compression. Digital cameras often, very unhelpfully, create images that are very large. Take the pixels down and resize images down to a more reasonable size using a plug in like Imsanity (featured in our review here). Imsanity is actually also a viable (free) alternative to ShortPixel that is limited in its free version.

Image resizing is especially key on mobile — even though modern smartphones are powerful computers in their own right, large images that fill the screen will slow the mobile experience down. You may want to include less images across the board so as to not unnecessarily slow the user down.

Use (trusted) image optimizers

You can optimize pictures for web use by compressing them using Photoshop (not that tricky to do yourself), or you can use some trusted image optimizers that will help you scale the process.

The problem with image optimizers? A lot of them don’t work, and it can be hard to find the best in a bad bunch.

Luckily for you, we’ve gone ahead and tested them against some pretty tough (but fair) criteria. Here are some trusted ones that made the grade.

Ditch the extra plugin bloat

Got an image speed problem? There’s a plugin for that… Or is there?

Don’t jump off the cliff with other lemmings and immediately download fifteen ‘image optimization’ plugins — you will only end up bloating your site’s backend with unnecessary plugins. Third-party plugins are notorious for slowing sites down, and can be a security risk for cyber attacks like SQL injections.

You will also find that one bad-quality plugin can do the damage of a dozen. Bad plugins can actually load down every page on your site (site drag). Slightly counterintuitively, the more popular a plugin, the worse it may actually be for your site! It’s not about quantity — but about quality.

Not sure if a plugin is worth it? Always read plugin reviews, and check how the number of downloads compares with the number of active installs. You want plugins that have good retention rates — it shows they have longevity. Don’t be afraid to install older plugins — they can be pretty reliable, even if they’re not updated as frequently. (Though updates are a good sign — it shows a developer who cares about their product).

Choose the core plugins that you need, always keep them updated, and disable any old ones.

Don’t blindly trust tools

Automated speed tests are notoriously unreliable, and have been exploited by SEOs and digital agencies wanting to sell their digital services off the back of a ‘bad result’. This is often an elaborate hoax to get people to worry about their rankings and invest in SEO.

Everyone’s experience of the internet is vastly different, and few speed tests are able to accurately reflect device experience. So take their findings with a pinch of salt, and focus on the basics:

  1. Good hosting
  2. Compressed images
  3. Well pruned code and CSS files
  4. Essential plugins and features only.

Random spot-checks and usability testing are great ways of finding out more about your mobile experience.

User perception

Too often we forget that websites are the products of layered illusions — and it’s the user’s perception of what’s going on that really matters. This quote from Lora says it all:

“The perception of how fast your website loads is more important than how long it actually takes to load. User perception of speed will be based on how quickly they start to see content render on the page, how quickly it becomes interactive, and how smoothly the site scrolls.” – Designing with Performance by Lora Hogan, p19

Don’t just focus on speed insights that come from tools and backend code — focus on speed in-action. What the user sees is what matters, so focus any speed testing around their experience of the site.

Consider image UX

Come at your ‘image speed problem’ from a different angle, and ditch the images all together! Consider whether they were really needed in the first place.

Take the following three questions into account:

  • Is the image interrupting, rather than contributing to, the user journey?
  • Are images really adding value here?
  • Are the images making the site less, or more, accessible?

Modern designs often push big featured images and hero size images on us; but if they don’t actually achieve a tangible aim: what is the point? Many information blogs that focus purely on copy may not need them at all!

Try to avoid using huge ‘filler’ images on your mobile site — being concise with your imagery is far more important.

Ecommerce product images

When it comes to the sales funnel, product photography is key. So how can you ensure that product images are doing a good job of selling your products, without slowing your site down? A customer doing product research on their mobile isn’t going to thank you (or make a purchase) if the site won’t load.

  • Create product images in-house so that you can control the process, and don’t overdo photography for the sake of photography
  • Images don’t need to have loads of details and props — they can be simple and beautiful
  • The infinite scroll is often favored by users when they’re looking through a product catalogue fast — stick to small image thumbnails to enable this
  • Carousels are bad for conversions, not favored by users, and they look terrible on mobile. Try to avoid pointlessly rotating image carousels (but if you have to — go with these ones). And avoid them on the home page if you can…

Don’t lose sight of the bigger picture!

Yes, speed 100% matters, but don’t just focus on speed and forget about all the other crucial elements that go into a good website, like:

  • Usability
  • Coherence
  • Purpose
  • Accessibility
  • Aesthetics.

Speed is often a by-product of good web development and a good content management system that’s been properly managed and maintained. Don’t neglect ANY areas of your website if you want to make the most of it.

You need to be looking at the user journey, sales funnel, and the experience of using your pages — not just what the speed test tells you. Your users are the best judges of your website — so listen to them.

Victoria Greene is a content strategist and freelance writer, blogging at Victoriaecommerce. She’s proud to say that she’s built a few websites in her time, picking up a thing or two on good and bad web design on the way.

The downside of paid, *premium* plugins.

PagePipe’s goal was adding various full-width images to our catalog page near the top. Not only the column width like with many sliders. We were testing how to put a slider in the featured-image slot. A paid slider plugin didn’t work as promised. After an update – the plugin author couldn’t upload the plugin via WordPress. They wanted either FTP or Cpanel access. We told them, “No way!”

The plugin company then issued us an expiring store credit. We told them that wasn’t good enough. We requested a reimbursement. We told the number of annual visitors we get on PagePipe. We said we’d be reporting our experience. We then got same-day reimbursement. We figured if they could rob us – we could blackmail them. Fair is fair. If you want to know who they are, email us.

Using heavy sliders (and light ones, too) on the home page are a disadvantage. They hog bandwidth and distract precious visitor attention. Appropriate slider usability is not a loss when applied on subpages. You must use selective activation to prevent site drag. If full of irrelevant stock images, you’ve done your site a disservice.

Web assets must add value or have purpose. Adding frivolous assets causing site drag (global loading) is nonsensical.

What’s appropriate slider usage? One good use is displaying a portfolio or a range of product images without links. Or a short, three-panel story is another. And then only if it *feels* right for UX. No links. No hover stops. Fades are best. Nothing whizzing, exploding, rotating, or hurried.

The goal is subtle implication there’s more than one product offering. You need a cue at the page top when the catalog content is much further down. It’s not a solo product page. It’s a catalog page. The slider is for page differentiation and visual cuing. The slider should not contain all product images. Only a representative sample to keep things light.

Usually it’s best not to use sliders for navigation. They aren’t effective (read reference). But we’ve put sliders on many sites for presentation. Even home pages. Why? For the same reason most do it: the client demanded it – and they write the checks. But we also insist the owner dump something to compensate for the extra slider weight. Something heavy like Facebook real-time counters – or a YouTube video – or Google Maps. It’s a negotiated speed deal.

Sliders are NOT dumb and evil. It’s how they’re used in design and communication methods. Site owners are often unaware of the global speed infraction.

Large images are dramatic and people like to look at pictures. Adding large images is deliberate for better UX. But where and when they should appear is the important question and how much they weigh. Is the home page sacred ground? Yes. Don’t bloat it. Build for for fastest page loads. But not always. Some sites get more traffic through other landing pages than the home page. If that’s the case, avoid sliders on those pages.

The inclination is putting the slider on your gateway page. Bad form!

Readable interesting text is always most important – not images. People want to read good text that solves a problem for them. Even if the problem is boredom. With a good picture, they still want something to read to understand why the picture is there. They want words. Even with art: a caption or title does wonders.

We made a moronic and impulsive $25-dollar slider-plugin buy. We got duped and had major buyers remorse. We got a refund only because we’re a technology publisher. We’ll never buy another plugin or theme again (maybe?). We learned a valuable lesson about paid-and-premium offers. Later, we found a free slider plugin (Master Slider).

Is Master Slider a *special* slider? No. (How they can advertise a slider as being SEO-friendly is beyond our understanding!) It’s what it doesn’t do that we like most. It doesn’t cause unnecessary page bloat. It adds 6 calls to the page.  We can live with that. Lots of slider plugins do that. We wanted to test drive this one.

The real kicker for speed is optimizing and limiting the number of images. For example, we intentionally compromised on slider image quality. Four images used (out of a dozen). They’re reduced to half the size – 991×595 pixels. The other large solo header images are 2000×1200 pixels (retina) recommended default size. The smaller slider images then dynamically-resize to fill the full-page width. There’s deliberate visual loss. The low-tech versions weigh around 40k to 80k. The large featured images on individual product pages vary from 150k to 250k.

Face it. Quality on moving images is a low-priority.

The final catalog page weight is 420k with 45 requests. Time to Europe on Pingdom, 1.84 seconds. to Australia, 1.7 seconds. We aren’t using minification on this page because it breaks the ecommerce features. That happens even with paid Woo-commerce. We’re using free Easy Digital Downloads plugin.

We’ll never succumb to purchase temptations again. Lesson learned. Until next time, anyway.

During these experiments, we realized the dangers of Twenty-seventeen Home featured image. It’s added via the customizer. This causes image loading on every single page and post. Even if it’s not visible (suppressed by CSS code). It’s still loaded on the backend. The original image was around 200k. So we tried coding solutions to defeat loading on any page but Home – to no avail. We then decided to junk the featured image. We added CSS code to color the background and added back our rocket logo. That workaround proved simpler and faster for speed.

We recommend using discrete free plugins to build site features.

Why changing your logo won’t save your web business.

Frequently, the website owner (your client or boss) thinks they’re the clone of their audience (their potential or actual customers). Of course, they aren’t. We’re all different and have different perspectives and opinions for many reasons. That’s good. Otherwise, this would be a pretty boring world.

Logos make little difference in the outcome of client profitability. They have other benefits but it’s not money.

“Can you make the logo bigger?” In most venues, a logo really is pretty meaningless – except for the owners who see it as a “flag”. A flag can be good for morale. But a good trade name carries more weight (potent meaning) with a small audience than a clever logo. Then as long as the name is memorable, readable, and pronounceable, it *might* make a difference. For many businesses, a logo is reduced to a mere decorative element. When is the last time you paid for a solitary dingbat?

Dingbats are ornamental or decorative type characters. Dingbats are used as directional signage informing the reader what is important. They can also serve as graphic elements or exaggerated illustration. destroying white space. They work fine as a temporary symbol.

Logos can be fraught with emotional upheaval for the owners and cause unneeded, repeated presentations. “Does it really represent me?” Uh. It’s not supposed to represent that deep of a psychological burden. Arguments and doubt could go on forever with that as the goal.

There are three marketing components needed for success. You CAN succeed with any two –but it’s best if all three are present to some degree. They are: 1) the offer, 2) the market need, and 3) the design. If any two are missing, it’s a sure failure. Notice the logo is not one of the three but a subordinate part of design. In the hierarchy of what really makes a difference, a logo will not guarantee much. Yes, it’s possible to succeed with bad design. It can even be more memorable for the wrong reason!

But if no one needs the client’s product or service, or the price is too high and delivery too long (bad offer) –even fantastic design cannot save the venture. Stupid ideas especially cannot be saved by design (let alone by a logo). Statistically, half of all businesses fail in the first year whether they have everything right or not. It’s a coin toss. Great design will never make up for a flawed business model or product/market fit. Some erroneously think design can be the difference between crushing your competitors, or being left in the dust. Often, it will just suck your new business of its precious limited resources.

Nonetheless, design is a secret weapon giving companies an edge over competitors IF they have a good product and a market that needs it. When we say market, we mean names and addresses –a list of individuals with common needs.

We like an attractive logo. It feels good to own one. It feels nice to own a new, fancy car, too. We don’t invest much money or credence in logos because we realize ideas are disposable sometimes. If the business idea survives it’s first year then maybe it’s time to get out the check book. But you do not need a logo when starting up. You can just use type and maybe a dingbat. We believe in bootstrapping. With little or no investment in your company *identity*, you won’t weep so much if things fail.

Christian: I don’t get excited about logos, because I think the importance of logos is way overstated…except in the case of huge outfits like Coca-Cola, IBM, Apple, etc. Who cares what your logo looks like? Who cares what my logo looks like? Who really cares what San Diego National Bank’s logo looks like? No one.

Steve: Surprisingly, Christian and I completely agree. Logos are overrated and are useless deliverables sold by designers because small-business clients insist on one. It’s usually vanity and pride driven. There are literally millions and millions of logos. For a small company with limited resources, they’re a waste of time, energy, and money. The days of creating a world-recognizable Coca-Cola logo are gone for small to medium-sized companies. It simply costs too much hard, cold cash. I do believe your company name is important much more than a logo and needs more consideration.

Christian: Company name is more important than the logo…but not by much. What really matters is the quality of your work…but even *more* important is your ability to market and *sell*…that’s where it’s at…that’s what will make you successful or not in the crowded arena of design these days. A logo is not going to make any big impression on your customers. As long as it doesn’t look horrible, I don’t have a problem with it.

I prefer heavier font weights because it helps the logo stand out on your web page or in a brochure or whatever. But avoid generic type. If I had to choose between two typefaces in a logo I would go for a heavier weight. For a logo, I would want a more distinctive type.

Steve: I’m always curious as to the goals for a logo.

Christian: As Steve has wondered…what do you want your logo to do? If the answer is…”Just something to put on my stuff because everyone else has a logo, so I need one, too,” I’d say, “OK…this does the job. It’s all you need. Now get started on a more worthwhile project.” If your logo has to do more than that…I’d say…Fuhgeddaboudditt…it doesn’t matter…no logo will do more than that. No logo is going to make customers flock to you…
…stop wasting your brain power.

Steve: This is all true. It shocks designers to hear Christian and I who are designers ourselves say something so radical and unconventional as “Forget the logo drain.” In the end, type compatibility is *practically* insignificant. It will not alter results one iota. Yet, Christian on occasions has insisted we NOT use certain font combinations because they clash and are in poor taste. So continuity does matter to him. I have to call him out on the carpet sometimes. Want to make an adjustment, Christian?

Christian: Nothing to adjust. Yes, continuity matters. And font combinations are very important. Some combinations work and some don’t…peanut butter and jelly works but peanut butter and tomatoes probably doesn’t work…gin and tonic works but gin and coke probably doesn’t. The choice of font combinations is *very* important…and I say this not based on anything I learned as a typographer (I know you were waiting for that…sorry)…but I learned it based on my experience as a graphic designer.

But none of that matters when it comes to the typeface used in a logo. The logo is just a small part of most projects. Very small. Tucked away in the upper left-hand corner of something…or lower right-hand corner of an ad…whatever…and the typeface used in that logo matters not one iota in regard to the combination of typefaces used in the project itself.

See why Steve and I get along so well? Ha ha ha…we are like evil twins…we keep each other alive while at the same time always trying to kill each other.

Steve: We’re definitely evil twins. Which is the evil one? Shall we vote on it?

Christian: So my final comment about logos is: relax…choose the logo version you like best…make sure it’s readable on a web page and in other uses, and be done with it. Steve and I have been applying the Pareto principle to website design…maybe you’ve heard of it…related to the 80 – 20 theory…I recommend you read up on that, and think for a few minutes about how that principle might apply to the amount of time and work you probably are putting into your logo project….see if you think it’s really worth it.

Steve: Our philosophy is a great example of where reducing expenditure (optimization) can prevent ulcers and sleepless nights.

Christian: Designers spend countless hours and hours thinking about logos and constructing the logo, etc…time and energy that would have been much better used on other projects. Forget about evil twins…Steve and I are like Siamese twins on this one.

What’s included in PagePipe’s ComboPack deal.

PagePipe ComboPack includes:

issue #1 – Mail.Me – Contact Form 7 plugin alternatives. MAIL.ME details

issue #2 – Fly.Me – Hummingbird plugin alternative. FLY.ME details

issue #3 – Search.Me – Yoast SEO plugin alternative. SEARCH.ME details

issue #4 – Police.Me – iThemes Security plugin alternatives. POLICE.ME details

issue #5 – Crush.Me – Image Compression and optimization suggestions. CRUSH.ME details

issue #6 – Block.Me – Akismet plugin alternatives.

issue #7 – Blast.Me – WP Rocket plugin alternative. BLAST.ME details

issue #8 – Sign.Me – OptinMonster plugin alternatives.

issue #9 – Greet.Me – HelloBar plugin substitutes

issue #10 – Theme.Me – Alternatives to premium themes. THEME.ME details

issue #11 – Select.Me – Gonzales speed plugin alternatives.

issue #12 – Healing WordPress Distress. details

issue #13 – Theme.2 – Torture-tested Twenty-seventeen theme for speed. THEME.2 details

issue #14 – Single-page “sliders” testimonials. details

Plus Read.Me – explanation of plugin recommendations – This WORD file is included in the bundle.

And the “Toxic WordPress” 153-page ebook bonus.

When is a plugin too old to trust?

Today, PagePipe uses 70 plugins. About 30 of those not updated for over 1 year. Some for many years. We’re not embarrassed about that. It’s not a mistake.

Plugins listed in our ebooks are currently used on PagePipe. And also on client sites.

So the question is “Outdated? By what definition?”

Some think outdated plugins produce a warning like:

“This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.”

Being orphaned or abandoned doesn’t mean “bad or rotten.”

These lonely plugins still work. And often for over a decade without complaints. That isn’t brokenness.


Above, we explain retention rate is more important than plugin popularity. Or even freshness.

But also in the article, we explain:

“Does 8 months since an update concern us? Not in the least. There are plugins that are 8-years old in the directory that work fine. Those “best if used by” freshness dates are silly. They throw people off with their arbitrary “expiration-date” warnings.”

WordPress places warnings when a plugin isn’t tested with recent versions. Does that mean it won’t work any more with new versions of WordPress? Nope.

WordPress’ motive is their legal protection against liability and lawsuits. C.Y.A. If a plugin doesn’t work any more or presents security hazards, it’s removed fast. And some are. In particular, malicious plugins. They call those “take downs.” Plugin authors remove some because they didn’t get the market results they wanted. But generally plugins stay as long as there isn’t any noise about them. Retired or dead author’s plugins stay in the WordPress free directory.

No plugin is safe. Not paid (premium) plugins. Not obsolete plugins. And not recently updated plugins. A common plugin problem is automatic updates loading onto managed WordPress sites. Bugs in the new version mangle the site or causes conflicts.

It happens.

There’s no such thing as a risk-free plugin or theme. Even reckless WordPress messes up with their own Automattic-authored plugins.

Good-old “Plugin Logic” is our secret, speed-weapon plugin. It’s used on every site we touch. SELECT.ME issue #11 talks about it. It’s an amazing plugin.

Want to keep a specific plugin from updating? We recommend “Block Specific Plugin Updates” plugin. There are times this is handy.

A plugin we use to track plugin age is “More Plugin Info” plugin

There’s plugin churning in the 55,000+ plugin database. Don’t let silly warnings discourage you. They aren’t for your protection. They’re protecting WordPress.

Don’t fear old plugins.

How many plugins is too many?

PagePipe is hosted on cheap GoDaddy magnetic servers with no CDN. GoDaddy hosting is the second most hated provider in the world. The first is BlueHost. We’re out to prove even “bad” hosting can get fast page speed. (We host our store on Bluehost! Our blog on GoDaddy!) is living proof these recommendations for speed actually work.

PagePipe now use 70 plugins on the blog (GoDaddy) and 24 plugins on the secure store (BlueHost). Even with this many plugins, load time is under 2 seconds on cheap, shared hosting. It’s not plugin quantity, it’s the quality that makes a difference. Web designers can’t be arbitrary in loading and activating plugins. The result is slow pages. And all our plugins are freebies from the plugin directory.

It’s a myth using many plugins slows down your website. Being sloppy in judging plugin quality or necessity is the culprit. That’s within a web designer’s control. It calls for wisdom and speed testing. The best plugins add no page weight at all – weightlessness! (In reality, about 1 millisecond – or less – per plugin to the initial page load.)

Get PagePipe’s ComboPack now

Quality-82 image-compression change for WordPress.

By default, WordPress always compressed images upon upload. In version 4.5, WordPress changed JPEG compression from 90Q to 82Q. This reduced image weight by an average of 25 percent.

Since version 2.5, WordPress used a default-quality setting of 90 to optimize images. A 90Q setting creates larger file sizes than recommended by modern web best practices. For example,  WebPagetest warns site owners if images aren’t compressed enough.

Images are 62 percent of page weight in 2017. The average page now weighs between 2M and 2.3M.

WebPagetest specification: Images compressed within 10% of a Photoshop-web-save quality of 50 will pass. Up to 50% larger will warn (we guess that would be around 70Q to 75Q). Anything larger than that will fail. The image score is the percentage of bytes saved by image re-compression.

Photoshop provides a handy “Save for Web” option that keeps file sizes low. But what about a large website with a lot of images? An online store might have thousands of images. Having to create different sizes of each of these is an enormous task.

WordPress uses ImageMagick, an open-source command-line graphics editor, to quickly resizes images. This technique maintains great visual quality and small file sizes. It automates resizing image compression with formats like Jpeg and PNG.

The Odd Number of 82Q.

Researchers compared ImageMagick’s various compression settings against Photoshop’s high quality (60Q) setting for JPEGs. An Imagick compression setting of 82Q was closest. They used an open source test to compare dissimilarity of input and output Jpeg images.

Changing the default image quality setting is a small change. Yet, it makes a big impact on file size without sacrificing perceived image quality. The new 82Q setting only applies to the intermediate size images. Not the original files uploaded by users.

To change original image size dimensions and quality settings, we recommend Imsanity plugin (200,000+ installs).

We repeat: original full-sized, uploaded images remain unaffected. This change only affects images resized by WordPress, such as image thumbnails. For international users, on slower web connections, this is important for performance optimization.

We agree with these changes for improving WordPress speed.