Can scarcity tactics boost your marketing and sales? Absolutely.

But only when used in the right ways, at the right times.

Scarcity tactics aren’t a quick fix for lagging sales. Instead, they increase the intensity of desirability for an item that’s already in demand. Think about it. Will slapping a timer on your offer magically increase demand? Probably not. Strive to build a loyal customer base who can’t wait for your new releases before tying in scarcity.

Too much pressure is a bad thing. Many of the scarcity-focused strategies create some anxiety-producing urgency. When you put too much pressure on your customers to act, they may feel like you’re forcing them into action. It’s an easy way to break ties with loyal customers.

Everything in moderation. Limited edition items are special because they’re different from all other offerings. That means you can’t make every single item limited, seasonal, low in stock, and only available for a short period. If nothing else, customers will get annoyed that you can’t regulate your inventory. Use scarcity in moderation.

Scarce items make people feel unique, powerful. They have access to something valuable and exclusive. Scarcity is why people perceive limited quantities as more precious and valuable. But it’s not a quick fix for lagging sales. If you use excessive pressure, you’ll end up scaring customers away instead.

What are countdown timer plugins?

A countdown timer shows how long a deal will last. They encourage customers to buy creating urgency psychology. Countdown timers let you countdown to a date, countdown a certain number of hours, create a countdown per visitor. It shows them how long they have to use a promotion.

You can have a limited-time counter start over on page refresh. Or you can enable session tracking and the timer will not refresh. Attention-grabbing  countdown timer shows every second lost by not taking immediate action.

Countdown or expiration timers for WordPress and WooCommerce create boost conversions. They drive clicks, increase sales, and highlight upcoming events or deadlines.

False reports claim scarcity timers boost conversions by up to 350 percent. That’s baloney. Timers grab user’s attention and make them focus on your offer boosting conversions. That motivates users to place an order. Urgency and scarcity are powerful psychological triggers. They motivate shoppers to take fast action and avoid missing out on the following:

• flash sales
• seasonal promotions
• coupon code discounts
• pre-launch offers
• daily deals
• faster shipping deadline campaigns
• instant discounts
• early bird deals
• recurring offers
• sales promotion
• live events
• webinars
• product launches

Scarcity timer plugins are available for free – and paid. PagePipe focuses on reviewing plugins found in the WordPress free plugin directory. If you use scarcity as a keyword, only 4 plugins appear in the directory search results. Boo!

Below are the actual 20 listed plugins. We show their download zip file size, and why these offers are unacceptable. That’s right. All are bad for speed.

File download size is indicative of code bloat. Almost always, the fatter the package size, the slower the plugin.

There are three classes of scarcity plugin; light, middle, and heavyweights:

[table]

4 lightweight plugins,download kb
,
sdi-scarcity-timer,18
page-expiration-robot,25
checkout-countdown-for-woocommerce,30
t-countdown,46

[/table]

These lightweights either don’t work when tested. And yes, we did test these – except for the WooCommerce one, regardless, they call offsite APIs – or are broken. API stands for Application Programming Interface. These are keys to use offsite and remote server services. APIs mean standing in line for another server to respond. In the speed business, waiting for handshaking is always bad news. Talking back and forth slows sites down. These small plugins would be where we’d find a winner for speed. But not in this case. Brokenness or API requirements disqualify all the light plugins for speed.

[table]

9 middleweight plugins,download kb
,
wordpress-countdown-widget,106
countdown-timer-ultimate,141
smart-countdown-fx,186
countdown-timer,437
widget-countdown,556
beeketing-for-woocommerce,582
hurrytimer,744
sales-countdown-timer,779
countdown-builder,996

[/table]

Even if the middleweight plugins all work, they would still be slow loading. Why? Timers and counters are database intensive. They hit on the server database to increment a counter over and over. Repeating these requests drags down the server speed. Time-to-first-byte (server overhead) starts to lag.

[table]

7 heavyweight plugins,download Mb
,
scarcity-jeet,1.1
intelly-countdown,1.3
powr-pack,1.3
finale-woocommerce-sales-countdown-timer-discount,1.6
mwp-countdown,1.7
optinmonster,5.1
wp-maintenance-mode,5.8

[/table]

These are just ridiculous. They’re bloated, over-1-megabyte-in-size plugins. We won’t even test them. A waste of time. We’ve encountered them on client sites and know they slow everything down.

On eCommerce pages, the following slow down page loads:

• theme overhead
• page builder overhead
• eCommerce plugin overhead
• Time-to-first-byte
• SSL handshaking

Now add a countdown timer!

It’s too much going on all at once. It’s best to cut the countdown timer plugin for speed.

So what alternative do you use? How do you get the psychological response of scarcity without loading down your web page?

Here’s something we’ve tried with success: Publish a second buy button with text. No timer. We’re not kidding.

Here’s what we say:

Special 30-minute Offer:
BONUS ebook with purchase.

Order BUNDLE.ME within the next 30 minutes and get “Toxic WordPress” (152 pages) for only 99 cents extra.

There is no actual timer ticking on the page. Does this work? Yes. Remember scarcity is a feeling – not reality.

To hammer home the idea, an imaginary clock is spinning away. We added a GIF-animation timer. It’s not real-time. It’s a visual cue or reminder. A 10-minute GIF countdown animation has too many frames. That makes it super heavy. But a spinning-seconds timer, is a lightweight GIF loop.

SPEED SUBSTITUTE

This GIF image contains only 12 frames.
And weighs only 7 kilobytes.
No countdown timer plugin loads faster than that.

So the next best thing for speed is a fake timer. It gets attention and creates a psychological feeling of scarcity. It works when people buy our ebook bundle. But it’s also our best offer, that counts even more to motivate.

There’s no magic in scarcity alone.

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. But why the magic number 82?

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

WebPagetest specification: Images compressed within 10% of a Photoshop-web-save quality of 50 will pass. Up to 50 percent 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 ImageMagick 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 (230,000+ installs, 53k zip download file size).

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 approve these changes for improving WordPress speed.

Sometimes when we’re tuning speed on client websites, we strike gold. There’s a horrible problem with an easy fix. The problem is PNG photograph images are so big and fat they’re slowing down the site.

By accident, the site owner chose the wrong format. Or assumes lossless format is better (it’s not). Or they uploaded camera images direct to the WordPress media library.

It’s a golden problem for us because it’s easy to fix. The dramatic speed results make us feel like superheroes. We like that feeling.

There are 3 popular image formats used online. Each has its proper usage and special tricks for speed. But what is the worse use case?

In real-world website tuning, what slows down a site most is improper use of PNG format. More on that in a bit. First, let’s review the formats real quick.

JPEG

Joint Photographic Experts Group format is a commonly used method of lossy compression for images produced by digital photography. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality.

FREE DOWNLOAD: https://pagepipe.com/wp-content/uploads/2015/04/optimize-v9.pdf

PNG

Portable Network Graphics is a raster graphics file format that supports lossless data compression. PNG was developed as an improved, non-patented replacement for Graphics Interchange Format. PNG is best for palette-based images or images requiring transparent backgrounds. PNGs can be an 8-bit color dept or a 24-bit color depth. Especially useful for logos and icons.

GIF

webP

We don’t recommend webP. Here’s why:

REFERENCE: https://pagepipe.com/dont-use-webp-image-format/

webP images are often processed by a third-party service and cost money above a threshold. Slower APIs and costlier fees? You can have fast and free. Fancy doesn’t make any sense.

Google found an orphaned idea and decided to gamble on it as if it was a “black swan.” A fortuitous accident. Like the serendipitous discovery of Teflon from rocket-fuel residue in a canister. WebP is no Teflon.

Let’s examine the grossest image optimization error.

Large PNG photographs with transparent backgrounds can be 1 megabyte or more. Pages with these kinds of images loading in 10 seconds or longer. That’s atrocious and wasteful.

So how do you fix this PNG problem?

Before we do any fixing, we measure the before-and-after reduction. To do that we use a plugin called:

Export Media Library
This plugin allows users to export media library files as a compressed zip archive. You can download the entire zipped media library to your desktop.

https://wordpress.org/plugins/export-media-library/

After tweaking images, we’ll download the media library again and compare the improvement.

How can you identify huge images?

We use a free plugin called Media File Sizes

https://wordpress.org/plugins/media-file-sizes/

It’s old but works fine. We only leave it installed during the test and then deactivate or remove it.

This plugin adds a column to the Media Library page. It displaying the total space used by each media item. This includes the original image as well as other generated sizes. Sorting your Media Library by file size is a great way to identify duplicate media items. But we use it most to identify the worst images by sorting by size.

If the largest images in the media library are under 100 kilobytes, we leave things alone. If not, we convert PNGs to JPEGs first.

We achieve that by running a plugin to convert PNG images to optimized JPG images. This handy plugin is:

PNG to JPG

https://wordpress.org/plugins/png-to-jpg/

Convert PNG images to JPG allows you to:

• set quality of converted JPG
• auto-convert on upload
• auto-convert on upload only when PNG has no transparency
• only convert image if JPG file size is lower than PNG file size
• leave original PNG images on the server
• convert an existing PNG image to JPG
• bulk convert existing PNG images to JPG < This is what we want.
  
• conversion statistics

This plugin seems like magic. You can exclude images with transparent backgrounds and protect logos and icons.

That conversion takes time – depending upon how many images need changing. When we’re done, we remove it or disable it.

Alternatives to fix heavy PNGs.

Amazing simple background-color alteration.

Let’s use a couple of transparent image examples.
Subject matter: Sloths. How fitting. Slow and sluggish.

One small (above) and one large (below).

These screengrabs show transparent backgrounds. They appear as checkerboard backgrounds in image processing programs. If we dropped the original images on this page you’re reading, you’d see white where the clear is. Bad demonstration.

The optimized images are JPEGs with creme backgrounds added with  image processing. The intent is to place these on a creme-colored page.

Comparison

Small sloth: 25k > 13k
Not bad.

Large sloth: 463k > 23k
Wow! Holy cow!

Here’s a waterfall test with the sloth images:

---

Adding a background color to 2 PNG images improved speed by 801 milliseconds. That’s great. Easy win.

Many web designers think that a JPEG hexcolor won’t match a specified CSS hexcolor. That used to be true long ago. But with modern browsers and screens that’s no longer the case. We’ll prove that below:

Would lazy load help perceived speed?

Yes.

---

772 milliseconds improvement with lazy load.

Lazy load is part of WordPress now but often we still have to install a plugin to see speed benefits. Too weird.

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).

OFFSITE REFERENCE: https://www.psychologytoday.com/us/blog/brain-babble/201504/when-it-comes-color-men-women-arent-seeing-eye-eye

An unconventional solution.

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.

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

 

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!

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.

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.

OFF-SITE LINK
New Research: 21% of Companies Fail to Respond to Live Chat Requests

Astra is a popular WordPress theme. Usually, we’d tell you to run from anything claiming popularity – and never follow The Herd. Why? Because popularity indicates plugin and theme inefficiency. The more popular themes are – the slower they load. Why does this correlate? We don’t know. It’s measurable in real-life slowness.

For example, Divi – a paid premium theme – its authors claim it’s the most popular theme of all time! From our testing, it adds one second to your load time. Terrible! That’s half the 2-second performance budget.

Astra is an exception to the harsh slow/popular judgment. Astra takes only 36 milliseconds to load – plenty fast. But only when using the free version. If you buy the Astra Premium plugin, you add 50 milliseconds to the free version. Or 86 milliseconds total speed overhead. Is that a lot? It’s relative.

Using our speed philosophy, we can enhance a site using over 80 discrete free plugins with under 86-milliseconds consumption. Do that many plugins slow things down? Not at all. It usually halves the load time. Weird. That’s not what blogs preach on the Internet. The average site has 25 plugins. We use over 70 on PagePipe. Avoid multi-function plugins.

