My brother Brad is an artist. He does landscapes, woodcuts, abstracts, book illustration, comic books, and many other artistic expressions. His million-view blog is ThickPaint. His YouTube-channel has around 1.4 million views. He’s an art “thought leader” with a reputation.
B rad wanted to show landscape images to gallery owners. Speed was not an issue. The target audience has ultrahigh-resolution, large screens and fiber-optic Internet connections.
Retina-friendly images for professionals – and speed for curiosity-seeking mobile visitors?
Typical screens now have a resolution of 1024 x 768 pixels or higher. Mobile presentation of fine art is unusual. Who reviews and critiques artwork on a small, mobile screen? Not a serious buyer. Version 4.4 of WordPress added support for mobile, responsive images. That addition takes care of most mobile users needs for image resizing. (More, in a bit, on image high-resolution enhancement with a plugin).
Common ultrahigh-resolution displays are between 1,920 × 1,080 pixels and 2,880 × 1,800 pixels. 4K and 5K displays pack millions more pixels than lower-resolution displays. 4K computer monitors have a display resolution of 3840 × 2160 pixels. This is about four times as many pixels as a typical 1920 × 1080 pixel display.
Apple coined the marketing term “Retina displays” to describe ultrahigh resolutions. One-third of all iPhone users still have a 4-inch screen. Thats a pixel density of 326 pixels per inch (ppi) on a 4-inch, diagonally-measured screen. The goal when introducing the iPhone 4, was about 300ppi for a device held 10 to 12 inches from the eye. That’s the same as 300-dpi, catalog-print-quality resolution. The iPhone 7 (2017) still has the same resolution – but on a 5.5 inch screen (diagonal).
Retina images are heavy and slow loading. Very heavy. Very slow.
In 2013, Retina displays were on 1.1 percent of computers. Today, it’s much higher because iPhone and iPad tablets use them, too. Images get heavy when catering to creative professionals using large, desktop Retina screens.
Web designers can’t prepare Retina images the same as normal 72ppi web images. Images that aren’t optimized for high-resolution screens don’t look very good. Our opinion is this extra care matters little for most websites – and their users. We don’t ever prepare Retina-ready images. It’s unnecessary overkill.
Recommended image sizes:
Smartphones: 888 x 888 pixels
Tablets: 1366 x 768 pixels
Laptops: 1600 x 900 pixels
Desktops: 1920 x 1080 pixels
Retina Displays: 2560 x 1600 pixels
4K Displays: 3840 x 2160 pixels
What size should you upload? The bigger the better. This, of course, is horrible for speed.
WP Retina 2X
2.7 million downloads (4 percent retention)
1.1M zip file
The WP Retina 2X plugin creates the image files required by retina devices. Then your website looks crisp on every device. The plugin recommends full-size image resolution of 2520 × 1200 pixels. Then the plugin generates a full set of eight images required by your WordPress website. Double the normal number.
The optimized plugin won’t slow your site down. Nor does it weigh down your WordPress database. The plugin only makes one HTTP request and it’s for a script called picturefill.min.js. It weighs 5.5k and loads in parallel with other page files in 123 milliseconds. It’s as if the plugin is transparent.
For Brad’s site, we uploaded images about 3024 × 3024 pixel size. These weighed from 1.5M to 2M file size. We did optimize images before uploading using “save for web” features in GIMP for Linux. The JPEG quality setting was 80. This reduced the image weight from 3M to 2M – about 30 percent.
Today, average web pages weigh 1.3M. Extremely heavy. The Retina images are larger than all components to build a single web page.
That image size on a mobile page destroys speed. The delay isn’t tolerated. The answer is to use a gallery plugin with lightweight thumbnails. The one we chose is Oqey Gallery plugin.
Oqey Gallery plugin was closed on January 26, 2018 and is no longer available for download. Reason: Security Issue SQL Injection Vulnerability. – Thanks for the ehads up to Vee Valkonen.
From our past research, people will only look at about 12 images per portfolio section. They get bored around nine. So we wanted a grid of 12 thumbnails. Those then open up a view of the heavier, Retina-quality, full-screen images.
We chose a free, bare-bones theme called Graphy from our under-1M-compressed speed collection. We needed a simple, unadorned, classic look that wouldn’t detract from the portfolio.
When you’re working hard to optimize a website, you learn that image file size is an important detail for speed. Many online publishers haven’t the time to learn Photoshop or other image editing programs. Automated optimizers are the next best thing and can speed your production. But which ones do a good job and how good is good enough? Big questions.
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.
Just make the page feel “fresher.”
One more plugin trick to consider, is “Date and Time Widget.” This is a simple lightweight plugin (9k compressed download) that can put a date (and/or time) in your sidebar or footer. The date is derived from the internal computer clock of the user’s browser computer. This old trick makes the page look “fresher” as if it was just updated and hasn’t expired.
The Date and Time Widget plugin has the choice of formats for both date and time. And you can customize the font, font size, text color and background color.
To write comprehensive, in-depth evergreen content, it should be at least 2,000 words long. When crawlers crawl the page, they view it as highly topical, when covering the content title well.
We frequently update our articles. We then want a fresh publication date. When making changes – if you just press the publish button – it won’t alter the publication date. You then must manually enter a date.
Ah, there’s a plugin helper to insert today’s date and time for you. That helps keep posts “evergreen.”
★★★★★ Date/Time Now Button Active installs: 2,000+
Zip download size: 29k All Time Installs: 10,191 Retention rate: 19.7 percent (good)
Date/Time Now Button is an older plugin but still works fine. Here’s how:
Two other handy plugin auto-increases text years and numbers for evergreen content:
Active installs: 200+
Zip file size: 1.7k
All-time downloads: 1,477
Retention rate: 13.5 percent (low)
Active installs: 10+
Zip file size: 2.5k
All-time downloads: 72
Retention rate: 13.8 percent (low)
A few other plugin tricks while working on the backend when you have a lot of posts:
We use to this plugin to exclude some content from onsite search. It may be password protected posts – or something like testimonials and quotations. The plugin keeps these from appearing in search results. Nice.
Updating publication date improves clickthru from Google listings. Users click on recent Google results. A published date from 2013 appears stale. One from a couple of months ago seems fresh.
By default, WordPress always compressed images upon upload. In version 4.5, WordPress changed JPEG compression from 90Q to 82Q. This reduced image weight by an average of 25 percent.
Since version 2.5, WordPress used a default-quality setting of 90 to optimize images. A 90Q setting creates larger file sizes than recommended by modern web best practices. For example, WebPagetest warns site owners if images aren’t compressed enough.
WebPagetest specification: Images compressed within 10% of a Photoshop-web-save quality of 50 will pass. Up to 50% larger will warn (we guess that would be around 70Q to 75Q). Anything larger than that will fail. The image score is the percentage of bytes saved by image re-compression.
Photoshop provides a handy “Save for Web” option that keeps file sizes low. But what about a large website with a lot of images? An online store might have thousands of images. Having to create different sizes of each of these is an enormous task.
WordPress uses ImageMagick, an open-source command-line graphics editor, to quickly resizes images. This technique maintains great visual quality and small file sizes. It automates resizing image compression with formats like Jpeg and PNG.
The Odd Number of 82Q.
Researchers compared ImageMagick’s various compression settings against Photoshop’s high quality (60Q) setting for JPEGs. An Imagick compression setting of 82Q was closest. They used an open source test to compare dissimilarity of input and output Jpeg images.
Changing the default image quality setting is a small change. Yet, it makes a big impact on file size without sacrificing perceived image quality. The new 82Q setting only applies to the intermediate size images. Not the original files uploaded by users.
To change original image size dimensions and quality settings, we recommend Imsanity plugin (200,000+ installs).
We repeat: original full-sized, uploaded images remain unaffected. This change only affects images resized by WordPress, such as image thumbnails. For international users, on slower web connections, this is important for performance optimization.
We agree with these changes for improving WordPress speed.
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.
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 isDashicons (67k page weight). WordPress uses Dashicon in the WordPress administration control panel. But themes can access the invisible and unused font.
WordPress baked Genericons into four themes: Twenty-twelve, Twenty-thirteen, Twenty-fourteen, and Twenty-fifteen. Many other theme developers are in love with the font. We have a low opinion of the icons because it requires hacking to remove. They are dead weight. Just because you can do something “excellent” doesn’t mean you should.
Many designers who care about load time wish they could disable these icon fonts. It’s possible to do – but requires “unorthodox code exorcisms” via FTP. Risky business. We’ve messed with it and it’s not fun. We wish there was a plugin for disabling font icons.
The problem is, when calling even one single icon symbol from your theme, WordPress loads the entire icon set. In our testing of themes, we’ve seen 30 percent of Genericon loads produce 404 errors. The server can’t find the requested icon font. That’s a big fail because 404 errors cause page-load delays. They can be worse than loading the heavy font itself.
It’s possible to subset icon fonts to accelerate load times. Sub-setting creates a font that only contains the characters you use. This can reduce icon page weight. Fontello Font icon generator is an example of online automated icon sub setting. Genericons and Dashicons are not in the collection – yet.
These are the freeware icon sets available on Fontello:
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.
Exciting, flamboyant, and dynamic: Intense E-motion includes an optimized, super-lightweight video SpeedHeader and supplemental featured images. These are specially made for web designers, site developers, and WordPress website owners. Created for branding your Twenty-seventeen theme.
It takes knowledge, skill, and patience to find or build non-bloated visual elements. The hunt for orchestrated, featured images is a huge time sink. We save you time and frustration.
Above: SpeedHeader demonstration video for Twenty-seventeen WordPress theme. Atmospheric motion video adds just 296k page weight. Fast-loading.
Image-heavy sites kill page speed. The top contributors to slow load times are images and videos. You now have a cure for that.
Speed Test Results for “Intense”
Tests were on cheap, shared, magnetic GoDaddy hosting. For us – as irrational speed freaks – a 854 millisecond load time* with a server overhead of 510 milliseconds (TTFB) is impressive. No brag. Just screaming fast. No CDN or caching plugins.
OK. Enough about speed. More about the cool branding you get with Intense E-motion:
Recommended Geometric Sans Serif Typography London-Between Two by Francois Bruel. Offsite freeware font download.
Display-image typography matters. Conscious and subconscious font cues influence visitor’s positive memories. We select typefaces with the right personality.
Lightweight graphic elements for featured images. Premade GIFs included with layered Photoshop .PSD file for making your own custom signage.
Bonus freebie color feature GIF image and a still fallback image:
FREE DOWNLOAD 296k video size. Home-page test: 854-milliseconds. Pingdom.
PagePipe’s goal was adding various full-width images to our catalog page near the top. Not only the column width like with many sliders. We were testing how to put a slider in the featured-image slot. A paid slider plugin didn’t work as promised. After an update – the plugin author couldn’t upload the plugin via WordPress. They wanted either FTP or Cpanel access. We told them, “No way!”
The plugin company then issued us an expiring store credit. We told them that wasn’t good enough. We requested a reimbursement. We told the number of annual visitors we get on PagePipe. We said we’d be reporting our experience. We then got same-day reimbursement. We figured if they could rob us – we could blackmail them. Fair is fair. If you want to know who they are, email us.
Using heavy sliders (and light ones, too) on the home page are a disadvantage. They hog bandwidth and distract precious visitor attention. Appropriate slider usability is not a loss when applied on subpages. You must use selective activation to prevent site drag. If full of irrelevant stock images, you’ve done your site a disservice.
Web assets must add value or have purpose. Adding frivolous assets causing site drag (global loading) is nonsensical.
What’s appropriate slider usage? One good use is displaying a portfolio or a range of product images without links. Or a short, three-panel story is another. And then only if it *feels* right for UX. No links. No hover stops. Fades are best. Nothing whizzing, exploding, rotating, or hurried.
The goal is subtle implication there’s more than one product offering. You need a cue at the page top when the catalog content is much further down. It’s not a solo product page. It’s a catalog page. The slider is for page differentiation and visual cuing. The slider should not contain all product images. Only a representative sample to keep things light.
Usually it’s best not to use sliders for navigation. They aren’t effective (read reference). But we’ve put sliders on many sites for presentation. Even home pages. Why? For the same reason most do it: the client demanded it – and they write the checks. But we also insist the owner dump something to compensate for the extra slider weight. Something heavy like Facebook real-time counters – or a YouTube video – or Google Maps. It’s a negotiated speed deal.
Sliders are NOT dumb and evil. It’s how they’re used in design and communication methods. Site owners are often unaware of the global speed infraction.
Large images are dramatic and people like to look at pictures. Adding large images is deliberate for better UX. But where and when they should appear is the important question and how much they weigh. Is the home page sacred ground? Yes. Don’t bloat it. Build for for fastest page loads. But not always. Some sites get more traffic through other landing pages than the home page. If that’s the case, avoid sliders on those pages.
The inclination is putting the slider on your gateway page. Bad form!
Readable interesting text is always most important – not images. People want to read good text that solves a problem for them. Even if the problem is boredom. With a good picture, they still want something to read to understand why the picture is there. They want words. Even with art: a caption or title does wonders.
We made a moronic and impulsive $25-dollar slider-plugin buy. We got duped and had major buyers remorse. We got a refund only because we’re a technology publisher. We’ll never buy another plugin or theme again (maybe?). We learned a valuable lesson about paid-and-premium offers. Later, we found a free slider plugin (Master Slider).
Is Master Slider a *special* slider? No. (How they can advertise a slider as being SEO-friendly is beyond our understanding!) It’s what it doesn’t do that we like most. It doesn’t cause unnecessary page bloat. It adds 6 calls to the page. We can live with that. Lots of slider plugins do that. We wanted to test drive this one.
The real kicker for speed is optimizing and limiting the number of images. For example, we intentionally compromised on slider image quality. Four images used (out of a dozen). They’re reduced to half the size – 991×595 pixels. The other large solo header images are 2000×1200 pixels (retina) recommended default size. The smaller slider images then dynamically-resize to fill the full-page width. There’s deliberate visual loss. The low-tech versions weigh around 40k to 80k. The large featured images on individual product pages vary from 150k to 250k.
Face it. Quality on moving images is a low-priority.
The final catalog page weight is 420k with 45 requests. Time to Europe on Pingdom, 1.84 seconds. to Australia, 1.7 seconds. We aren’t using minification on this page because it breaks the ecommerce features. That happens even with paid Woo-commerce. We’re using free Easy Digital Downloads plugin.
We’ll never succumb to purchase temptations again. Lesson learned. Until next time, anyway.
During these experiments, we realized the dangers of Twenty-seventeen Home featured image. It’s added via the customizer. This causes image loading on every single page and post. Even if it’s not visible (suppressed by CSS code). It’s still loaded on the backend. The original image was around 200k. So we tried coding solutions to defeat loading on any page but Home – to no avail. We then decided to junk the featured image. We added CSS code to color the background and added back our rocket logo. That workaround proved simpler and faster for speed.
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.
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.
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:
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/sxss-signature/ 179k download, Requires: 2.5 or higher, Compatible up to: 4.4.3, Last Updated: 3 months ago, Active Installs: 800+
Comments: Has integration of TinyMCE. This allows the addition of copyright, links, images, or ads at the bottom of pages or posts.
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 (process rules of how things get done).
Here’s what that means:
1. Save a PDF with embedded text. 2. Optimize the PDF for fast download. There are various ways to automate optimization (file size reduction) with plugin or online tools. PRESS quality PDFs (300dpi) are too fat for downloading. Even PRINT quality (150dpi) can be marginally fat. SCREEN quality (72dpi) can ruin images. So some experimenting is required. Visitors won’t tolerate slow downloads. And heavy PDFs open and scroll too slow. Fat PDFs say, “We don’t care.”
3. Build a thumbnail image for navigation. We can’t use the regular WordPress thumbnail function on PDFs. It works on Jpegs and PNG files. So we build the thumbnail by opening the PDF in an image editing desktop program. And then just save the cover page as a Jpeg image file. We then upload that to the WordPress image library. This will become the link to the actual PDF.
4. Add the thumbnail image to the library page. Editorialize the image link. This means descriptive text is added that tells what sort of content is in the PDF and why the visitor would benefit from downloading it. (Search engines read this stuff, too). This text is called information scent. It cues the reader that they are on the right track. The text should state that the download is free. Also, the file size, dimensions, color, and page count should be stated. This information helps them know how long they will wait when they click the link. Visitors don’t like surprises and are apprehensive about pressing any “mystery buttons.” Consider this advertising the PDF.
So there are a few hoops to jump through when preparing a library. Based on our experience, do we think the trouble is worth it? Absolutely. Library sections are popular with both people – and engines. They are a good draw. Some people will drop into the site right on the library page – bypassing all other pages.
We also encourage harvesting content from the brochures and make HTML entries to the blog. This redundancy is perfectly acceptable because people like information delivered in different ways. They have a choice.
Just a note: These kinds of pages with many thumbnails (also called catalog pages) benefit from a WordPress lazy-load plugin to keep load time fast. One we recommend is Rocket Lazy Load.Lazy loading delays loading of images in long web pages. Images outside of the browser viewport (below the fold) are not loaded until the user scrolls to them.
Frequently, the website owner (your client or boss) thinks they’re the clone of their audience (their potential or actual customers). Of course, they aren’t. We’re all different and have different perspectives and opinions for many reasons. That’s good. Otherwise, this would be a pretty boring world.
Logos make little difference in the outcome of client profitability. They have other benefits but it’s not money.
“Can you make the logo bigger?” In most venues, a logo really is pretty meaningless – except for the owners who see it as a “flag”. A flag can be good for morale. But a good trade name carries more weight (potent meaning) with a small audience than a clever logo. Then as long as the name is memorable, readable, and pronounceable, it *might* make a difference. For many businesses, a logo is reduced to a mere decorative element. When is the last time you paid for a solitary dingbat?
Dingbats are ornamental or decorative type characters. Dingbats are used as directional signage informing the reader what is important. They can also serve as graphic elements or exaggerated illustration. destroying white space. They work fine as a temporary symbol.
Logos can be fraught with emotional upheaval for the owners and cause unneeded, repeated presentations. “Does it really represent me?” Uh. It’s not supposed to represent that deep of a psychological burden. Arguments and doubt could go on forever with that as the goal.
There are three marketing components needed for success. You CAN succeed with any two –but it’s best if all three are present to some degree. They are: 1) the offer, 2) the market need, and 3) the design. If any two are missing, it’s a sure failure. Notice the logo is not one of the three but a subordinate part of design. In the hierarchy of what really makes a difference, a logo will not guarantee much. Yes, it’s possible to succeed with bad design. It can even be more memorable for the wrong reason!
But if no one needs the client’s product or service, or the price is too high and delivery too long (bad offer) –even fantastic design cannot save the venture. Stupid ideas especially cannot be saved by design (let alone by a logo). Statistically, half of all businesses fail in the first year whether they have everything right or not. It’s a coin toss. Great design will never make up for a flawed business model or product/market fit. Some erroneously think design can be the difference between crushing your competitors, or being left in the dust. Often, it will just suck your new business of its precious limited resources.
Nonetheless, design is a secret weapon giving companies an edge over competitors IF they have a good product and a market that needs it. When we say market, we mean names and addresses –a list of individuals with common needs.
We like an attractive logo. It feels good to own one. It feels nice to own a new, fancy car, too. We don’t invest much money or credence in logos because we realize ideas are disposable sometimes. If the business idea survives it’s first year then maybe it’s time to get out the check book. But you do not need a logo when starting up. You can just use type and maybe a dingbat. We believe in bootstrapping. With little or no investment in your company *identity*, you won’t weep so much if things fail.
Christian: I don’t get excited about logos, because I think the importance of logos is way overstated…except in the case of huge outfits like Coca-Cola, IBM, Apple, etc. Who cares what your logo looks like? Who cares what my logo looks like? Who really cares what San Diego National Bank’s logo looks like? No one.
Steve: Surprisingly, Christian and I completely agree. Logos are overrated and are useless deliverables sold by designers because small-business clients insist on one. It’s usually vanity and pride driven. There are literally millions and millions of logos. For a small company with limited resources, they’re a waste of time, energy, and money. The days of creating a world-recognizable Coca-Cola logo are gone for small to medium-sized companies. It simply costs too much hard, cold cash. I do believe your company name is important much more than a logo and needs more consideration.
Christian: Company name is more important than the logo…but not by much. What really matters is the quality of your work…but even *more* important is your ability to market and *sell*…that’s where it’s at…that’s what will make you successful or not in the crowded arena of design these days. A logo is not going to make any big impression on your customers. As long as it doesn’t look horrible, I don’t have a problem with it.
I prefer heavier font weights because it helps the logo stand out on your web page or in a brochure or whatever. But avoid generic type. If I had to choose between two typefaces in a logo I would go for a heavier weight. For a logo, I would want a more distinctive type.
Steve: I’m always curious as to the goals for a logo.
Christian: As Steve has wondered…what do you want your logo to do? If the answer is…”Just something to put on my stuff because everyone else has a logo, so I need one, too,” I’d say, “OK…this does the job. It’s all you need. Now get started on a more worthwhile project.” If your logo has to do more than that…I’d say…Fuhgeddaboudditt…it doesn’t matter…no logo will do more than that. No logo is going to make customers flock to you…
…stop wasting your brain power.
Steve: This is all true. It shocks designers to hear Christian and I who are designers ourselves say something so radical and unconventional as “Forget the logo drain.” In the end, type compatibility is *practically* insignificant. It will not alter results one iota. Yet, Christian on occasions has insisted we NOT use certain font combinations because they clash and are in poor taste. So continuity does matter to him. I have to call him out on the carpet sometimes. Want to make an adjustment, Christian?
Christian: Nothing to adjust. Yes, continuity matters. And font combinations are very important. Some combinations work and some don’t…peanut butter and jelly works but peanut butter and tomatoes probably doesn’t work…gin and tonic works but gin and coke probably doesn’t. The choice of font combinations is *very* important…and I say this not based on anything I learned as a typographer (I know you were waiting for that…sorry)…but I learned it based on my experience as a graphic designer.
But none of that matters when it comes to the typeface used in a logo. The logo is just a small part of most projects. Very small. Tucked away in the upper left-hand corner of something…or lower right-hand corner of an ad…whatever…and the typeface used in that logo matters not one iota in regard to the combination of typefaces used in the project itself.
See why Steve and I get along so well? Ha ha ha…we are like evil twins…we keep each other alive while at the same time always trying to kill each other.
Steve: We’re definitely evil twins. Which is the evil one? Shall we vote on it?
Christian: So my final comment about logos is: relax…choose the logo version you like best…make sure it’s readable on a web page and in other uses, and be done with it. Steve and I have been applying the Pareto principle to website design…maybe you’ve heard of it…related to the 80 – 20 theory…I recommend you read up on that, and think for a few minutes about how that principle might apply to the amount of time and work you probably are putting into your logo project….see if you think it’s really worth it.
Steve: Our philosophy is a great example of where reducing expenditure (optimization) can prevent ulcers and sleepless nights.
Christian: Designers spend countless hours and hours thinking about logos and constructing the logo, etc…time and energy that would have been much better used on other projects. Forget about evil twins…Steve and I are like Siamese twins on this one.
“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.
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.
Human eyes have limitations. There’s a theme trend to use light-gray type on web pages. This is not good UX. But designers, who should know better, are setting bad examples. Black on white was the standard for many years. That color combination is fatiguing when reading large block of text onscreen.
The recommendation is #333 dark-gray on white to reduce harsh contrast. But going lower contrast than #333 makes viewers squint to attempt reading text – even when the font size is 18px. We recommend using browser tools for checking font specifications including color and size. We use FontFinder for Firefox. There are equivalent tools for Google Chrome.
“An article about how the web is becoming unreadable has been making the rounds. I feel like most designers already know that light gray text on a white background is a bad idea. The article focuses on text color but I think a more relevant issue is font weight – I’m seeing so many sites these days set body text in 100 and 200 weights which were not designed for body text use.” — Jeremiah Shoaf of TypeWolf
“Minimalism in web design started as a backlash against decades of interfaces that increased the prominence of so many elements at once that they all clamored for attention and became visually overwhelming.
What’s great about minimalism is the principle of stripping out non-essential elements. In most cases, this is a best practice to follow.
When it becomes an issue is when there is lots of essential content on a page. Having a lot of content doesn’t suit the minimalist approach to design. So the designer’s compromise has become reducing the contrast of those elements so that, at a glance, the page still ‘looks’ minimal.
Yes, low contrast text does ‘look’ minimal, the same way a blurred photo on Instagram can ‘look’ retro. But you wouldn’t blur your website even if it were fashionable. Don’t lower your contrast, either.” — Nielsen Norman Group
Easy reading helps learning and enjoyment, so what we write should be easy to understand. Readability is about ease of reader understanding. Text should be inviting. Text depends on content (vocabulary) and typography (font size, line height, and line length).
Readability Plugins for WordPress An interesting article about web readability mentions several WordPress plugins that help assess readability of body text. The one plugin we feel is most appropriate (because it’s lightweight) is: FD Word Statistics Plugin. It shows word and sentence counts at the bottom of the WordPress editor. Plus a readability analysis of the page or post currently being edited is shown using three different readability measurements. Those are the Gunning-Fog and the Flesch-Kincaid indexes. (Plus one labelled Flesch that we don’t care about).
Various factors to measure readability have been used, such as speed of perception, perceptibility at a distance, perceptibility in peripheral vision, visibility, the reflex blink technique, rate of work (e.g., speed of reading), eye movements, and fatigue in reading.
Readability and legibility aren’t the same. Legibility is a measure of how easily individual letters or characters can be distinguished from each other.
The average adult reads at the 9th-grade level. It also shows that, for recreation, people read texts that are two grades below their actual reading level.
Don’t bring down the Internet with bloated video headers. We offer some lightweight ideas- and a free optimized web graphics for branding the WordPress Twenty-seventeen-theme home page.
Save the Internet from slow and destructive Zombie design. Our Promise: You will improve first-time user perception of branding and page speed.
If you cram the Front-page Content Sections with generic stock photography then … surprise! Your Twenty-seventeen Home page is now ridiculously heavy. Outrageous even on a desktop! You can avoid these new theme pitfalls and also take advantage of some great speed opportunities.
Video headers are specially created for branding your Twenty-seventeen theme home page. It takes knowledge, skill, and patience to find – or build – non-bloated visual elements. The hunt for orchestrated, featured images is a huge time sink. We save you time and frustration.
1What’s an “atmospheric” video header? They’re decorative elements – like header images, but with motion. They play automatically, loop by default, and don’t have sound. They work best when paired with a static image for mobile fallback. Motion video is a short, looping background video without controls – except for a pause button which you can easily make more transparent.
Regarding the Twenty-seventeen theme video header, it’s either locally hosted mp4 and mov files or external, hot-linked YouTube videos. But we recommend self-hosting your motion header in the media library and not using video hosted on YouTube. The experience is much better this way. Try it. You’ll see.
2Doesn’t video ruin page speed? Twenty-seventeen theme lazy loads the header video only on desktop computers – and no load at all on mobile devices. Then just the static fall-back image is displayed. Lazy loading means the theme defers video loading until last for userperception of speed. Bandwidth is still consumed. This occurs only on the front page for viewports at least 900 pixels wide and 500 pixels tall. As a safeguard, the maximum video file size is also capped at 8MB. The theme customizer validates that local videos have a supported format, proper file size, or that external video links are to YouTube. The WordPress development team strongly encourages using smaller files. Why? Visitors won’t spend time on big, long videos. It’s a waste of resources. Hefty videos gobble bandwidth. Video hurts performance. And, duh, it causes a Web Apocalypse destroying Internet usability.
Even with an 8M theme cap for video file size, its inclusion on the site’s front page with standard, shared hosting can easily result in your site slowing down. This is due to bandwidth overages or excessive data transfers. Video files put undue strain on both the host and the visitor.
It’s not easy preparing a video that looks good, is lightweight, and loops well. It requires special knowledge to deal with the complexities of meeting a file-size limit so small. That’s what we can do for you.
3How much does your our SpeedHeader demo cost? It’s free! You get a super-fast loading, 16-second video motion header, a fall-back header image for mobile, one optimized JPEG feature-image photograph, and four other color-coordinated, large, home-page featured images that are lightweight GIF files. All visuals are harmonized to work together. Keep reading.
4Why GIF instead of PNG format for featured images? WordPress imposes automated resizing to the PNGs when they are used as feature images. They bloat up to 3-times heavier in weight. That makes them load slower. For unknown reasons, GIFs don’t get the same treatment. WordPress doesn’t touch them. They stay light.
5Are there conditions where I don’t need your demo SpeedHeader? Most site owners have found these graphic accessories a lifesaver. It keeps your website focused, mobile-friendly – and the perception and reality of fast page-loads. Our header will keep your site lean – and simultaneously save the web from certain doom.
6Can I use these free visual assets on more than one site? Help yourself. We don’t charge usage fees. But please don’t resell or giveaway our creative work. Cousin Guido doesn’t like that. Save your kneecaps.
7Does your SpeedHeader help my SEO? Lighter page weight doesn’t improve search engine ranking or visibility. Testing shows that speed affects ranking less than 1 percent. But fast pages do reduce bounce rate, improve engagement, and rescue your user experience. That is equally as valuable as improved SEO. Plus the added sense of being a good, responsible web citizen.
So, do SpeedHeaders hurt my SEO? WordPress video headers do not affect page rank or time to get listed on Google. There is no downside for SEO. And that’s without any SEO plugin help. Good SEO practices are inherent in WordPress.
Headers affect User Experience (UX). That is how people feel when they are using your website. Motion headers fall in the realm of mood. Stock 16-second video tends to be around 3 to 5M in file size – and cost about $19. These double or triple the average 2.3M page weight currently on the web. Slow speed causes user frustration. This degeneration ultimately leads to the Web Apocalypse.
Heavy video slows down the Internet. This causes poor user experience – even with lazy loading. Poor UX is the real downside – not SEO – and it’s why we created SpeedHeader. Our motion header loads fast.
TIP: We use a rocket GIF animation as PagePipe’s header image. It weighs about 300k. Much less than video and it plays on mobile this way, too. Load your animated GIF as one of the static header images. You can also rotate header images randomly in the customizer with each page change. Nice trick.
To be read in modern browsers, HTML/CSS files must be UTF-8 – an encoding scheme developed in 1992. WordPress uses utf8mb4 and is 100% backwards compatible with UTF-8. So what? What does that trivia have to do with speeding up mobile websites?
You can customize your site icons by setting a Unicode font-size, color and text shadows, just like regular CSS text. The name is derived from Unicode (or Universal Coded Character Set) Transformation Format – 8-bit. UTF-8 is the character encoding accounting for 88.4% of all Web pages in January 2017.
When we think of pretty font icons like arrows, hearts and stars, we think of trendy font icon services like Font Awesome or Fontello. Font Awesome is a unicode UTF-8 font referred to as a glyph icon library. You can use it as decoration, logos, or navigation. Because these are webfonts, they cause extra page weight and HTTP requests. Font Awesome and other icon fonts slow down page load times. The frequently add 75k to 100k extra page weight and HTTP requests. That slows things down.
If you are developing a website using only simple shapes, you can use unicode UTF-8 symbols as replacement for font icons. The unicodes are essentially part of your operating system so you don’t need any special library or plugin and you treat them like regular text. For example, to change the icon size, simply change the font-size values as usual.
Detoxify the Web. Make your site fast.
Above is an example of a colorized Unicode biohazard symbol. Unicode Character 'BIOHAZARD SIGN' (U+2623)
We use a solid Unicode star in our site identity.
Unicode Character 'BLACK STAR' (U+2605)
The trouble with image files as icons.
Using raster-images files to create a menu icon – especially 8-bit PNGs – are faster loading than Font Awesome or Genericon icon fonts that are usually included with many free and paid themes. Image icons can be lightweight but still slow down your site with another HTTP request and time for the image to load. With images you don’t have flexibility over the color and scaling. SVG vector image alternatives are still not faster than plain-text (Unicode characters). Unicode doesn’t require additional HTTP requests and can be made to scale nicely.
The Unicode character for menu icons (“navicons”).
For the basic, three-line navigation menu icon, there are two Unicode characters:
One is the Chinese glyph (the trigram for heaven). It looks just like the “hamburger” navigation menu icon. It’s available as the following HTML entity:
☰ <!– 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.
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) F50D; or F50E;
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 ⚲ or ⚲)
HTML Entity (decimal) 🔍
Unicode character information
Left-pointing magnifying glass
Displayed on your computer as: ????
Unicode name: Left-pointing magnifying glass
We want to explain the pros and cons of the new Twenty-seventeen WordPress theme.
But first we must review a few basic branding principles. Excessive (or expressive) branding slows page loads. So why even include branding components on a site? Why not just have plain text?
Branding alters audience perception. It isn’t only the site text (content) but rather how it is imagined in the user’s minds. Branding and creative positioning strategy work hand-in-hand. They enhance visitor imagination or mood. Don’t get us wrong. Visitor motive or search intent do influence site perception. But other symbolic and intangible elements also are important. They affect how people feel when arriving and using your website.
On the web, we call this emotional perception – or feelings – user experience or UX. Branding differentiates a website from the competition. Branding fulfills customer expectations and satisfaction. User satisfaction is a component of website usability.
Users are not consciously aware of good branding. Unless of course, that’s their field of expertise. Bad branding feels fake, contrived, or noisy. Good branding is transparent, genuine, and only detected at a subconscious and visceral level. Many elements that create branding sensations are design related. These include:
Speed (page load time).
Color combinations (theming).
Symbols (including logos, icons, and favicons).
Styling (expressive or classic).
Ease of use (navigation).
Speed is first in a good branding strategy.
When visitors feel frustrated or annoyed by a slow page load, they won’t tolerate it. They’ll leave by clicking the browser back button. This wastes the hard work invested in aesthetics and content relevance. We call this “twitch” behavior – or the economy of attention. Attention spans and tolerance levels are decreasing.
Branding increases the website perceived-value and credibility. It’s the famous first impression. This creates a halo bias or effect that skews all later site interaction. It’s your opportunity to present positive website body language. This improves your customer loyalty results. Increases repeat visits, encourages longer visits, and a lower percentage of single-page sessions (bounce rate). In other words, your site feels like the right place to be.
Now, back to our real topic, the problems with Twenty-seventeen theme.
Twenty-seventeen uses the full screen to present a single image or motion video. On desktop, both get loaded. On mobile, no video loads. Just the “fallback” JPEG image. Superimposed over the screen in the bottom left corner is a small amount of text. This is the site title and tag line placed in the WordPress customizer.
1) If the hero image fills the whole screen, it may not communicate the purpose and relevance of your website. What if people, go, “Huh?” wondering over the meaning of your big image? You may just bounce another visitor. You wasted communication space (above-the-fold area).
2) A large JPEG image is heavy. Video is extremely heavy. Those slow down page load. Another bounce risk.
Are bounce risks worth it? Remember the visitor does have a motive for visiting your site. And it’s not to admire your artistic hero image. Unless you’re an artist, of course.
Automatic resizing note: If you upload a header image with dimensions different than 2000 x 1200 pixel, the theme resizes the image to make it full screen on desktop computers. It stretches images of wrong dimensions and makes them look grainy.
The header fall-back static image is responsive but it resorts to cropping-to-center on mobile. This is a common technique to avoid a small header image and a large gap beneath the image as it proportionately resizes. It was the decision of the theme developers to crop the image.
More Twenty-seventeen temptations.
We wrote a benchmark article. In our benchmark, we mention how easy it is to overload the home page with featured images and motion video.
Go ahead use stock off-the-shelf images and video. You will have a page load time of between 2 seconds and 4 seconds on Pingdom.com or WebPagetest.org. But that is deceptive. That is the perception of speed. It’s the lazy-loaded speed or initial load time. It doesn’t take into account all the mobile bandwidth gobbled up to complete the page load. That can be over 10 seconds.
Today, the average page weight is 2.3M.
Armed with Twenty-seventeen theme and stock imagery, the page weight will far exceed that. We guess around 5M typically. All in the name of branding, WordPress introduces more web-speed abuse. They have chosen to go with the herd – purely for expressive aesthetics and thus slow down the Internet.
WordPress’ design team attempted controlling the bloat with aggressive image optimization of featured images. And by capping hosted videos at 8M. And adding nice lazy-loading. These are all commendable. But you can also load YouTube full-length feature films if you want. No cap. And someone will.
WordPress is being cool and fast at the same time. Unfortunately, they opened Pandora’s box. It’s our opinion most website owners will not understand the implications. There is a learning curve with this theme. Instead site owners will wonder if caching or a CDN will fix the problem. They will use heavy stock images and fill all the empty slots on the home page. It’s inevitable.
Education is the solution. WordPress doesn’t have the resources – or care enough – to invest in that. This is: Apathy.
Can you make the Twenty-seventeen theme load fast in under 2 seconds on shared hosting? Yes. But it takes discipline and planning.
Favicons (or site icons) are a recognizable element used by web browsers. It’s good for memorability and branding. Favicons are for browser tabs (next to the page title), address bars (next to the URL), bookmarks, and windows tiles.
WordPress makes it easy to add a favicon to your site right from the customizer. This is often the recommended method. But it produces heavy image files.For speed’s sake, don’t do it!
A favicon improves site credibility, memorability, and findability for users. It’s easier to find a bookmark with an icon next to it than to read text.
An ICO file allows storing multiple images with different sizes in one file. This is not good for speed or mobile data consumption. Choose the simplest export possible usually 4-bit color depth. You can create ICO files in a photo editor like Gimp. But an online favicon generator is a good option.
In WordPress, favicons are called Site Icons.Since WordPress 4.3, the Customizer has a Site Icon option. For extreme mobile speed performance, we don’t recommend it.
Since HTML5, the PNG format is also an acceptable format for favicons. All major browsers support PNG now. All browsers (even old ones) support ico format.
RED ALERT: If you don’t use a favicon, it creates an unwanted 404 error or delay. So don’t think “no favicon” is faster. The browser waits for favicon loading – forever – or time outs. That’s bad new for speed.
WordPress themes generate 4 favicon sizes when you add a site icon from the WordPress Customizer. This is overkill. An original image uploaded to the Customizer is at least 512 x 512 pixels. WordPress then creates other sizes from that original file:
32×32 pixel favicon.
180×180 pixel app icon for iOS up to the iPhone 6+.
192×192 pixel Android/Chrome app icon.
270×270 pixel medium-sized tile for Windows.
These favicons are in your WordPress media library. If you use three colors in your favicon, all this other image baggage is unnecessary and wasteful. A favicon is not a logo. Use a photo editor like Gimp or Photoshop to design a 16×16 pixel square.
Here’s our method for best mobile speed:
Only 3 colors are in the 16×16 pixel image file – colors you use on your site. Exported the image in Microsoft .ico format. This makes for the fastest loading favicon. We export custom images using free Gimp image processing application offline. Sample colors with a color picker if necessary.
Favicon.ico sample above.
The number of colors and bit depth are what determine the icon page weight. In this case, 318 bytes. A theme often produces two or more icons using the WordPress Customizer. These can weigh 32 to 64 kilobytes (heavy for such a tiny element). This is unnecessary bandwidth waste. Plus over-detailed microscopic favicons aren’t readable or recognizable. Simple and few colors are a better memory cue. This is branding without complex, intricate image files.
Find this plugin settings under Appearance > My Favicon * BlueT
This is an old plugin. But works great even with PHP 7.2 – and has zero page weight. We compared all freebies plugins to install a favicon – and this is the lightest. No site drag.
Upload the image using the browse button. It will store the favicon in your media library. Then click “Save this new one.”
This is the fastest way to add a lightweight favicon.
Alternatively, upload the icon to your server root directory via Cpanel file manager. Either method causes the favicon to lazy load last on your page. If you upload to the server via Cpanel, it may take time to appear because of propagation delays. From our experience, the plugin seems to work faster.
If your Favicon doesn’t appear on the frontend right away, use the “F5” key to refresh the page. If you can’t see it right away, clear the site cache if your using a caching plugin.
Have you been told you need to optimize your images for mobile? Worried that slow load times, or a bad mobile UX are hindering your sales and conversions? Here are some truths about optimizing your images for mobile — as well as some actionable tips and advice on how to make your mobile site perform better.
Compression & re-sizing is key
One of the most important thing you need to do to your images? Compress and resize them. This will not ruin the picture, as long as you strike a balance between file size and visual quality.
Compression helps improve website performance and speed because it essentially makes image file sizes smaller. Using a plugin like ShortPixel means you can retrofit your image library, even if you didn’t do anything to them when you first uploaded them.
Resizing is just as, if not more, essential than compression. Digital cameras often, very unhelpfully, create images that are very large. Take the pixels down and resize images down to a more reasonable size using a plug in like Imsanity (featured in our review here). Imsanity is actually also a viable (free) alternative to ShortPixel that is limited in its free version.
Image resizing is especially key on mobile — even though modern smartphones are powerful computers in their own right, large images that fill the screen will slow the mobile experience down. You may want to include less images across the board so as to not unnecessarily slow the user down.
Use (trusted) image optimizers
You can optimize pictures for web use by compressing them using Photoshop (not that tricky to do yourself), or you can use some trusted image optimizers that will help you scale the process.
The problem with image optimizers? A lot of them don’t work, and it can be hard to find the best in a bad bunch.
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:
Well pruned code and CSS files
Essential plugins and features only.
Random spot-checks and usability testing are great ways of finding out more about your mobile experience.
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.
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:
Speed is often a by-product of good web development and a good content management system that’s been properly managed and maintained. Don’t neglect ANY areas of your website if you want to make the most of it.
You need to be looking at the user journey, sales funnel, and the experience of using your pages — not just what the speed test tells you. Your users are the best judges of your website — so listen to them.
Victoria Greene is a content strategist and freelance writer, blogging at Victoriaecommerce. She’s proud to say that she’s built a few websites in her time, picking up a thing or two on good and bad web design on the way.
There’s not enough time to test all new free WordPress themes for speed potential. So we set easy limitations to reduce our workload. We look for signs or clues of author sloppiness and wasteful shortcuts.
The ideal speed theme is a download file of under 1M-compressed. This is our arbitrary threshold and indicator for speed potential. Once decompressed – and with the demo screenshot subtracted – it will total between 1M and 2M. These generally create 500-millisecond to 2-second page loads. And that’s on cheap, shared hosting.
It’s plain many themes above this 1M-download cutoff may be fast. But we don’t want to mess around searching. It’s also rare for a theme to make written guarantees. Nothing about speed, page weight, or even number of HTTP requests. Many imply they’re fast. But they don’t give specifications.
A 1M cutoff drastically reduces the number of theme candidates. This is a quick-and-dirty filter. It prevents you from wasting time on themes with low-speed potential. The package size is indicative of the theme author “caring” about performance.
Note: A lite theme means it has crippled features or stripped down from the “pro” paid version. Lite doesn’t mean lightweight.
The nine free themes listed below all have commonalities. We won’t put them on any preferred list. Even though some are attractive. We’re using them to prove some font facts. For us, they’re toward the bottom of the speed barrel – but still pass the 1M limit barely. They have 1-to-2 second page load potential. They aren’t as forgiving as other less “feature-rich” themes.
Why aren’t they so good? They have built-in site drag. They weren’t authored with speed as a priority. That’s indicated by the frivolous, slow “non-features.”
But in spite of these infractions, the themes still pass.
We ask ourselves, “How much speed difference does font baggage make?” So we did some testing with the help of free plugins.
Asset Queue Manager
This plugin is almost a secret. Only 900 installs. It’s used for hardcore performance optimization. It allows us to switch off (dequeue) Font Awesome. Of course, it’s used for dequeuing other scripts, too. But we’re just using it for our Font Awesome experiment.
Font Awesome is a font and icon toolkit released in 2012. And quickly became a crutch for theme authors to create “cheap art.” Twenty percent of websites with third-party fonts use Font Awesome. We find it on half of new theme releases. It ranks second place after Google Fonts. We hate it because the lightest version uses 70 to 80k of page weight globally. And it has no websafe system font fallback like when using a CSS font stack. That means if we disable it, the site may look broken. Not always. Just especially mobile pages.
Frequently, Font Awesome loads on every single page whether there are any icons used or not. That’s bad for mobile bandwidth usage. Font Awesome may be loaded in parallel with other page assets. That makes the drag invisible to users. So why do we even care? Requested font data is still transferred on each page. And that costs someone time and money.
Our other beef with Font Awesome is that only three icons are traditionally used. These are:
the magnify glass for search fields
the mobile navigational “hamburger”
the up-arrow on top-of-page links
(Also social icons. But that story we’ll save for another day.)
You could make 70 PNG image icons with the same total weight – or less – than Font Awesome. It’s equal to a hero header image. We’d rather not see any icons – either font or image. Overused and boring.
It’s possible for a theme to load Font Awesome – and then a plugin may load it again, too. This duplicates the global load. Doubling the additional page weight by around 150k. Wow. That sucks.
Is it worth removing or dequeuing Font Awesome? Nope. You might save 50 to 100 milliseconds. But, it usually will break something somewhere. Not always. Some theme authors don’t use Font Awesome for the hamburger and magnifying glass. They are merciful. Those authors deserve a medal for going the extra mile.
Is it worth finding a theme that doesn’t use Font Awesome? Yes. We think so. We hunt for those jewels. Remember half of new themes don’t use this iconic boat anchor. (The same statistic goes for unneeded sliders. Half do. Half don’t.) But leaving out Font Awesome is usually futile. It won’t make any noteworthy perceived speed difference in tests. It makes a difference in how much data goes back and forth from server to browser. And if you think that browser caching might help, sorry. Font Awesome comes in many oft-changing versions and flavors. That means browsers probably aren’t storing the right one for your users.
Font Awesome sometimes does weird fluctuations and delays loading by an extra second. Why? Voodoo! Why even take this speed risk?
So does removing Google Fonts make a difference in speed?
External font scripts like Typekit or Google Fonts slow down your site. Typekit is the worst for speed. Websafe fonts are guaranteed to be faster. According to HTTP Archive, as of October 2016, web fonts are just over 3 percent of an average page’s overall weight.
Disabling with Remove Google Fonts References plugin makes an average difference of only 53 milliseconds in our tests. But in the extreme, one theme (Martial-Lite) had a 300 millisecond gain in speed. In some cases, there was no change in speed at all.
The difference in weight is anywhere from 60k to 300k. Again, it’s wasted mobile bandwidth.
Would we delete Google fonts and go with default browser fonts just to save 300 milliseconds? You bet. When we’re working on getting under 2 seconds or even 1 second, that can make a big difference.
Again, there are times requesting Google Fonts will throw a 1-second delay. Just like Font Awesome. Why? We don’t know. Go ask Google. And, of course, the more fonts you call the slower things get. There’s a plugin that combines the Google font requests. Google WebFont Optimizer finds every Google Font request. It bulks them all together. Then your website only asks Google once for the fonts, instead of multiple times.
Finally, there are a bunch of elements that have become something of a standard with modern website design that, while not offensively intrusive, are often unnecessary. I appreciate great typography, but web fonts still load pretty slowly and cause the text to reflow midway through reading the first paragraph. REFERENCE
So our speed recommendations are:
Find a 1M or less compressed theme.
If it doesn’t have Font Awesome, it’s best.
If you can bear turning off Google Fonts, that’s even better.
Only about 20 percent of new themes meet these criteria. No surprise.
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-plate seduction.
You can’t overburden widgets that aren’t there! The unadvertised value of lightweight themes like Susty is:
Live support is a web service for communicating with text in real time with web visitors. Third-party live-support applications are commonly used to provide customers information. It’s also called live help or live chat.
People don’t want to chat … they want answers.
LiveChat helps you support customers in need of help. It allows you to increase your sales by engaging the right prospects at the right time as well as by generating a ton of new leads. – Source
Is that self-serving statement by LiveChat, LLC about “tons of new leads” true? Popular popup-style live-chat are often found on WordPress home pages and landing pages.
Does live chat really boost conversions? You’ll find plenty of affiliate articles answering, “Yes.” Promises, promises. Face it, live chat is an overhyped and overused fad to sell plugins and API services. Making money isn’t bad. Lying is.
Do you have live chat activated on your Home page? Are you really getting benefit from this heavy feature?
For example: Live chat heaviness typically is 9 requests and around 350k of page weight added. It may cost $17 per month or $180 annual overhead. Does live chat really contribute to profitability? It may be your heaviest web asset.
Site owners include wasteful live chat – even when it’s ridiculous presumption.
Sites using live chat often try saving money on a per-interaction basis. A chat agent handles three to six conversations at once – while a telephone agent handles just one.
Because you have cool technology doesn’t mean it provides a better user experience. Didn’t mother ever tell you, “Just because you *can* doesn’t mean you should?”
Live chat is bad when you’re using a free or low-quality chat provider. Your page loads slower. Or may not load at all during chat-provider downtime. Before-and-after speed measurement tell how bad the impact is on performance.
Chat technology takeover hasn’t lived up to the marketing gimmick hype.
Live chat on home pages and landing pages is intrusive. It interrupts the user experience in the same way popups do. It distracts attention from page content. Pages have content for a reason. There’s a message to deliver. Chat popups distract.
If users can’t find what they need, without the help of live chat, then there’s something wrong with your site. You need to fix it, not chuck another slow-loading gizmo on top of it.
Does live chat feel trustworthy? It reminds us of gimicky slick tricks. Herd mentality strikes again.
Live chat only works if there’s someone caring behind the software to respond to customers.
Some sites use live chat because their forms suck. Some think live chat is “better” than web forms. There must be something wrong with your form design. Fix your form before adding live chat.
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.
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
Active installs: 30+
Zip file size: 1.2M
All-time downloads: 358
Retention rate: 8.3 percent (low)
★★★★★ WP Image Refresh
Active installs: 700+
Zip file size: 823k
All-time downloads: 4,630
Retention rate: 15 percent (medium)
The two suggested plugins are free, obscure, and esoteric. We’ve experimented with various plugins. This combination works best for us.
ROTATING PSEUDO-FEATURED IMAGES
On PagePipe posts, we don’t use the WordPress featured image function. Those settings are in the editor right sidebar and called Featured image > Set featured image. For our posts, that remains unused.
How to use these suggested tandem plugins:
1. After plugin installations and activation, we go to Added Content > Added Content in the left black sidebar.
2. We “Add New” and create a “post” called “TOP.”
3. We select top, bottom, or both positions. For this case, it’s top.
4. We set “Include In” to Posts, Pages, or Everywhere. We want this rotator only on posts.
5. We specify “Content to Add.” In our case, this is two shortcodes.
Usually shortcodes are added in sidebar widgets – or main text content area.
WordPress-specific code in brackets – [example] – is a shortcode. Shortcodes embed files or create objects normally requiring complicated code into just one line. A shortcode is a coding shortcut reducing effort.
The content we’re adding are two right-justified shortcodes. These are the “Content to Add.”
6. The first shortcode is:
[(bracket) wp-image-refresh (bracket)]
The WordPress Image Refresh Plugin shortcode shows a different random image every time a post loads. The plugin shortcode works for posts, pages, widgets and sidebars. This technique won’t slow down pages or posts. There’s no site drag from global loading.
7. The second shortcode is from a plugin called Shortcode For Current Date. We only show month (F) and Year (Y). This line is tinted a gray color #666. This creates an automated “evergreen” freshness effect.
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.
Determine the post’s main-column width. When rotating full-page-width images, obviously the dimensions are different. Every theme has it’s own unique column width. Calculate these values by adding media. Use a test feature image and make a measurement using a screen-ruler utility or browser tools. Then remove the browser-resized “dummy.” Then manual resize your images to match.
How it works:
After following the above steps, one different pseudo-featured image appears at the top of body text on all blog pages. Images change for each post. Occasionally, images may repeat. They are random and not in sequence.
These aren’t *real* featured images. They aren’t linked to other theme constructed pages as thumbnails for grids, blog listings, navigation, or related posts. This is a limitation we can live with on most sites.
The UX navigational benefit is perceived variation during page or post changes. There are speed benefits, too. The images aren’t optimized using WordPress automated cropping. That can do weird things bloating image weight.
8-bit PNG, line-art illustration is almost always faster than compressed JPEG photographs. When using JPEGs, the goal is a compression equivalent to the Photoshop quality setting of 50 to 60. The WordPress default is a quality setting of 82 and yields the equivalent of Photoshop 50Q. This is “The-standard-of-goodness” used by 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.
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.