HIDDEN SPEED LIABILITIES

The Astra theme authors didn’t mention those hidden liabilities before buying premium. Did they? But that’s still minor compared to the real problem. That trouble is the uncontrollable fear, greed, and indecision of site owners.

Astra theme
1 million+ active installations
zip download size: 1.2M

Keeping Astra fast requires site owner self-discipline.

It’s easy to junk Astra up with slow enticements. The temptation is usually too great. Just because you can add a slider doesn’t mean you should. Or a chatbox. Or an email signup popup – or a contact form. On and on. Faddish seductions create speed baggage. Coolness rarely proves profitable.

Astra left out some dead weight usually included for building sites. They did this to seem careful about speed. That’s a differentiating factor of their theme. Abnormal speed consideration caters to the whims of speed freaks – like us.

Astra contains speed potential. But a novice overloads this theme like any other. It’s lightweight (less than 50K on the frontend). We tested that spec and it’s true. Astra has the potential for *unparalleled* speed as the authors claim.

Bogus Astra Implied Promises
SEO, Schema, and Google AMP. Blah!

1Astra also offers some features we don’t care about – ever. Fluffy SEO claims in particular. Relevant content creates SEO – not free themes! Astra stretches for market differentiation embracing good ol’ huckster miracle SEO.

2Astra team integrated Schema.org code. Schema’s not a good thing or a bad thing. Unless you curate content the size of the U.S. Library of Congress. Then you need it. It’s benign like a non-cancerous growth. You can do Schema with a plugin. But small to medium size sites rarely (never?) benefit. No proof. So ignore it.

3Astra also says the theme is *Native AMP ready.* This is a definite non-feature. AMP is a detriment to any website. We recommend you steer clear of Google AMP.

REFERENCE: https://pagepipe.com/why-google-amp-is-not-the-ultimate-solution-for-mobile-wordpress-speed/

Skip buying the paid version of Astra.

Astra is good for building all kinds of websites. They’ve done a good job engineering this theme. We don’t recommend the paid version (recurring annual rent). The free version features are ample. If you buy a Astra template how does that affect load time? Like all free themes, the paid version doubles the load time.

Not activating jQuery is one of Astra’s biggest speed claims.

jQuery is a JavaScript library assisting coders. Is jQuery activation so horrible? Not really. Almost all WordPress themes use jQuery in one way or another. And also many plugins especially if they create moving elements on a page – like sliders and popups. jQuery is a shortcut for programmers.

REFERENCE: https://speedhospital.org/instant-jq/

Is Astra the first theme to not enqueue jQuery? Several past themes use this trick. But sadly, in the end, it doesn’t help much. Site owners can’t seem to live without features and functions that use jQuery.

DON’T DRUDGE ME

We built a simple site using “Drudge” minimalist style. Drudge style is the ugliest news aggregator we’ve ever seen. Christian Nelson, web sage, always claimed: “You dump enough frills to make it fast – and then it’s repugnant.” Paraphrased. There’s more swearing than that. But it’s true of Drudge style.

Here’s our test page:

In irony, The Drudge Report gets 1.5 million visitors per month. The site owner makes 1 million dollars annual profit from the site. It has many fans. There’s even a commercial Drudge theme for $89 with guaranteed site uglification. Sorry. We just threw up a little in our mouth.

Adopting these anti-marketing and lo-fi concepts, we applied them. We ran Astra speed tests using GoDaddy cheap shared hosting. We used Classic Editor plugin (5 million + active installs, 18k zip download file) to disable the block editor. Here are the results:

Pingdom.com: best case
118k, 307ms, 15 requests.
To SF, USA.

WPT.org: worst case
TTFB 278ms, load time 1.223s, 115k, 16 requests.
To WV, USA.

That’s right. Astra with the following four speed tricks is around 1-second load time or less. Dang, that’s fast!

TRICK
1

Stop loading the Astra symbol font.

We can do this deletion because we aren’t using the menu on the homepage. It’s a single page site.

Add this one-line of code to your site functions.php file:

add_filter( 'astra_enable_default_fonts', '__return_false' );

If you’re savvy enough to edit that PHP file, go for it. But we prefer a safer route using the Code Snippets plugin (200,000+ installs, 489k download zip file). It has the bonus feature of preventing the custom code from being overwritten by a theme or core update.

This trick saves 200 millisecond font load time. That’s 10 percent of the 2-second performance budget. We’ll take that gain. It’s almost the same as loading Google Analytics locally, a speed saving trick we do all the time.

Then add to this code below to Simple CSS plugin (100,000 active installs, 128k zip download file). Simple CSS also protects custom CSS in the customizer. This eliminates a child theme plugin from adding an extra request. Faster, safer, a win.

.ast-button-wrap .menu-toggle .menu-toggle-icon {
color: transparent;
}

The “screen residue” where the mobile hamburger icon normally appears is then transparent (invisibility!)

---

TRICk
2

Switch off unneeded scripts with Asset Queue Manager plugin.

Asset Queue Manager
1,000 active installs
101k zip download file

REFERENCE: https://pagepipe.com/misunderstood-asset-queue-manager-speed-plugins-has-great-performance-potential/

Dequeue the following two unneeded assets (scripts):

Astra menu-animation.min.css

wp-block-library

---

TRICK
3

Defer Javascript to the bottom of page loading.

Async Javascript
100,000+ active installs
203k zip file download

Then add this script to the plugin control panel:

style.min.js

---

TRICK
4

Avoid activating jQuery.

We added jQuery activation by accident when installing the Sticky Sidebar plugin (10,000+ active installs, 235k zip download file). Load time then increased to 838 milliseconds with 13 requests. This added about 40k to the page weight. Not horrible but a half second increase in load time – or 25 percent of our performance budget lost. That blunder negates fancy speed benefits of no-jQuery-library site drag. That’s a worst-case scenario. You’ve been warned.

---

We recommend Astra. It’s a “feature-rich” speed theme. But we discourage purchasing the premium version when possible.

---

So we got curious.

WordPress core version 5.5.1 files decompressed weighs 47.8 megabytes.

We downloaded Divi theme from a client  website. The Divi theme weighs 36.8 megabytes. Almost as big as WordPress itself.

And the new Astra 2.6.0 weighs 5.4 megabytes. A tenth the size of core.

Theme package size is always an indicator of bloat.

We’re not harping on Divi to show you made a bad choice. They advertise they’re the most popular WordPress theme in the world. You’d think it must be a pretty good choice.

How popular is Divi?

2.8 million themes.

How many people use Astra?

More than 1 million according to the WordPress theme directory.

If you buy a Astra template how does that affect load time? Like all free themes, the paid version doubles the load time. The pro version costs $199 on sale.

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. Favicon 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!

When you optimize images on a website, how do you check how good is good enough? Is it speed performance gains? What’s a healthy media library? What is a sick one? When is an image too big? And when is it right? Here’s what you can do to prevent future problems while fixing image problems.

Many people don’t  realize how WordPress creates images. When you upload an image, the media library listing shows only one image. But WordPress creates many different size images from it and stores them on the host server. At least 4 sizes. How many more depends upon the nature of your WordPress theme. We’ve seen as many as 16 various copies of originals plus the big-fat original.

Why does WordPress need so many images?

WordPress swaps the-right-sized image depending upon the view-area of the user’s screens. This helps create a better speedier mobile user experience. Images then aren’t resized with browser math. Math manipulation changes the dimensions onscreen. But the image file size is as heavy and slow as the huge original. Inefficient themes resize a 100-pixel-square thumbnail but it still may weigh 500k. Get 20 thumbnails on a page at 500k each – and you’re in serious trouble for speed. Making images in advance and closer to the actual size needed speeds up mobile page loads.

Because of unlimited server space, few worry about how much extra images take upon the server. Sloppy! There’s a hidden liability for not doing good media-library housekeeping. Most aren’t even aware there’s a problem. There are no indicators – until the fateful day you restore your media library from a backup. You may find the library is too big for your server to restore. Bad news.

UpdraftPlus – Backup/Restore
We backup our sites with automatic schedules to a free Dropbox cloud storage account.   We can restore anytime needed. We keep our last two backups and get rid of the oldest. The free backup plugin does backups in packets. This strategy prevents too much server load and consumption of server resources.

https://wordpress.org/plugins/updraftplus/

We’ve seen the client’s site’s backup – but they cannot restore it. The number of images on the  server makes it too much of a burden on the server. The host usually starts throttling the backup. Then the lagging server times out and things freeze.

To reduce the size of backups we use two plugins:

Exclude Image Thumbnails From UpdraftPlus Backups
This free plugin conserves space on our cloud backup space. The original, full-sized image is in backups excluding thumbnails. To restore from backup, we use a regenerate thumbnails plugin.

Regenerate Thumbnails Automatically plugin
Using RTA you can regenerate the thumbnails for all your existing images.
It removes not-used-anymore thumbnails.

https://wordpress.org/plugins/regenerate-thumbnails-advanced/

So the strategy is: don’t back up all those thumbnails just the originals. If you need to restore, afterward regenerate thumbnails with a utility plugin. Leave the plugin deactivated except when needed during site maintenance.

It’s best to try a restore from backup and see if your media library cooperates. Some plugins like Updraft plus give a warning when the media library is too big. Safety first.

Repairing the media library.

What do you do if you polluted your media library? It’s dangerous work. Especially since you can’t restore backups. You can remove images from your server or use a plugin like the free Media Cleaner plugin.

https://wordpress.org/plugins/media-cleaner/

Proper image compression.

WordPress compresses all JPEG images when uploaded to the media library. Not the original but all copies for smaller sizes and thumbnails. Unless it is a PNG image then it gets a different treatment. The original WordPress JPEG compression level was 90. That was changed to 82. That passes the WebPageTest.org standard of image goodness for speed. It’s a compression level of 50 in Photoshop.

To not compress images, the free Disable JPEG Compression plugin prevents any alterations.

https://wordpress.org/plugins/disable-jpeg-compression/

Before we begin retroactive bulk optimizing the media library, we check two things. We find out the total size of the media library on the server — not what is in the media library dashboard.

The Export Media Library plugin exports the media files as a downloaded zip archive.

https://wordpress.org/plugins/export-media-library/

This plugin helps determine what the decompressed total folder size is after download. We do the same optimizing process afterward. The difference is how much we reduced the media library size. This is an improvement metric. Failing to download your media library is a potential sign you also can’t restore from a backup.

By default now, WordPress lazy loads images. They added it for improving perceived mobile speed.

Use Media File Sizes plugin next to sort by file size to identify the worst offending images. You often don’t need to improve the entire media library. Focus on the 20-percent that cause 80-percent of the speed problem. This plugin adds a column to the Media Library page. It displays the total space used by each media item. For images, this includes the original image as well as any other generated sizes.

https://wordpress.org/plugins/media-file-sizes/

We don’t use this plugin as much. But it comes in handy. The Media Library LIST VIEW will include a sortable “Dimensions” column.

https://wordpress.org/plugins/display-image-dimensions-in-media-library/

One of the worst image culprits for destroying speed is using the wrong image format. Don’t upload PNG photographs from cameras or open-source image libraries like Pixabay.

These harmful images need conversion to lossy-format JPEGs. The best plugin we’ve found for this bulk process is the PNG to JPG plugin. This can make a significant difference on some sites. The site owner may assume lossless PNG images produce ultra-fine quality. They produce ultra-heavy slow-loading images. Lossy images are often called virtually lossless. The human eye can’t tell the difference after optimization to lossy JPEGs. When in doubt, lossy JPEGs are the format of choice.

https://wordpress.org/plugins/png-to-jpg/

The last step is resizing JPEGs that are too large. We do not recommend plugins that use APIs or compression on third-party servers. This is overkill and usually costs money based on the volume of images processed. Our preference is to use Imsanity plugin. An unfortunate name for such a good plugin.

https://wordpress.org/plugins/imsanity/

Want to use the MailChimp WP Subscribe form on the default WordPress Twenty-seventeen theme?

Then you have a problem. The Home page is sectional pages in the customizer. You ask, “That’s a problem? How so?” Choosing this customization, sacrifices home-page sidebars – and thus no standard widget areas. Widgets are only allowed on posts. Here’s our journey to find a workaround  solution:

We ran into a problem using WP Subscribe on a test site. There, we used the default WordPress Twenty-seventeen theme. Notice during the test (image above), we got a 404-error message. “The requested resource could not be found.” Why was this happening? The same form worked fine on PagePipe.com. We’ve verified the MailChimp API key and the widget matched. It was Kosher.

The Twenty-seventeen theme has a surprise built-in dilemma. You customize the theme home page with optional front-page sections. These allow parallax scrolling images between sections. Nice. Thank you very much. But Twenty-seventeen theme doesn’t allow sidebar widgets on pages. Only posts allow that. Therein lies the problem [disapproval – Boo!]. Since WP Subscribe is in a widget area, we tried using a workaround to place the signup at top, front, and center.

There are various plugins that can help create a widget area inside a page. We thought we’d be clever and use one of those. Failure!

We tried first a plugin called Widgets on a Page. We disabled all other plugins except “WP Subscribe” and “Widgets on Page” plugins. The same 404 error message still reappeared with another test.

Widgets-on-Page plugin is superseded with Turbo-Widgets plugin. But it doesn’t allow editing of the WP Subscribe settings. Widgets on Page is still maintained and last updated 3 weeks ago and has 70,000+ installs. It is compatible with WP 4.7.3 – which we’re using. We suspect this combination of plugins is corrupting code somewhere. And we mean permanently altered – as in undoable.

To remove variables, we tested this errant plugin combination back on PagePipe.com. The result was the same 404 error message. We removed “Widget on Page” plugin. The results on all sidebar signup forms – that formerly worked fine. Errors galore. Corruption of the plugin database.

On PagePipe.com, because the WP Plugin database was now corrupted. That forced us to reinstalled a recent site backup. That cleared the errors. That was a harsh lesson.

We also investigated AMR Shortcode Any Widget as a workaround to embed a widget. Further testing on PagePipe revealed more. The “AMR shortcode any widget” plugin fails also (unknown error, call etc) when embedding the WP Subscribe plugin widget. But it doesn’t corrupt sidebar widget versions of WP Subscribe. We didn’t have to reinstall backups. No corruption. Whew!

https://wordpress.org/plugins/widget-shortcode/

This plugin also fails but not destructively. We finally ran out of widget embedding options.

Because of these problems, we switched to “YIKES Easy Forms for MailChimp” plugin (freebie). 50,000+ installs, 3.7M download size. You can place its shortcode on the front page of the Twenty-seventeen theme. That’s the secret fix. Now you can place a MailChimp signup on default Twenty-seventeen theme pages. Note: In spite of it’s massive plugin download weight (11.5MB decompressed), it is a lightweight plugin and doesn’t bog down page speed. Much of the weight (8M) is in SVG image files for international flag icons. What?! Silliness.

The good news is with a Autoptimize minification plugin installed, this final signup form only added 36 milliseconds to site drag. This is 20 times faster than other alternatives – like iContact.

 

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.

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.

 

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.

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.

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).

WebPagetest.org 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.

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.

https://wordpress.org/plugins/wp-post-signature/
156k download, Requires: 3.0 or higher, Compatible up to: 4.1.11, Last Updated: 1 year ago, Active Installs: 3,000+
Comments: The screenshot of the controls looked overwhelming. It wasn’t clear if an image file is included or if it’s just text.

https://wordpress.org/plugins/danixland-author-signature/
41k, Requires: 4.0 or higher, Compatible up to: 4.5.2, Last Updated: 2 months ago, Active Installs: 20+
Comments: 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.

https://wordpress.org/plugins/ft-signature-manager/
4k, Requires: 2.5 or higherCompatible up to: 3.5.2, Last Updated: 3 years ago, Active Installs: 1,000+
Comment: 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.

https://wordpress.org/plugins/dt-author-box/
69k, Requires: 3.1.2 or higher, Compatible up to: 3.6.1, Last Updated: 3 years ago, Active Installs: 1,000+
Comments: 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.

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.

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 heavy. 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 defers loading 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

Without scarcity, no one would ever pay for anything. There would be an infinite supply of everything, no one could make money, which means we couldn’t exchange it for goods and services. But then, why would we need to, if there was an endless supply of everything?

That decline comes in the form of attention spans, which has fallen from an average attention span of 12 seconds to 8 seconds in the last 15 years. This is, more than likely, due to the increasing demands on an average adult’s attention all day long.

Speed is about user attention span.

The idea is to build relationships with your brand incrementally, with small asks of attention before big ones, so that you can earn customer attention – or else you’ll never be able to keep it.

Pareto Analysis is a technique used for business decision making based on the 80/20 rule. It statistically separates a limited number of input factors as having the greatest impact on a desirable outcome.

“The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information” is one of the most highly cited papers in psychology. It was published in 1956 in Psychological Review by the cognitive psychologist George A. Miller of Princeton University’s Department of Psychology. It is often interpreted to argue that the number of objects an average human can hold in working memory is 7 ± 2. This is frequently referred to as Miller’s law.

Speed slowdowns: unproductive and expressive aesthetic features.

Expressive aesthetic design in web-speak is often called “feature rich.” Feature rich and speed require a fine balancing act. Speed is a kindness to your users.

Yet more than speed, we’re concerned how UX affects profitability. Speed is the first barrier to good UX. Classic design aesthetic makes it so nothing distracts from the focus: the products or content. But too much classic aesthetic can be boring.

Expressive design elements are intended to attract attention. But, they slow down site speed and make for a poorer user experience (UX). Specifically, anything that “moves” is expressive aesthetic. But it’s not limited to animation. If you get too much expressive aesthetic, you end up with visual noise and confusion.

What’s most important? When the user wonders what they should click next, you’ve failed. The hope is making sales – not noise. So these are the offenders: chat box features, sliders, disappearing Main Menus (make it persistent-on-scroll instead), popup surveys, animated product rollovers. And of course, poor hierarchy on the page (bad emphasis).

From our experimentation with human memory and boredom, users only tolerate 12 choices on a page. Then they feel overwhelmed and overloaded by cognitive burden. The more choices, the harder a buying decision.

Animation is more negative than positive for UX. It distracts most. The assumption is because humans are hardwired to snap visually to anything that moves out of fear, this instinct can be harnessed to direct attention.

Have you ever tried reading a page with a fly crawling on it? Annoying isn’t it.

Popups and sliders are intrusive. Flies! Even repulsive to user attention. They annoy. Users feel they’re manipulated by faddish, slow-loading gimmicks. We don’t care how effective the popup or slider plugin authors – and affiliates claim. Their opinion doesn’t count. It’s biased. No source credibility.

Get rid of sliders as a design crutch. This forces better content and design decisions. It lightens the page weight. What’s the most important content? How can you meaningfully and simply present one, single, most-important motivating idea?

You can’t emphasize everything. Emphasizing everything equals empathizing nothing – a marketing adage (E2=E0). If you attempt emphasizing more than one idea, you create cognitive and visual noise. Confusion, delay, or abandonment results.

The screen real estate is better used by a static image. Or even better – NO IMAGE AT ALL. State with non-moving text: who you are, what you do, and why it’s important to your audience. That’s your positioning statement or elevator pitch. Advertise it everywhere on your site.

Attention is the limiting factor in information consumption. Because mental capability is limited, information receptiveness is also limited. Attention is a decision-filter to reduce cognitive overload by identifying relevance fast. If it takes too long to locate or identify something valuable, users search elsewhere.

Primacy bias: The first content.

• relevant
• interesting
• audience approved
• Information overload consumes audience attention.
• Information abundance creates a poverty of attention.
• Allocate attention efficiently.
• Overabundance of information sources dilute attention.
• What’s needed is efficient removal of unimportant or irrelevant information.
• Overexposure

Adding valuable intangibles that cannot be reproduced at any cost. These intangibles are:

• Immediacy – priority access, immediate delivery
• Personalization – tailored just for you
• 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.”

MORE THOUGHTS ON ATTENTION SPAN

• Attention to novel items propagates and eventually fades among large populations.
• Attention is a major and the first stage in the process of converting non-consumers.
• Lack of superfluidity or frictionless information hinders decision making. Instead users keep searching and comparing products.
• Information pollution is Spam. Saturation.

What information is a waste of time?

Website owners often think they’re the clone of their audience. 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 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 a mere decorative element. When is the last time you paid for a solitary dingbat?

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

Logos can be fraught with emotional upheaval causing unneeded, repeated presentations. “Does it 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 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 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. 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 don’t need a logo when starting up. You can just use type and maybe a dingbat. 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 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 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 about 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 regarding 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 rule…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 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.

---

Logos trigger our ranting and emotion. Here’s why:

Bullying clients have egotistical needs for a bigger, better, more intricate logo. It’s absurd and wasteful conflict and a power struggle. These are toxic clients. They suppose their logo is *them.* A simple dingbat would do. Toxic clients over invest and get ulcers. They delay projects and create “distracting noise.” What is most important for real-world results? Getting family members and employees to vote on a new logo is a cop-out (like they will tell owners the truth).

Real audiences care very little about a logo. It doesn’t matter whether they paid 1 million dollars or got it from freeware clipart.

Microsoft paid Paula Scher 1 million dollars for the new one-color Windows logo done in 2012.

Ridiculous! Do you think that logo made Microsoft money? We doubt it. But the technical upside was it loaded faster on mobile devices. So better? Maybe?

We’ve also bought logos from greedy designers. After getting our deposit, they went to the Bahamas vacationing with their partners. That happened. They preyed on our design naivety and vanity. They overcharged us and were opportunists – if not pirates. So we see the world of logos as artificial and trite – droll and inefficient.

The mere word “logo” is an emotional trigger for us now. Say, “logo” or “logotype” and we have visceral spasms and froth at the mouth with eyes glowing red.

We apologize for going ballistic about your precious logo. A logo is an expected, repetitive design element or accessorized decoration. What it changes is intangible, abstract, and immeasurable.

Logos rarely (never?) move the profit needle. If they do, someone spent too much money forcing the symbol to have meaning and relevance.

With that said, better logos are cliché. Then they become a shortcut to human understanding. But generally, they are too poetic or abstract or ornate.

Do you have a recommended dimension pixel size and actual file size for blog post images?

Usually featured images are set to the full-page width of the theme (maximum screen width). The way to find out is to upload a wide test image wider and see what it’s dimensions are after resizing or scaling. Images embedded in posts are usually the column width. Again we upload and measure the actual size and build images to those actual dimensions. We don’t want images dynamically resizing in the browser if it can be avoided.

Q. How do you optimize images for the PagePipe blog and store?

A: GIMP is my go-to image editor for over 14 years. Our preference is to optimize images offline before uploading. As a safety measure, we use Imsanity plugin to prevent the gross error of loading enormous photos.

REFERENCE: https://wordpress.org/plugins/imsanity/

REFERENCE: https://blog.hubspot.com/website/imsanity-insanely-good-image-upload-resize-plugin

REFERENCE: https://pagepipe.com/the-fastest-alternatives-to-heavy-jpeg-images-for-page-speed/

Imsanity plugin is automatically resizing and optimizing uploaded images. You can change the setting in the plugin control panel.

Q. So you don’t use Adobe or Apple products?

A. I used to use Photoshop software and the Apple Mac OS. That was back in the old days when you actually owned instead of rented software (subscription model).

Linux Mint is my preferred operating system since 2006. Gimp image processor is free open-source software. There are no monthly rental fees like with Apple or Adobe products.

Be sure to install the optional Gimp-plugin-registry using the Linux Software Manager. This adds “Save for web” features necessary for image optimization.

Q. Do you have a recommended dimension pixel size and actual file size for blog post images?

A. Usually featured images are set to the full-page width of the theme (maximum screen width). The way to find out is to upload a wide test image and see what it’s dimensions are after resizing or scaling.

For example: If I upload a large 398k, 1920x1200px test image on a client’s post. Afterwards, it is resized and optimized by Imsanity to 66 KB, 750x469px after upload.

The Firefox page info says it is scaled to 720 x 450px.

So Imsanity could be set to 720 wide instead of 750. That would be ideal. This is small change.

Imsanity automatically resized and optimized the image.

Q. Why are you using Firefox browser? Doesn’t everyone use Google Chrome?

A. I prefer Firefox for reverse engineering websites.

To find the size of any image using Firefox browser. Install the extension:
View Image Info Reborn
Display info for the current image in a new window, new tab, or overlaid on the image.

1. Go the page or post URL.

2. Right click on the image. A contextual menu appears.

3. Click “view image info.” The following information will appear.

Location: the actual URL of the image location.

Type: JPEG Image

Size: Unknown (not cached) – or after reloading the page: 26.82 KB (27,459 bytes)

Dimensions: 700px × 250px (scaled to 691px × 247px)

Scaling means the image is mathematically resized by the browser or theme. The goal is not scaling when possible. In this case, the size difference is negligible and won’t necessarily speed up the site. But if it were 2000px wide x 1200px high being mathematically resized to 150px square thumbnail, that would be wasteful. It would increase page weight significantly and slow things down.

Any image over 100k in size needs evaluation for better optimization.

The featured image may not appear on the page depending upon the theme settings. Only embedded (add media) images can be placed in the body. Featured images often appear in the blog roll listing.

Q: My host has the most advanced optimization addon on the plant. They say I don’t need an image compression plugin because they are already doing that in their framework. Is it still necessary to optimize?

A. No machine can determine if an image is properly sized, let alone if it should be a PNG or JPEG. A human brain is still required. Imsanity prevents gross errors.

Q. OK. You’re a total nonconformist. What kind of computer hardware do you use?
My system is low-cost and built from used ebay components.

• $200 – Dell 64-bit Desktop OptiPlex 7020, year 2016
  CPU: Quad Core model: Intel Core i7 L2 cache: 8192 KiB
  Speed: 3908 MHz min/max: 800/4000 MHz Core speeds (MHz)
• $140 – RAM: 32GB
• $0 – O/S: Linux Mint Cinnamon 20.1
• $30 – Graphics: Advanced Micro Devices, Inc. Baffin [Radeon RX 550 640SP / RX 560/560X] vendor: Micro-Star MSI
• Drives:
  $100 Micron 1TB – internal SSD
  $12 Seagate 120 GB – external USB
  $40 Seagate 320 GB – external USB
  $80 Toshiba 1TB – external USB
• Displays:
  $64 Acer Technologies 20” 1600×900 (16:9), rotation 180 degrees
  $47 Acer Technologies 20” 1600×900 (16:9), rotation clockwise
  $0 Integrated Tech Express Inc 27” 1366×768 (16:9), rotation normal (salvage)

$713 Total

“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. WebPagetest.org agrees with us about that image-optimization assessment. But the reduction to 300k is still too heavy for mobile page loads.

COMPARISON USING STOCK IMAGE

 

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 Pexels.com. 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.

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.

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.

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

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.

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.

https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions

http://screensiz.es/phone

For PagePipe’s site, the strategy is not using photography for large headers. We use 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 6.8 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 WebPagetest.org 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.

pagepipe.com/quality-82-image-compression-change-for-wordpress/

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 used to contain 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.

RELATED PAGEPIPE ARTICLES

• pagepipe.com/your-guide-to-image-speed-optimization-on-mobile/
• pagepipe.com/using-image-optimizer-web-utilities-for-improved-speed/
• pagepipe.com/quality-82-image-compression-change-for-wordpress/
• pagepipe.com/the-fastest-alternatives-to-heavy-jpeg-images-for-page-speed/
• pagepipe.com/the-problem-with-large-hero-images-for-mobile/

Since WordPress core version 5.4 release date: March 31st, 2020, there’s a odd image file lurking on your site.
wp-includes/images/w-logo-blue-white-bg.png

Can you believe it? WordPress redirects requests for favicon.ico to /wp/wp-admin/images/w-logo-blue.png. Dirty rats!

What does this thing do?

It’s branding for WordPress. It has nothing to do with you.

REFERENCE: https://wordpress.org/support/topic/favicon-is-changed-in-version-5-4/

Want to get rid of the silly thing? There’s a plugin for that:

★ ★ ★ ★ ★
WP Favicon Remover

Load Time: 50 milliseconds

The WP Favicon Remover plugin lets you remove the WordPress default favicon added to WordPress core version 5.4. If the favicon doesn’t change after plugin installation, clear your browser cache. If you add a Site Icon via Theme Customizer, uninstall this plugin. You don’t need it anymore.

Don’t know what the heck a favicon is? Here’s some bedtime reading to help put you to sleep:

REFERENCE: https://sympli.io/blog/heres-everything-you-need-to-know-about-favicons-in-2020/

REFERENCE: https://en.wikipedia.org/wiki/Favicon

REFERENCE: https://pagepipe.com/how-to-make-the-fastest-loading-favicon-for-mobile-first-speed/

NOTE: Miraculously, the extra WordPress logo doesn’t load on mobile devices. Just on desktop and tablet browsers.

Twenty-seventeen is an unusual default WordPress theme. It allows background video in the header section. Here we share ideas to optimize web graphics for branding the WordPress Twenty-seventeen-theme home page.

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.

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.

---

3
How long playing are video headers? Typically, they are 16-second video motion headers. That is a good target length.

---

4Why GIF instead of PNG format for featured images? WordPress imposes automated resizing to 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.

---

5Do video headers 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 video headers 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.

TIP: We’ve used a rocket GIF animation as a PagePipe 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 Customizer static header images. You can also rotate header images randomly in the Customizer with each page change. Nice trick.

Email subscriptions update us about new theme releases in the free WordPress directory. There are about 1,500 responsive themes. If a theme file weighs less than 1M compressed, we collect it for further analysis.

That is our arbitrary cutoff. We don’t have time to review every theme release for performance quality. Most themes are heavier than that.

So we limit the scope of our theme inquiry. We may miss some good themes – but we know this is an efficient and surefire culling method. We review the collected speed themes every 6 months. In this article, we’ll share some “best of class” candidates. Our goal is narrowing  hundreds of possibilities to less than a dozen.

Don’t waste precious time checking every theme for perfection. Perfection costs too much.

We’ve torture tested the old default Twenty-seventeen theme. We’ve been harsh, skeptical and cynical of it. The truth is it’s a true-blue speed theme – and looks good, too, when used properly. It’s a comparative standard of “goodness” for this review. All themes can be abused making slow websites. This isn’t the theme author’s fault. It’s almost always the culpable site owner. The inability to say “no” produces complicated and overdecorated sites. Or perhaps an egotistical desire to appear more important and bigger than reality. Apathy is the enemy. Discipline is the ally.

The theme contenders in our review only have a few (hundreds) active installs – with one exception. By comparison, there are over one million active installs of the Twenty-seventeen theme. Our evaluation of featherweight themes is esoteric and rare. We say featherweight because our downloads weighed under 500k compressed. We’ve tightening our spec for extreme optimization for mobile speeds. The world is changing too fast.

All future websites should be fast and responsive for small screen-mobile devices. Web marketing companies claim over 50 percent of browsing is now done on a smartphone or tablet. That isn’t always true. But most site owners with speed problems have audiences between 60 and 80 percent mobile. Oddly enough, our PagePipe audience is the reverse. More than 80 percent of our traffic are desktop users. They are web designers and developers. It’s difficult to design a site on tiny screens. Many web builders use extra large screens or even dual screens. We build PagePipe for mobile anyway. We want to be good examples of what we preach. We try anyway.

What do featherweight sample themes have in common?

All weigh less than 500k zipped. They have Pingdom.com page speeds of about 600 milliseconds. That’s with the same Home page loaded with a simple blog-list. Content is from a WordPress imported XML file – Theme Unit Test Data.

Theme screenshots can weigh over 1M. Ridiculous.

Every WordPress theme package contains a screenshot. These may be PNGs or JPGs. After theme installation, they’re presented in the Dashboard > Appearance > Themes selection area. You can also see them as a thumbnail preview via the Customizer. The images may be heavy – or they may be light. In this test case, they ranged from 113k to 404k in weight. We subtract that amount from the decompressed file sizes for fairer comparisons. Screenshots don’t affect page speed.

It’s a remarkable oddity. One of the new theme candidates isn’t responsive for mobile screens. Chuck that one. And two were child themes. Junk those, too.

After decompressing each theme folder, we subtracted screenshot file sizes. The final theme weights then ranged from 52k to 398k. The variances surprise us. Yet all the load times were the same 600 milliseconds (plus or minus 50 milliseconds). We decided to switch tests from Pingdom.com (best-case test) and use WebPagetest.org. This produces more pessimistic, less repetitive speeds. And also, important Time-to-First-Byte (TTFB) information. TTFB is server wasted delay. WebPagetest.org is a better worst-case-scenario test.

The cheaper your hosting usually the worse the TTFB delay. TTFB is outside of our control. During this test, our TTFB on GoDaddy Shared Hosting was between 560 to 906 milliseconds. Nastiness! By taking the load time and subtracting the TTFB, we had a better idea for how long pages actually loaded. Speeds then ranged between 588 milliseconds best case and 1.178 second worst case. Average load time was 862 milliseconds (+ TTFB). So – if you are lucky – with a 100 millisecond TTFB – your load time would be around 1 second. In theory.

Using a quick-and-dirty browser timer, the estimates maintained steady. Load times (with browser cache cleared) had a tight range of 1.011 seconds to 1.361 seconds on a desktop. That is fast enough for extreme mobile performance.

But we still aren’t happy. Why?

Our curiosity isn’t satisfied. What is the loss of speed from the theme? Without all the content and plugins and overhead complication? The easiest way to find out is using the P3 Plugin Performance Profiler (183k download size). Don’t leave this plugin installed. Use it for a test and dump it. There are 60,000 site owners who don’t realize it slows down every single page of their website. OK. It’s only 4 milliseconds per page view. But that’s equal to 4 useful plugins. Why waste valuable speed?

After checking with P3, you can (supposedly) email the results to yourself. This email feature never works for us. But the concealed statistics show more than plugin speeds. It also shows theme load time in milliseconds. Those test times ranged between 26 and 50 milliseconds depending upon the theme. That’s all. Do we believe it? Yes. A featherweight theme loads faster than Font Awesome. We hate it with a passion because it’s a baked-in delay. It’s so hard to remove. Small themes weigh about the same as Google Fonts – and definitely less than Typekit fonts. Note: Disable Google Fonts with a simple plugin.

People usually think themes devour speed.

Minimalistic themes don’t. Any theme advertised as being fast – or getting great speed scores is suspicious. Test it. Scores are meaningless. It’s load time in milliseconds that count. Never trust the authors opinion or advertising. It’s usually quite the opposite. The theme’s slower than a herd of snails stampeding through peanut butter.

For comparison: How much load time do typical plugins use? About 1 to 2 millisecond each. Of course, the bad ones use 50 to 70 milliseconds (or more). Some themes and plugins have a bad-speed reputation. We’ve tested some real dogs.

In defense of themes, what wastes speed are large images and third-party APIs. Things like social media and email lists and video and fancy fonts and shopping carts, etc. ad nauseam. All those superficial extras add up. You can find a faster alternative or workaround. (Tip: PagePipe specializes in mobile WordPress speed tricks.) Ask yourself, “What are the core goals of this site?” Then get rid of the rest.

One featherweight theme is about equal to 50 lightweight plugins. A heavy popular theme – like “The7” – is equal to hundreds and hundreds of plugins. Yet, plugins get the blame. Not the bloated popular theme.

Choosing a fast theme can conserve your performance budget. But how do featherweight themes look? Well, most look ugly or plain at best. That’s why we’re showing the screenshot – and the naked OOBE (Out-Of-Box-Experience). OOBE’s are always a disappointment. You must look beyond that bleakness for hidden potential. And remember, you’re catering to mobile audiences. How well does the theme read on a small screen? We show iPhone simulator screens for comparison.

Individual test results and screens:

Twenty-seventeen theme

The default Twenty-seventeen theme is 1.2M unzipped file size with a 364k screenshot. That means the actual file size is 836k. (Remember all these test are with sample data (post and pages) imported into the theme.)

• Pingdom.com speed test: 609 milliseconds.
• WebPagetest.org: TTFB: 605 milliseconds, load time: 1.719 seconds, Actual theme speed: 1.114 seconds.
• P3 plugin theme speed: 26 milliseconds.
• Browser timer: 1.124 seconds.

Notes: This theme includes a preloaded 112k sample header image. Does this theme really load in 1 second? Yes. It’s proven in all our tests.

Features: This theme includes parallax-background feature images for each front page section. These images are automatically resized if they’re too large. The theme also allows motion video in the header up to 8M. (Please don’t use an 8M video. Lighter, repeating 16-second videos are about 2M). This video file is not loaded on small screens to save speed. Instead a fall-back still image is loaded. On large desktop and laptop screens, the video is loaded last (lazy loaded).  All these techniques conserve mobile bandwidth.

Twenty Seventeen features many sections on the front page. Plus widgets, navigation and social menus, a logo, and more. It has an asymmetrical, one-column grid with a custom color scheme. A right sidebar appears on posts but not pages.

We’ve reported about testing and tricks with Twenty-seventeen default theme elsewhere. Here’s the articles:

https://pagepipe.com/speedheader-twenty-seventeen-before-and-after-benchmarks/

https://pagepipe.com/how-we-cheated-the-speed-tests-using-twenty-seventeen-theme/

---

Avani Theme

Avani theme is 420k unzipped file size with a 273k screenshot. That means the actual file size is 147k. (Remember all these test are with sample data (post and pages) imported into the theme.)

Avani Theme has over 1,000+ active installations. This is the highest number in this test.

• Pingdom.com speed test: 642 milliseconds.
• WebPagetest.org: TTFB: 663 milliseconds, load time: 1.593 seconds, Actual theme speed: 903 milliseconds.
• P3 plugin theme speed: 32 milliseconds.
• Browser timer: 1.361 seconds.

Features: The theme screenshot is beautiful because of the artistic images. The OOBE looks as plain (simple and minimal) as any other theme in mobile tests. Allcaps slabface text on mobile makes the Site ID (headline) looks gaudy. We can fixed it with a shorter description, too. That means we need to fiddle with CSS text styling. Do we like that “pin” icon on the sticky post? Absolutely, not! Usually you want to conceal stickiness from viewers. Lame idea. We’d strip that non-feature using CSS code.

How much does stripping Google fonts save in load time? About 100 to 300 milliseconds. But font loads cause random delays. Then you’ll wait for external server requests. The worst waits often hit 1 second. And heavy Typekit is always a long load time (1 second or longer). Beware!

Avani OOBE Screen

Avani Mobile Screen

---

Burger Factory Theme

Burger Factory theme is 168k unzipped file size with a 116k screenshot. That means the actual file size is 52k. (Remember all these test are with sample data (post and pages) imported into the theme.)

• Pingdom.com speed test: 604 milliseconds.
• WebPagetest.org: TTFB: 560 milliseconds, load time: 1.449 seconds, Actual theme speed: 889 milliseconds.
• P3 plugin theme speed: 38 milliseconds.
• Browser timer: 1.121 seconds.

Features: Burger Factory is a minimalist theme for writers. It puts focus on the words instead of images. Uses excerpts as summaries. Can still be used standard-blog-style. Left sidebar? Big deal. But it’s certainly barebones.

MOBILE

---

Checathlon Theme

Checathlon theme is 589k unzipped file size with a 191k screenshot. That means the actual file size is 398k. (Remember all these test are with sample data (post and pages) imported into the theme.)

• Pingdom.com speed test: 556 milliseconds.
• WebPagetest.org: TTFB: 812 milliseconds, load time: 1.400 seconds, Actual theme speed: 588 milliseconds.
• P3 plugin theme speed: 31 milliseconds.
• Browser timer: 1.089 seconds.

Features: Custom Background, Custom Header, Custom Logo, Custom Menu, Featured Images, Footer Widgets, Grid Layout, One Column, Portfolio, Theme Options.

 

OOBE

MOBILE

---

Expire Theme

Expire theme is 370k unzipped file size with a 126k screenshot. That means the actual file size is 244k. (Remember all these test are with sample data (post and pages) imported into the theme.)

• Pingdom.com speed test: 614 milliseconds.
• WebPagetest.org: TTFB: 914 milliseconds, load time: 2.026 seconds, Actual theme speed: 1.112 seconds.
• P3 plugin theme speed: 32 milliseconds.
• Browser timer: 1.361 seconds.

Notes: This theme includes a preloaded 69k sample header image.

Features: This theme looks pretty good right out of the box on large screens – but not so good on small ones. It would need some adjustment in CSS. If you going for evergreen content with no dates, you’ve lost a cool graphic element. Folder style posts. Blog, Custom Background, Custom Colors, Custom Header, Custom Logo, Custom Menu, Featured Images, One Column, Post Formats, Right Sidebar, Sticky Post, Theme Options.

OOBE

 

MOBILE

---

LightBlog KT Theme

LightBlog theme is 687k unzipped file size with a 404k screenshot. That means the actual file size is 283k. (Remember all these test are with sample data (post and pages) imported into the theme.)

• Pingdom.com speed test: 655 milliseconds.
• WebPagetest.org: TTFB: 666 milliseconds, load time: 1.844 seconds, Actual theme speed: 1.178 seconds.
• P3 plugin theme speed: 50 milliseconds.
• Browser timer: 1.205 seconds.

Features: Another minimalist theme. This theme asks you to load two free plugins: Ajax Pagination and Infinite Scroll and Kirki. As near as we can tell, they are not required. Just suggested. Custom Colors, Custom Menu, Featured Images, Full Width Template, Left Sidebar, One Column, Right Sidebar, Sticky Post, Two Columns.

SCREENSHOT

OOBE

 

MOBILE

---

Louelle Theme

Louelle theme is 526k unzipped file size with a 266k screenshot. That means the actual file size is 260k. (Remember all these test are with sample data (post and pages) imported into the theme.)

• Pingdom.com speed test: 593 milliseconds.
• WebPagetest.org: TTFB: 993 milliseconds, load time: 1.747 seconds, Actual theme speed: 754 milliseconds.
• P3 plugin theme speed: 47 milliseconds.
• Browser timer: 1.141 seconds.

NOTE: Grayed-out text is a fake minimalist trick that makes reading difficult. The body text color should be #333 dark gray using CSS code for better readable contrast.

Features: Simple and lightweight theme. Custom Background, Custom Menu, Full Width Template, One Column, Right Sidebar, Two Columns.

SCREENSHOT

OOBE

MOBILE

---

Oncanvas Theme

Oncanvas theme is 531k unzipped file size with a 165k screenshot. That means the actual file size is 366k. (Remember all these test are with sample data (post and pages) imported into the theme.)

• Pingdom.com speed test: 481 milliseconds.
• WebPagetest.org: TTFB: 615 milliseconds, load time: 1.407 seconds, Actual theme speed: 792 milliseconds.
• P3 plugin theme speed: 28 milliseconds.
• Browser timer: 1.011 seconds.

Features: A light and minimal distraction-free portfolio theme. It displays posts in a 3-column grid layout, without a sidebar on the homepage and archive pages. Blog, Custom Background, Custom Colors, Custom Menu, Featured Images, Footer Widgets, Full Width Template, Grid Layout, Left Sidebar, One Column, Photography, Portfolio, Right Sidebar, Theme Options, Two Columns.

OOBE

MOBILE

---

Responsive Kubrick Theme

Responsive Kubrick theme is 421k unzipped file size with a 343k screenshot. That means the actual file size is 78k. (Remember all these test are with sample data (post and pages) imported into the theme.)

Pingdom.com speed test: 571 milliseconds.
WebPagetest.org: TTFB: 906 milliseconds, load time: 1.557 seconds, Actual theme speed: 651 milliseconds.
P3 plugin theme speed: 37 milliseconds.
Browser timer: 1.154 seconds.

Features: Odd look on mobile. A modern remake of the famous Kubrick theme. Customizable header gradient, lightweight CSS3 build and modern standards compliant. Blog, Custom Background, Custom Menu, Right Sidebar,  Sticky Post, Two Columns.

SCREENSHOT

OOBE

MOBILE

---

Some conclusions:

This is a small sample. Hardly, scientific. Our crude speed tests vary in results – but not much. We already expected that. What we’re looking for is relative rules of thumb – not absolutes. Eliminating all the variables costs too much time, money, and energy. But we can make generalizations:

1. Themes with a 500k zip download package size have a higher probability of one-second page loads. Images optimization and lazy loading affect the speed dramatically. If you’re goal is a 1-second page load on shared hosting, scrimp on images. Or not use images at all (one of our frequent suggestions). Illustrations are better than photographs for speed.
2. Any color usage makes a difference in memorable branding for a small screen.
3. Type differentiation (font style) wasn’t demonstrated on small screens. It rarely makes a difference to the user. But speed does. Slow speed is the bane of every remote mobile user. Sacrifice Google Fonts and Typekit for extreme mobile performance optimization.
4. Use a simple desktop browser timer for measuring speed. To ferret delinquent components, use an online tool like Pingdom.com. These give waterfall loading charts. Those are HTML, images, CSS, JavaScript shown on separate lines. Times show each server resource until it’s downloaded and rendered in the browser.
5. Face it, mobile UX is pretty bland. Images are small. Text is narrow single column. You have to do value analysis of what is important. What are the least features to communicate for results? Severe mobile limitations force creativity.

Our recommendation is the Twenty-seventeen default theme for speed, longevity, and support. And that theme will look better on all devices. Not always. Header images can be problematic.

---

Astra team integrated Schema.org code into their theme.

Schema’s not a good thing – or a bad thing. Unless you curate content the size of the U.S. Library of Congress. Then you need it.

It’s benign like a non-cancerous growth. You can do Schema with a plugin. But small to medium size sites rarely (never?) benefit. No proof. So ignore it.

Don’t add a heavy 1.3 megabyte schema plugin. It doesn’t help SEO unless you’re a university library.

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 percent of all Web pages.

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. This 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”

There is U+1F50D LEFT-POINTING MAGNIFYING GLASS and U+1F50E RIGHT-POINTING MAGNIFYING GLASS.

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 name: Left-pointing magnifying glass
Alternative names:

Magnifying glass, left-pointing

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

http://tutorialzine.com/2014/12/you-dont-need-icons-here-are-100-unicode-symbols-that-you-can-use/

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

UNICODE REFERENCES

http://www.copypastecharacter.com/

◔ ◑ ◕  ●

http://jrgraphix.net/r/Unicode/2600-26FF

Symbols gone amok:
http://unicodeemoticons.com/cool_text_icons_and_pictures.htm

http://dongerlist.com/

Few people care about speed as much as we do.

Susty is the lightest stripped-down WordPress theme we’ve ever seen. It’s not feature-rich like GeneratePress or Twenty-seventeen default theme. But we’ve tested it. It’s built only for extreme-speed fanatics like us. We don’t recommend Susty as a speed panacea.

Susty theme isn’t available in the free WordPress repository.  It’s available as a GitHub download. Still free. (Susty-master: zip file size is 37.4k).

There’s a demo online at: https://sustywp.com/

To illustrate the extremity of Susty theme minimization:

• There are no widgets or sidebars. Period. The widgets section doesn’t even appear in the dashboard navigation.
• There’s no home-page Main Menu navigation. Unlike widgets, you can edit the Menu in the dashboard. The theme author relegates the menu to a different page. We find this novel and are testing it. For a small blog like our test, it’s not a problem. There are navigational workarounds we’ll use later. (And comment on if you’re curious.)
• There are no Google Fonts.
• No Font Awesome.
• No JavaScript calls.
• No jQuery enqueuing.

So what customization is available in the stripped-down theme? Just background image possibilities and solid-color background selection. Pretty sparse.

The author’s journey and decision making process is at: https://blog.jacklenox.com/2018/06/04/delivering-wordpress-in-7kb/

He references a post that inspired him:
https://adamsilver.io/articles/designing-for-actual-performance/

We loved an idea from the referenced post:

“You know what’s better than perceived performance? Actual performance. Avoid techniques that merely provide a mirage of speed.”

Our design-experiment test site has minimal decoration with graphic elements except for one large JPEG background image of an eBook on inner pages.  Default column width is 577 pixels.

Here are interesting speed results on our Susty Home page:

Pingdom test results to NY:
Load time: 433 milliseconds, page weight: 8.8k, requests: 2.

Speed load times to other locations:
Stockholm: 746 milliseconds

Melbourne: 694 milliseconds

San Jose: 295 milliseconds

Where’s the host server located? Arizona. Using GoDaddy cheap magnetic shared hosting with no CDN. Of course, there’s no SSL / HTTPS certification overhead either. That helps. (SSL certification costs $69 per year on GoDaddy per domain. Gak! No thanks. A mere blog doesn’t need that junk).

Like other speed themes, you can inadvertently ruin designed-in speed gains. Simply enqueue (activate) jQuery by adding a simple top-of-page button plugin. That then adds around 33k to page weight. You can also enqueue jQuery weight with the WP jQuery Plus plugin for speed. So don’t use it unless you need jQuery for some other plugin. The Susty theme and WordPress don’t need it.

What else would mismanage this theme? Adding Google Fonts (adds up to 300k additional) or a plugin that needs Font Awesome (add 75k). Easily done by mistake.

As mentioned, SSL would be bad (500ms site drag) and also Google Analytics (100 to 500ms site drag). Do you need those extras for a site where you have few pages and no ecommerce? Not at all. Unnecessary baggage.

When it comes to minimalism, Susty theme is king. Hands-down winner.

Would we recommend it for building a conventional website? Nope. We’d go with GeneratePress.

You get the same fast speeds as Susty theme with Tiny Hestia, Astra, GeneratePress, and Twenty-seventeen default theme.

What you can’t get from other recommended and proven themes is the phenomenal low 8.8k page weight of Susty. Page weight is important for mobile user experience. Speed tricks like lazy-loading delayed images won’t reduce mobile data overhead. Those are tricks of speed perception – not actual speed performance. Susty resolves mobile speed problems with real speed.

---

Susty is fast and lightweight. We’ve proven it loads in under 1 second even with web graphics. But can you create an attractive site with Susty? Can it look better than classic Spartan aesthetic? Many stripped-down themes are mere text and CSS font styling. Pretty boring.

Stripped themes – like Susty – prevent excessive bloat. Why? It’s a “human temptation” problem – not a design problem. Site creators can’t discipline themselves to say “no” to unused features. They fill every slot and pocket provided. Self-imposed limitations using a bare-bones theme removes overload or gold-plating seduction.

You can’t overburden widgets that aren’t there! The unadvertised value of lightweight themes like Susty is:

Instant self-control.

AESTHETICS AND SUSTY FOR SPEED

First we checked what customization was possible. Not much. We could add:

• Background color globally
• Global background image
• Swap out the default logo
• Site Title and Tagline
• Main Menu
• Homepage setting and Posts page

Susty has no widget areas in sidebars or footers – or anywhere!

First: We set the background color to #ffffff (white) instead of the default #fffefc.

Global background image with grayscale gradient to match white background color. 52k, 1500-pixel-wide JPEG. Optimized to a “save-for-web” quality setting of 70Q. Progressive setting used for mobile users

This hero background image presented a problem on the funky Menu page. We wrote the theme author, Jack Lennox, and he suggested some custom CSS code. We added that with the Simple CSS plugin. Fixed!

.custom-background {
background-size: 100% auto !important;
}

We created three 8-bit PNG icons to sprinkle on pages for visual variety.

And a call-to-action badge to sell books.

Next: A replacement logo for theme default.
(895 bytes PNG image, 43px sq.)

And a dinky little 318 byte favicon for browser tab branding.

And one more for visitor cuing device: a borrowed Yoast logo 5.7k PNG image.

 

Summed total image weights on Home page: 82.9k

Load time Susty theme with graphics: 1.25 seconds to Stockholm from shared Arizona server. No CDN. No server cache.

26 FREE PLUGINS WE USED

Add Search To Menu
Displays search form in the navigation bar.
(We’re using an older version of this plugin that’s lighter than the current one.)

Antispam Bee
Toolset for day to day comment and trackback spam-fighting.

BleuT FavIcon
Customize site favicon by uploading an image file.

Block Bad Queries (BBQ)
Firewall to protect WordPress against malicious URL requests.

Change Table Prefix
Change your database prefix after installation to thwart hackers.

Deactivate XML-RPC Service
Deactivates the XMP-RPC API service. A security precaution.

Disable Embeds
Removes the enhanced embeds (oEmbed) added in WordPress 4.4.

Disable Emojis
Disable dead-weight Emojis.

Email Address Encoder
Protect email addresses from email-harvesting robots by encoding them into decimal and hexadecimal entities.

Far Future Expiration
Add a “far future expiration” date for various file types to improve site performance.

Heartbeat Control
Controls the WordPress heartbeat.

Lazy Load by WP Rocket
Lazy load script for WordPress without jQuery or others libraries.

Lazy Load for Videos
Replacing embedded YouTube and Vimeo videos with a clickable preview image. Visitors click the placeholder image to play the video.

Limit Login Attempts Reloaded
Limit the rate of login attempts, including by way of cookies and for each IP address. Security against brute force attacks.

Plugin Logic
Activate plugins on pages only if they are really needed.

Query Strings Remover
Removes query strings from your static resources like CSS and JavaScript files. No configuration needed.

Shortcode For Current Date
Insert current Date, Month or Year anywhere with a simple shortcode.

Simple CSS
Bulletproof CSS using a CSS editor or the live Customizer.

Simple Drop Cap
Transform the first letter of a word into a drop cap or initial letter simply by wrapping the word with shortcode .

Simple WP Sitemap
Adds both an xml and an html sitemap, which updates and maintains themselves.

Title Remover
Hide the title of any post, page or custom post type item without affecting menus or titles in the admin area.

UpdraftPlus – Backup/Restore
Backup and restore: take backups locally, or backup to Amazon S3, Dropbox, Google Drive, Rackspace, (S)FTP, WebDAV & email, on automatic schedules.

WordPress Related Posts
Increase reader engagement with links in content footer.

WP Author, Date and Meta Remover
Remove post meta data. N o settings.

WP Counter
Counter of unique site visitor status in different date range (Today, Yesterday, Current Week, Current Month).

WP jQuery Plus
Loads jQuery from a CDN using the exact version as your current WordPress install.

 

7 PLUGINS WE DIDN’T USE

• Cache Enabler
• Complete Analytics Optimization Suite (CAOS)
• Current Year and Copyright Shortcodes
• Optimize Database after Deleting Revisions
• Redirection
• Remove Google Fonts References
• Simple Back To Top

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 that way!

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.

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. These new image clones are theme dependent. WordPress then processes 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:

Uploading a site icon with theme upload in the Customizer increases the page weight of the favicon.

Facebook discussions go on and on about various “automatic” ways to optimize graphics. They assume oversized graphics are the only possible reason for web slowness.

Will automated image optimization solutions do a better job than a human? We mean better than optimizing each graphic by hand in a photo manipulation program. Machines can’t determine human quality perception. They can take a bad image – and make it much worse. Foolishness.

We’ve done our homework on image page weight (file sizes) and how it affects speed. Images may be 60 percent of page weight – but they aren’t 60 percent of page slow down. There isn’t as big of interdependence between speed and weight as site owners think. Only 10 percent of speed is image waste. The fastest sites on the web have no images. These generally load in under 600 milliseconds. Serious.

But that’s Spartan or Stoic discipline. Speed overkill. The site owner has 100-millisecond Time To First Byte (TTFB rare quality). And 100 milliseconds of SSL handshaking (best case). And then milliseconds to cram in the actual page assets. Done. Less than 1 percent of websites are 1-second fast. How do they look? Boring.

The average page load time on the Internet is 8 seconds. Can you believe that? It’s proven 10 seconds is the end of human tolerance. Backbutton: Click! Gone.

Images load in parallel now on browsers. Fast. They are often no worry at all. Bigger worries are assets that request information from remote servers. You’ll achieve more effective optimization removing Google Fonts than tweaking images. Remove Google Fonts with a free no-setting plugin.

Or even better, a fast theme that uses a mobile system font stack in the CSS style code.

Removing fonts is a nicety for speed but not always essential. Image optimization isn’t a greater consideration than Google Font slow downs. We’re talking 100 to 300 millisecond gains is all. 300 milliseconds is still 15 percent of a 2-second performance budget. You don’t ignore that. But in some cases, we do.

The big exception for image failure is when total geniuses build websites. Pseudo-intellectuals think a 24-bit PNG is WAY better than a lossy JPG. Huge PNG images are then placed on every page as featured images. Horrific misjudgement.

We’ve seen pages drop from 12-second loads to 4-seconds. How? By converting the media library non-transparent PNGs into JPEGs. Is 4 seconds good enough speed? Not ever. But it’s better than average page load time.

Image resizing and compression plugins cost money based on usage. They don’t tell you that in the plugin description. Compressed images on a remote server return back to storage in your media library. The services aren’t free. The meter is running above a set quantity threshold. The exception is Imsanity plugin. (No typo on that odd name). Imsanity stops insanely huge image uploads like from digital cameras.

But Imsanity is still a dull person’s plugin. It’s for apathetic loafers who won’t optimize at all. We recommend using Imsanity as a safeguard against client foolishness. It’s not needed on our sites because we hand-optimize (like you do – right). But it’s our favorite plugin to prevent client sites from blowing up.

Most optimization plugins connect to a third-party server floating out in web cyberspace. Some need an API or account permission request. These remote server calls retard website speed whenever there’s activity.

If you keep images pretty small (dimensions or file size or both), all images load at the same time. Boom. 50 milliseconds. Larger images are a problem. Like full-screen desktop Retina size. Those need examination. They aren’t broken into smaller data packets causing delays. Small stuff is inconsequential for load time.

What things help image speed most? Proper image sizing. First. And second compression settings. But squeezing images to where they’re unrecognizable won’t payback benefits. There’s no reason today not to keep the quality compression setting high – 70 and up.

WordPress optimizes images already to a Photoshop quality of 50. That’s right. WordPress rebuilds and compresses images in the media library. That feature improves on-the-fly swapping when screen sizes are smaller. This is for built-in speed.

Do you need more compression than that? No. But it doesn’t compress original images. Just thumbs and medium sizes. Nor does it resize originals.

Some themes – like Twenty-seventeen default theme – have built-in lazy-load for featured images (2000x1200px or bigger). 3,000 pixels square is the recommended starting size for Retina-ready images. That’s according to Retina 2X plugin instructions. It’s a good plugin if you must deliver Retina images. But that’s a huge and heavy image.

Lazy loading images improves perceived load time. But the same amount of data still goes through the pipe. This extra weight is detrimental for mobile speed. Why? Because of data consumption cost. Lazy loading doesn’t remove any extra data weight, it only delays it.

Lazy load does unpleasant things on occasions. Like loading a logo last that appears at the top of the page. This delayed load may cause Flash of Unstyled Text (FLOUT). That makes a page look broken for a second. This is not good UX. So on some sites, we don’t use lazy load. Or we may choose to disable it on key pages with a plugin like Plugin Logic for selective plugin activation. This is Plugin Surgery.

“So … if I’m optimizing in Photoshop, and then use a plugin will that optimize it even better?”

Pain is a great teacher. Try that trick. It won’t work.

If you compress images in Photoshop or Gimp, you don’t need further compression.

OTHER READING

• https://pagepipe.com/the-fastest-alternatives-to-heavy-jpeg-images-for-page-speed/
• https://pagepipe.com/wordpress-undoes-your-manual-image-optimization-efforts-making-image-files-larger/
• https://pagepipe.com/mobile-image-optimization/
• https://pagepipe.com/the-fastest-alternatives-to-heavy-jpeg-images-for-page-speed/

The Imsanity plugin is one of our secret weapons for image optimization on client sites. As we researched this plugin, we found that it was authored by the same company publishing the EWWW Image Optimizer. The other plugin we love for cleaning up a poorly optimized image media library is PNG to JPG plugin. Both these plugins allow retroactive reprocessing of media library images for speed.

READ MORE ABOUT PNG TO JPEG PLUGIN
REFERENCE: https://pagepipe.com/rebuilding-your-site-for-mobile-speed/

Sadly, those aren’t typos on the plugin spellings: Imsanity (300,000 active installs) and EWWW (700,000 active installs). We think both these plugins are poorly named. In spite of that marketing error, they’ve been discovered and accepted.

EWWW Image Optimizer, a paid subscription service (API), also authored Imsanity plugin. That was in collaboration with Jason, a software developer, in Chicago, IL. For example: 3,000 EWWW compressed images cost about 9 dollars – their smallest order size. You pay in advance with prepaid credits.

We don’t like services or plugins that cost repeat annual or usage fees. We call that *rent*.

The EWWW.io geographical location is in Glendive, Montana. Population: 5,107. It’s the home to Dawson Community College. The Imsanity and EWWW plugin author is Shane Bishop. He works at the college as Director of Technology.

Imsanity is a free plugin. (200,000+ active installs, 154k package size). It isn’t the same as EWWW plugin. For EWWW, remote mage processing happens on another server. For Imsanity, processing is on your host server using WordPress features. Default JPEG quality is 82 to match the WordPress default. This has been proven to be the equivalent of a Photoshop compression quality setting of 50. Images with this setting pass the WebPagetest.org criteria for speed optimization.

Imsanity is an automation plugin to resize images in your WordPress media library. It can adjust the dimensions if they are larger than width and height settings. That is a unique feature. Optimization plugins like free Smush (1 million+ active installs) do not resize images. They only change the compression.  And it isn’t lossy compression. It’s lossless. That sounds like a good thing but it’s not. It only compresses images by about 10 percent. Whereas, visually-lossless or lossy compression reduces image weight by 70 percent. Smush is the worst choice for speed.

Activating Imsanity plugin doesn’t alter existing archived images. Imsanity only resizes images when uploaded. But you can retrofit with a “Bulk Image Resize” feature in the Imsanity settings. The “Bulk Image Resize” feature allows you to resize all existing images in the media library.

Imsanity doesn’t search your file system to find large files. Instead it looks at the “metadata” in the WordPress media library database. To override this behavior, enable deep scanning in the plugin settings. Then it will scan the server.

You can re-name your original image file and add “-noresize” to the filename. For a file name of “photo.jpg,” you can rename it “photo-noresize.jpg.” Then Imsanity will ignore it, allowing you to upload the unchanged full-sized image. That will protect an image if needed.

Photos from modern cameras and cellphones are too large for full-size browser display. DSLR camera photos are for high-quality printing. They’re over-sized for web page display. They turn your site into a slug for speed.

Imsanity allows you to set a *sane* limit. That constrains all uploaded images to a reasonable size. They will still be large enough for typical website needs.

Imsanity changes happen immediately upon image upload, but before WordPress processing occurs. WordPress behaves exactly the same as always. If a contributor uploads oversized images, Imsanity scales it and replace the original.

Imsanity uses a configurable size limit. The default value is large enough to fill a typical web screen without scaling.

Don’t use Imsanity for the following:

• Stock art download sites.
• Providing high-resolution print images.
• Storing a high-resolution photo archive.

WordPress onboard image processing – without plugin assistance – includes poor features for resource consumption.

During upload WordPress keeps the original full-size image in the media library. Depending on the original size, WordPress creates up to 4 smaller-sized file copies:

• Large
• Medium-Large
• Medium
• Thumbnail

These are for embedding on your pages and posts. The original usually sits on the server unused, taking up server disk space. That usually isn’t a big issue. But we’ve seen exceptions. These can make website backup with normal plugin methods impossible if your media library grows too large to handle.

Imsanity is short for “Image Sanity Limit”. A sanity limit is a term for limiting something down to a size or value that is reasonable.

MORE

https://pagepipe.com/the-fastest-alternatives-to-heavy-jpeg-images-for-page-speed/

Is website font decoration more important than speed performance? Is the typography on your site the easiest way for users to consume content?

Zero-latency fonts mean losing no time in exchanging information. The system responds with instant font information. We recommend not using Google Fonts – or any other font hosted from a remote server.

REFERENCE: https://pagepipe.com/should-i-disable-font-awesome-and-google-fonts-for-improved-speed/

The more fonts you use the worse site drag becomes. OMGF plugin is for hosting Google fonts locally. We’ve tried it and are not impressed. For best speed, accept your fate. Sacrifice fancy custom fonts and use utilitarian system fonts instead.

There are other tricks touted by various plugin authors and coders as beneficial. These include lazy loading fonts or reducing font character sets. These are esoteric wastes of energy. A false sense of superiority to justify keeping decorate fonts.

Attractive fonts are popular for designing a website. Most don’t realize web fonts add extra HTTP requests and affect server response time. Don’t go for fancy. Simplify. Don’t follow herd popularity. Face it. Content readers don’t care about fonts as much as the whim of website owner. Give up the vanity.

Why is a mobile font stack best practice for mobile speed performance?

The fastest font is one where you never have to make a request. In the past, those were ubiquitous web-safe fonts like Arial, Verdana, and Georgia. These are on 99.9 percent of computers. The last font specified in a font stack is a catchall fail-safe sans-serif or serif default font.

The System-UI font is best for readability on small mobile screens. These are the default font settings in modern themes. Themes like WordPress default Twenty-nineteen theme or GeneratePress or Astra. They use a Cascading Style Sheet (CSS) font stack coding trick. It looks like this code definition:

font-family: -apple-system, system-UI, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

This snippet instructs the browser to use device native fonts. On modern themes, you make these settings in the theme customizer. When loaded, the theme checks the first font suggestion. Then proceeds to the last in the series until it finds a system match. This happens faster than a blink. This is great, for two reasons:

There’s no external font to download during page load.

The site adopts the feel of the OS, making it feel “just right.”

Defaulting to the system font of a particular operating system always boosts performance. The browser doesn’t have to download any font files. It’s using one it already had. That’s true of any web safe font, also. The beauty of system fonts is that it matches what the current OS uses. It’s a comfortable look. It’s optimized and built-in for the device screen. Native fonts are already installed on the computer or device. They’re designed for best mobile readability on small screens.

What are those native fonts? It depends. For example:

• Mac OS X (El Capitan): San Francisco
• Mac OS X (Yosemite): Helvetica Neue
• Mac OS X (Mavericks): Lucida Grande
• Windows (Vista): Segoe UI
• Windows (XP): Tahoma
• Windows (3.1 to ME): Microsoft Sans Serif
• Android (Ice Cream Sandwich (4.0)+): Roboto
• Android (Cupcake to Honeycomb): Droid Sans

With new system versions, come new fonts, and thus the need to update your font stack.

But there is a method to end babysitting font changes: specify system UI fonts. It doesn’t need a web-font delivery service or font files stored on your server.

We recommend using the zero-latency system UI fonts on your website.

When we use code like font-family: system-UI, sans-serif; we’re all set. Here’s what happens on various devices:

Enabled by default in Chrome 56, system-UI is a special font name. It tells Chrome to use the system font (be it Cantarell in Gnome, San Francisco in macOS, etc.)

So today this is the recommendation:

font-family: -apple-system, system-UI, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Safari and Firefox on Mac will recognize -apple-system and use the Mac system font. Then comes the standard system-UI, but only available in Chrome 56. Older versions of Chrome, on Mac only, will interpret the same with BlinkMacSystemFont. Now comes Segoe UI, unlike the first three this is a real font name, the one used in Windows since Windows Vista. Now comes: Roboto for Android, Helvetica Neue for some versions of macOS, and Arial for old Windows.

This superior font stack below helps Linux users – and everything else:

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", Arial, Helvetica, sans-serif;

If you want, you can still add Droid Sans for old Android, Fira Sans for Firefox OS, and maybe Lucida Grande for some old versions of macOS. The list is long – but you only have to type it once.

Does removing web fonts make your site faster?

Yes.

Speed design requires compromise. Removing web fonts is an easy 15 percent speed gain – but often even better.

 Sliders
Myth: Slider plugins enhance WordPress themes.
They always slow down a page load. And they are proven ineffective for navigation and SEO.

We generally think image sliders are a bane. We’ve written about the problems before. But if your client is insistent upon having a slider to show a gallery of photos, what should you do?

First convince the client of the negative aspects of a slider – especially if better SEO is their defense. (See the links below for expert defense). Using a slider for presentation is not a bad thing. But offload it from the Home page to a page of it’s own. And then use Plugin Logic to only activate the slider on that page. That means you’ll have one slow page and not all site pages will be sluggish.

So what slider do I choose?

Fortunately, Chris Lema did some quick-and-dirty benchmarking in his review: How do you find the best WordPress slider? Saved us a lot of trouble not having to test 20 different slider plugins. Some plugins are paid and some are free.

Also, there’s a good slider-speed article over at WP Rocket >

They said:

“For your everyday slider needs, I would go with Meta Slider. It’s free, relatively lightweight, really easy to set-up and will have the least negative impact on performance.”

Our recommended winner for speed is: Huge IT Slider – just 315 ms. And good news, it’s one of the free ones.

Sliders are usually large moving images that “slide or fade-in” at the top of the page. This can be an unlimited number of images. They may or may not contain textual content. Slider function may be included in a theme or it can be added as a plugin. Sliders can be responsive or fixed width. They can also do some weird and wild animation like exploding the image or breaking into a matrix.

Are there redeeming qualities to sliders?
Yes. We think so. But Steve’s thinking is more unconventional. Christian will probably mention, all clients want a slider on their home page. We’re in favor of a single large static image on the Home page. That single image may be best used in a “solo” slider. People like to look at large images with depth and detail. It’s a pleasant experience and if transparent it will not distract readers from written content. A slider can make for an “inviting space” where visitors will want to return. A series of three slides can tell a motivating visual story. That requires thought or custom art.

Any movement or animation on a web page is as distracting as a fly crawling across the screen.

What is the biggest problem with sliders on Home pages?
The problem almost never lies with the slider itself – even though they’re not all the same. Problems are introduced by designers or a committee. Slow page load time is the worst problem and very close to that is page clutter. Visual noise. Multiple messages with no hierarchy. By visual noise, we also mean things like a slider running too fast so visitors can’t absorb the content with self-paced reading. Too many irrelevant slides.

How much time does a slider slow down a website?
Random tests have shown an additional delay of 1 to 2 seconds worst case per page. That is a long time in the web world. But it’s not the worst speed hog for WordPress. Some themes are not well engineered and with no plugins or slider activated can load in 4 to 8 seconds. But add a slider on top of that and you are pushing the limits of human attention span.

Seven expert testimonials that sliders suck. Free PDF >
1 page, 7×11 inch, b/w, 22k, PDF download

Great online demonstration of how frustrating sliders are >
Offsite HTML slider demo page

Is it bad to make slider images clickable?
Only one percent of visitors actually click on a slide, which almost always is the first slide. They simply ignore sliders. This is called “banner blindness.” There is nothing wrong with clickable images as long as it’s not the only way to navigate. Companies like Apple, Adobe, Amazon, eBay, etc use navigation redundancy on a web page. Their typical goal is three different ways to navigate (header, footer, buttons). This again is a transparency thing. They don’t want visitors getting frustrated finding anything. So clickable sliders isn’t necessarily productive but it’s a benign navigation alternative.

Any other comments about sliders?
WordPress sliders don’t always work well on mobile devices. The vendor or author may claim they work fine but they can cause failure of page navigation and distort images. You have to test this stuff. Just make your screen thin as an iPhone and see what happens. You may be surprised by ugliness and loss of functionality.

We’ve been anti-animation for many years. This is because moving objects distract from the really important stuff. We’ve used the example of trying to read printed text with a fly crawling around on the page. Your eye is naturally pulled to the fly and it drives you nuts. It’s the same way with all web history of animation. Animation is not inherently bad. It’s the abuse of animation by designers that ruin pages. We call it excessive expressive aesthetics or simply visual noise.

Article about sliders >

Another great article with alternatives to sliders >

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 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. Imsanity is a free alternative.

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.

Many speed tests recommend using webP format for images instead of JPEG or GIF or PNG formats. Why? Where did this odd image dogma originate?

You guessed it:

Web-deity Google.

It may blow you a way to find out it was NOT strategic engineering by Google brainpower. It was an accidental leftover from a business buyout.

At the Big-G board meeting: “Hey? What should we do with this leftover thingy?”

Hermione Granger, sitting up front raises her hand with enthusiasm, and recommends,

“Let’s call it webP image format — and tell everyone it’s magic.”

Go to WebPagetest.org and run a speed test on a page. You will find a little text link with the label: Image Analysis. Click it. You will go to https://webspeedtest.cloudinary.com/ It automatically starts evaluating the images on the page.

Cloudinary provides a cloud-based image and video management service. Founded in Israel in 2011.

For our PagePipe homepage, it identified one image to optimize. This one: 100-plugin.png. But it is lazy loaded.

See the errant image (red). It is lazy-loaded. It loaded after everything else. This means it isn’t delaying any other web asset from loading. We’re using a lazy load plugin. WordPress core added a builtin lazy load after August 2020. Free bonus.

Cloudinary says we can reduce that image’s page weight from a 4.6k PNG to a 1.5k webP image. That saves 3.1k. In big letters, they tell us that is a 32-percent saving.

Is that significant? No.

Is it worth bothering with? No.

Why?

Images load in parallel. All at the same time. Boom!

It isn’t one after another serial loading like in the old web days.

And dang it, this page loads in a half-second. That is good enough.

REFERENCE: https://pagepipe.com/rebuilding-your-site-for-mobile-speed/

What is parallel loading?

It means when you look at a speed-test waterfall, you see all the images cascading in a straight line down the page.

EXAMPLE IMAGE
WebPagetest of URL https://pagepipe.com/image-rotation-using-plugins-for-site-efficiency/

Google edict tells us webP image format reduces image weight by 25- to 35-percent. That means the 233k of images on the test page will be 83k lighter. Cool! But when we test switching to webP, the gain is only 10 percent. Only 23k gain.

The same sorry results as lossless JPEG compression with cruddy, free Smush plugin.

We share our PagePipe server with 26 other domains that are not affiliated with us. How generous – sharing. You can check your own site here: https://www.yougetsignal.com/tools/web-sites-on-web-server/ The tool will also tell you if an “adult” site is on your server hogging bandwidth. Just ask your host to please move you to a different server.

What the heck is webP and why does Google think it’s so fantastic?

First, let’s review some source credibility or track record? Google is the company supplying the slowest-loading third-party components on the web. We’re talking:

Google Analytics
REFERENCE: https://pagepipe.com/how-does-google-analytics-affect-mobile-page-speed/

Google Fonts
REFERENCE: https://pagepipe.com/zero-latency-fonts-for-mobile-speed-system-ui-font/

Google ReCaptcha
REFERENCE: https://pagepipe.com/how-google-no-captcha-captcha-slows-down-your-mobile-site/

Google Maps
REFERENCE: https://pagepipe.com/google-maps-and-mobile-wordpress-speed/

HTTPS/SSL Security Dogma
REFERENCE: https://pagepipe.com/httpsssl-and-its-negative-impact-on-mobile-speed/

Google Snippets
REFERENCE: https://pagepipe.com/why-you-shouldnt-waste-your-time-and-speed-writing-seo-rich-snippets/

That’s enough!

Google overstates its speed prowess and expertise. Its technology and policies slow down the internet. Even its gold standard speed test – Google PageSpeed Insights – is goofy.

REFERENCE: https://pagepipe.com/online-speed-test-scores-are-especially-useless-for-mobile-speed-improvement/

What a luxury for Google.

They ignore their own hypocritical speed tests because they own the internet. It’s a good thing Google doesn’t actually use these results in page ranking. That’s right. You wasted your life chasing whimsical vanity metrics invented by altruistic Google.

“WebP is an emerging image format put out by Google. It’s designed to use a more aggressive and better-optimized compression algorithm than JPG and PNG with the objective of reducing file sizes with minimal quality loss. And that means faster websites consuming less bandwidth.” – source

“WebP is a modern image format that provides lossless and lossy compression for images on the web. Using WebP, … developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.” – source

“WebP is probably the best image format you’ve never heard of. Incredibly, it has the same quality as a JPEG, yet it’s typically 30-percent smaller in file size.” – https://wordpress.org/plugins/sirv/

*Sirv is a professional image hosting and WordPress CDN service.

“[WebP] has several drawbacks and they’re pretty significant. One of the drawbacks is that animation saved as WebP requires more processing power during playback compared to good old GIF animation. Practically, it may take several more years until WebP becomes the successor of JPEGs and dominate the internet.” – source

Google designed webP format for the Google Chrome browser. Unfortunately, webP is not supported in Apple’s Safari web browser. Firefox added webP for desktop and Android, but it will not work in iOS. This is because Firefox for iOS runs on Safari’s WebKit engine.

WebP is natively supported in Google Chrome, Firefox, Safari, Edge, the Opera browser. And by many other tools and software libraries. Developers have also added support to a variety of image editing tools.

Google didn’t set out to reinvent the JPEG format. They acquired a video encoding company. And discovered part of the technology happened to work well on still images. They’ve since open-sourced the codecs.

Reading these glorious compression weights is great. But are these claims real and worth it? Should we convert an entire media library to WebP? Is that a smart thing to do? Could we get a 1-percent extra size reduction while preserving image quality? The results are a surprise.

Despite webP’s announcement in 2010, it’s still an emerging format. That means that that it is not universal or compatible. Not all browsers support it.

Internet Explorer and Safari do not support WebP.

Photoshop doesn’t natively support WebP, but you can add a plugin to add WebP support. That’s a clue. Adobe thinks it’s lame.

“The WebP lossless setting is specifically designed as a replacement for PNG files. But in my tests in taking existing optimized PNGs and converting them to lossless WebP I ended up with files that were significantly larger than the originals.” – source

BONUS SECURITY SIDE-EFFECTS

If a user downloads a webP image from your website, good luck reusing it. They can’t open it in Photoshop. Not without installing a plugin. They can’t view it or edit it without using special webP-compatible software. And they’ll run into trouble sharing it by email or social media.

If you upload a webP file to Facebook you’ll get an error message. Uploading a webP image to WordPress also fails with a security warning. Stealing webP images makes for a hard time doing anything with them. Facebook got a lot of complaints about this reason when they rolled out webP.

This isn’t a true security strategy. It’s still an interesting side-effect.

We don’t recommend webP if you’re looking to speed up your site. There are other options for slimming down your images.

• Lazy loading images increases the perceived load speed.
• You can also use fewer images.
• Correct image size for the display reduces the data mobile users download.

OFFSITE LINK ABOUT WEBP FORMAT BEING LAME

https://wpjohnny.com/2020-is-webp-global-yet/

https://calendar.perfplanet.com/2014/mozjpeg-3-0/

NOTE: WordPress 5.8 and newer support the WebP image format. Please don’t be seduced by that. Don’t use it.

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, variety, 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.

TWO PLUGINS WORK IN TANDEM

★ ★ ★ ★ ★
Simple Content Adder

Load Time: 60 milliseconds
Active installs: 30+
Zip file size: 1.2M

★ ★ ★ ★ ★
WP Image Refresh

Load Time: 1 milliseconds

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

ROTATING PSEUDO-FEATURED IMAGES

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.

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:

[ wp-image-refresh ]

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. 8,000 active installs, 59.1k download file.

Updated: [ current_date format=’F Y’ ]

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. JPEG format is best for photographs.

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.

SPEED BENEFITS

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 WebPagetest.org. 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.

---

Question: I recently reviewed your post: 58 Active Plugins Load in Under 2 Seconds and I noticed in the footer that the images for two reports are rotating when refreshed. May I ask how this is done?

Answer: The rotator works on all our blog posts – not just that one. There are various ways to do this without causing site drag. We’ve written about one way on this very page you’re reading.  We talk about using two plugins in tandem to get the effect: Simple Content Adder (very esoteric plugin) and WP Image Refresh.

But here are a few more ideas:

An alternative plugin that’s faster – but requires some “CSS coding savvy” – is:

PRyC WP: Add custom content to post and page (top/bottom) plugin

We have also used:

Image Refresh plugin

But it sometimes conflicts with other plugins. So it’s an alternative plugin but not preferred.

Which plugins to use depends upon what goals you’re trying to achieve.

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.

A 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.

And another heavier plugin: WP Meta and Date Remover, Active Installs: 60,000+, 932k download size.

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
Load Time: unknown

BOOTLEG VERSION: datetime-now-button

Date/Time Now Button is no longer available in the plugin directory but still works fine. Here’s how:

 

 

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

Magic Dates

and

Years Since

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

Admin Post Navigation

And

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 blogroll search results. Nice.

---

DEMONSTRATION VIDEO
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 or days ago seems fresh.

Change Last Modified Date
https://wordpress.org/plugins/change-last-modified-date/

Bulk Post Update Date
https://wordpress.org/plugins/bulk-post-update-date/

Post Date Time Change
https://wordpress.org/plugins/post-date-time-change/

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.

https://wordpress.org/plugins/wp-post-signature/
Comments: The screenshot of the controls looked overwhelming. It wasn’t clear if an image file is included or if it’s just text.

https://wordpress.org/plugins/danixland-author-signature/
Comments: 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.

https://wordpress.org/plugins/ft-signature-manager/
Comment: 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.

https://wordpress.org/plugins/dt-author-box/
Comments: 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.