The WP Favicon Remover plugin lets you remove the WordPress default favicon added to WordPress core version 5.4. If the favicon doesn’t change after plugin installation, clear your browser cache. If you add a Site Icon via Theme Customizer, uninstall this plugin. You don’t need it anymore.
Don’t know what the heck a favicon is? Here’s some bedtime reading to help put you to sleep:
Image rotation is our plugin invention for improved speed and reduction of workload. This scheme is helpful – not only for the designer – but also the website owner. Managing fewer featured images is easier and cost effective. This method is less backup-intensive thus using fewer server-resources (particularly RAM). And it’s better for speed from caching benefits, too.
OBJECTIVES: Create the perception of custom featured images on every blog post. This enhances user experience. The image loads faster because it’s already in browser cache. Visitors need a visual change to register that a very fast page just loaded. This differentiates pages and post giving a sense of change, variety, and place.
There’s no SEO penalty for repetitive images. They aren’t considered duplicate content. There’s no harm to your search ranking if you use duplicates. Google can’t be bothered with the amount of policing and sorting required.
The Featured Image is a standard WordPress theme feature. Site developers can add a “representative image” for posts and pages.
The problem: Researching relevant stock images for 100’s of blog posts is time consuming and even tedious. Creating custom images or illustrations for 100s of post is also cost prohibitive.
The goal is an illusion of different images on successively-viewed blog posts. We solve this with randomly-rotated images. It’s labor-economy with image reuse. This saves time and money.
The typical site visitor reads a few posts at a time. How long a visitor stays on pages is engagement or dwell time. Google interprets these metrics as “intent.” Visitor intent affects SEO. How much? No one knows but Google.
If the same image is used on every page and post, the reader often isn’t aware the fast page changed. A different image remedies this static illusion caused by rapid changes. Swapping images is a good cue and provides page variety to combat user boredom. We want to remove confusion because it causes poor user experience.
The two suggested plugins are free, obscure, and esoteric. We’ve experimented with various plugins. This combination works best for us.
ROTATING PSEUDO-FEATURED IMAGES
How to use these suggested tandem plugins:
1. After plugin installations and activation, we go to Added Content > Added Content in the left black sidebar.
2. We “Add New” and create a “post” called “TOP.”
3. We select top, bottom, or both positions. For this case, it’s top.
4. We set “Include In” to Posts, Pages, or Everywhere. We want this rotator only on posts.
5. We specify “Content to Add.” In our case, this is two shortcodes.
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. Remove: (bracket). The plugin shortcode works for posts, pages, widgets and sidebars. This technique won’t slow down pages or posts. There’s no site drag from global loading.
7. The second shortcode is from a plugin called Shortcode For Current Date. We only show month (F) and Year (Y). This line is tinted a gray color #666. This creates an automated “evergreen” freshness effect. 8,000 active installs, 59.1k download file.
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.
Answer: The rotator works on all our blog posts – not just that one. There are various ways to do this without causing site drag. We’ve written about one way on this very page you’re reading. We talk about using two plugins in tandem to get the effect: Simple Content Adder (very esoteric plugin) and WP Image Refresh.
But here are a few more ideas:
An alternative plugin that’s faster – but requires some “CSS coding savvy” – is:
Astra is a popular WordPress theme. Usually, we’d tell you to run from anything claiming popularity – and never follow The Herd. Why? Because popularity indicates plugin and theme inefficiency. The more popular themes are – the slower they load. Why does this correlate? We don’t know. It’s measurable in real-life slowness.
For example, Divi (400,000 installs) – a paid premium theme – its authors claim it’s the most popular theme of all time! From our testing, it adds one second to your load time. Terrible! That’s half the 2-second performance budget.
Astra is an exception to the harsh slow/popular judgment. Astra takes only 36 milliseconds to load – plenty fast. But only when using the free version. If you buy the Astra Premium plugin, you add 50 milliseconds to the free version. Or 86 milliseconds total speed overhead. Is that a lot? It’s relative.
A discrete plugin usually is very lightweight. It has a small zip package download size and only one function with no settings.
Using our speed philosophy, we can enhance a site using over 80 discrete free plugins with under 86-milliseconds consumption. Do that many plugins slow things down? Not at all. It usually halves the load time. Weird. That’s not what blogs preach on the Internet. The average site has 25 plugins. We use over 70 on PagePipe. Avoid multi-function plugins.
HIDDEN SPEED LIABILITIES
The Astra theme authors didn’t mention those hidden liabilities before buying premium. Did they? But that’s still minor compared to the real problem. That trouble is the uncontrollable fear, greed, and indecision of site owners.
Astra theme 800,000+ active installations zip download size: 954k
Keeping Astra fast requires site owner self-discipline.
It’s easy to junk Astra up with slow enticements. The temptation is usually too great. Just because you can add a slider doesn’t mean you should. Or a chatbox. Or an email signup popup – or a contact form. On and on. Faddish seductions create speed baggage. Coolness rarely proves profitable.
Astra left out some dead weight usually included for building sites. They did this to seem careful about speed. That’s a differentiating factor of their theme. Abnormal speed consideration caters to the whims of speed freaks – like us.
Astra contains speed potential. But a novice overloads this theme like any other. It’s lightweight (less than 50K on the frontend). We tested that spec and it’s true. Astra has the potential for *unparalleled* speed as the authors claim.
Bogus Astra Implied Promises SEO, Schema, and Google AMP. Blah!
1Astra also offers some features we don’t care about – ever. Fluffy SEO claims in particular. Relevant content creates SEO – not free themes! Astra stretches for market differentiation embracing good ol’ huckster miracle SEO.
2Astra team integrated Schema.org code. Schema’s not a good thing or a bad thing. Unless you curate content the size of the U.S. Library of Congress. Then you need it. It’s benign like a non-cancerous growth. You can do Schema with a plugin. But small to medium size sites rarely (never?) benefit. No proof. So ignore it.
3Astra also says the theme is *Native AMP ready.* This is a definite non-feature. AMP is a detriment to any website. We recommend you steer clear of Google AMP.
Astra is good for building all kinds of websites. They’ve done a good job engineering this theme. We don’t recommend the paid version (recurring annual rent). The free version features are ample.
Not activating jQuery is one of Astra’s biggest speed claims.
Is Astra the first theme to not enqueue jQuery? Several past themes use this trick. But sadly, in the end, it doesn’t help much. Site owners can’t seem to live without features and functions that use jQuery.
DON’T DRUDGE ME
We built a simple site using “Drudge” minimalist style.Drudge style is the ugliest news aggregator we’ve ever seen. Christian Nelson, web sage, always claimed: “You dump enough frills to make it fast – and then it’s repugnant.” Paraphrased. There’s more swearing than that. But it’s true of Drudge style.
Here’s our test page:
In irony, The Drudge Report gets 1.5 million visitors per month. The site owner makes 1 million dollars annual profit from the site. It has many fans. There’s even a commercial Drudge theme for $89 with guaranteed site uglification. Sorry. We just threw up a little in our mouth.
Adopting these anti-marketing and lo-fi concepts, we applied them. We ran Astra speed tests using GoDaddy cheap shared hosting. We used Classic Editor plugin (5 million + active installs, 18k zip download file) to disable the block editor. Here are the results:
Pingdom.com: best case 118k, 307ms, 15 requests. To SF, USA.
WPT.org: worst case TTFB 278ms, load time 1.223s, 115k, 16 requests. To WV, USA.
That’s right. Astra with the following four speed tricks is around 1-second load time or less. Dang, that’s fast!
Stop loading the Astra symbol font.
We can do this deletion because we aren’t using the menu on the homepage. It’s a single page site.
Add this one-line of code to your site functions.php file:
If you’re savvy enough to edit that PHP file, go for it. But we prefer a safer route using the Code Snippets plugin (200,000+ installs, 489k download zip file). It has the bonus feature of preventing the custom code from being overwritten by a theme or core update.
This trick saves 200 millisecond font load time. That’s 10 percent of the 2-second performance budget. We’ll take that gain. It’s almost the same as loading Google Analytics locally, a speed saving trick we do all the time.
Then add to this code below to Simple CSS plugin (90,000 active installs, 136k zip download file). Simple CSS also protects custom CSS in the customizer. This eliminates a child theme plugin from adding an extra request. Faster, safer, a win.
We added jQuery activation by accident when installing the Sticky Sidebar plugin (10,000+ active installs, 235k zip download file). Load time then increased to 838 milliseconds with 13 requests. This added about 40k to the page weight. Not horrible but a half second increase in load time – or 25 percent of our performance budget lost. That blunder negates fancy speed benefits of no-jQuery-library site drag. That’s a worst-case scenario. You’ve been warned.
We recommend Astra. It’s a “feature-rich” speed theme. But we discourage purchasing the premium version when possible.
Thumbnails are a scaled-down or cropped representation of larger pictures. They help in recognizing and organizing images. Thumbnails are used on web pages as separate, smaller copies and linked to the original image or another page. This distributes page load, reduces bandwidth, and speeds up load time. Thumbnails serve as web signage or navigation links.
Proper cropping is usually a more important issue than quality settings for thumbnails. In other words, compositional interest or focus provides viewer recognition and motivation to click. Rather than create a smaller dimension image copy, some web designers cheat by making the browser shrink thumbnails with HTML code. This is not good web practice but sometimes unavoidable. This results in no saved bandwidth. Visual image quality from mathematical resizing is usually poor. So both quality and speed suffer.
Graphic dimensions specified in HTML code are not always the same as the actual image dimensions. This forces the web browser to calculate the difference before displaying the graphics. With the large number of graphics on popular masonry and image grid pages, this adds significantly to the download time.
No image scaling on the fly. Thumbnail “math” can slow down a page. When pixel versus code dimensions mismatch, the web browser must recalculate the page graphics. That takes a long time. And it clogs the pipes. Make sure image dimensions match your code for a faster-loading page with better-looking images.
Displaying a relevant crop instead of a full image helps maintain recognizability or emphasis. For example, when thumbnailing a full-body portrait of a person, it may be better to show the persons’ face than a small figure.
WordPress automated cropping of thumbs can be pretty bad at times. Above: On the example van thumbnail, the automatic crop cut off the most important detail: the graphic wrap above the wind shield.
We didn’t let WordPress create the thumbnails. Instead, we cropped and optimized them in a desktop imaging program. This reduced the weight by 5X. The featured images are “zoomed in” for detail and exclude type. This is because, at small image sizes, text becomes unreadable and people will squint to try to read it!
WordPress automatically produces preset thumbnail sizes. It also applies unsharp mask to them. Sharpening images restores and improves internal edges. Humans do pattern recognition based on edge shapes.
Default Media Settings Thumbnail, 150 x 150 pixels Medium, 300 x 300 pixels Large, 1024 x 1024 pixels
Images are centered and cropped to these dimensions. These three image sizes, as well as the original full size, are the only ones available when you edit a post and insert media. They can be changed in the WordPress administration panel under Settings > Media.
Media image sizes allows you to change the maximum dimensions of images that are displayed on posts and pages. When setting a thumbnail size, the image will be cropped and resized to the setting. Medium and large images will keep the dimension proportions, taking the maximum width and height into account.
Set large images at the theme’s screen width for full width pages and posts, and medium images at the width of a content column.
Regenerating Images Any time you change your WordPress default image size definitions, they will only apply to new uploads. All your existing images remain at the original dimensions. There’s a great plugin that will go back through your posts and regenerate these new image sizes for you.
AJAX Thumbnail Rebuild lets you select which sizes to regenerate, and will work through your archive. The plugin won’t resize images already inserted into posts. Regenerating images makes new sizes available to use in future pages. You can’t bulk edit the size of existing images that you’ve inserted already.
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:
If you enjoy our caustic speed articles, you’ll love our pithy bi-monthly newsletter. Discover what matters most for mobile WordPress page speed. Fast load times require more than just installing a caching plugin – or CDN.
We’ll share with you our latest speed experiments and discoveries. Stay up-to-date with what matters for mobile WordPress page speed.
WooCommerce hurts speed. Freebie.
LEARN HOW TO MAKE MOBILE WOO FASTER 9 WooCommerce Speed Tips
Our controversial free report challenges a commonly-held web belief. That’s the falsehood you need an SEO plugin (like Yoast) to succeed online. Discover why SEO plugins won’t save your business and what you can do instead. And speed up your site!
What if you’re using a blog list page or a column grid plugin with hundreds of images? The shortcode or theme pulls thumbnails of the huge featured image from the posts. The dimensions stay huge and the image thumb is mathematically resized in the browser window. Nasty for speed. But maybe you don’t want the big featured-image page weight on the post either.
Use Default Featured Image plugin to place a single generic thumbnail image globally on all posts. Now you don’t need to upload individual featured images to posts. Leave that selection blank. Make the default image a 150-pixel square thumbnail size. Not a 2000-pixel wide full-screen dimension. That prevent loading up your blog list or grid with fat images.
Why would you do that?
When you only need the image as a signpost or page divider.
Now use Hide Featured Image plugin to globally deactivate the featured image in the plugin settings. That keeps it from appearing in the header on posts. Or selectively deactivate posts individually with a checkbox on each post’s backend. That keeps the default from appear on specific posts. The image then only appears on the bloglist or masonry grid. Much faster loading and cleaner.
There’s no dogmatic rule requiring a featured image appears on each post.
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.”
Search Exclude We use to this plugin to exclude some content from onsite search. It may be password protected posts – or something like testimonials and quotations. The plugin keeps these from appearing in blogroll search results. Nice.
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/danixland-author-signature/ Comments: The author said, “All I wanted was to be able to select an image for my user, and set the alignment and size for the displayed image inside the blog post.” He felt the other plugin offerings were too bloated. We agree. To add your signature image, go to your profile page in the WordPress dashboard and, at the bottom, you’ll find a new section for selecting an image using the standard WordPress media upload screen.
https://wordpress.org/plugins/dt-author-box/ Comments: From the WordPress plugins site: “for those who have multiple authors on a WordPress site and want to show author information at the bottom of every post for each author like a signature. This can include an image, a short bio, a link to the author’s website and their social profiles.” This is overkill for us.
Based on this quick information, the plugin to use seemed pretty obvious: Danix Author Signature. It was fast and easy and didn’t add any drag to our page loads.
Coco Chanel (1883 – 1971) was a prolific and successful fashion creator. Chanel extended her influence beyond made-to-measure clothing, realizing her design aesthetic in jewellery, handbags, and fragrance. Her signature scent, Chanel No. 5, is an iconic product today. The number 5 to her – even from a young age – represented the pure embodiment of a thing, its spirit, its mystic meaning. She was OCD about 5 patterns.
Chanel #5 was her most profitable fragrance. Her annual earnings were around $25 million per year. That made her the richest woman in the world. She was a contrarian and innovative by selling the perfume to soldiers for their sweethearts. The brand flourished without print advertising. Amazing.
In April 1952, Marilyn Monroe appears for the first time on the cover of Life, and the article mentions her answer to the question, “What do you wear to bed?” and her reply, “Chanel No. 5.” An unpaid endorsement that sent sales soaring. You can’t buy advertising like that.
Television commercials were inventive mini-films with production values of surreal fantasy and seduction. Directed by Ridley Scott in the 1970s and 1980s, they “played on the same visual imagery, with the same silhouette of the bottle”. Scott later directed and produced the movie hits “Alien” and “Blade Runner.”
SERENDIPITY: Events by chance ending in a happy or beneficial way.
The key was Earnest Beaux’s (1881 – 1961) experimental use of aldehydes. Aldehydes are organic compounds. They are manipulated in the laboratory at crucial stages of chemical reaction to arrest and isolate the scent. When used creatively, aldehydes act as “seasonings,” as aroma boosters.
Beaux’s student, Constantin Weriguine, said the aldehyde Beaux used had the clean note of the arctic, “a melting winter note.” A laboratory assistant, mistaking a full strength mixture for a ten-percent dilution, jolted the compound with a quantity of aldehyde never before used.
Beaux prepared ten glass vials for Chanel’s assessment. Numbered 1–5 and 20–24, each group a variation of the compound. “Number five. Yes,” Chanel said, “that is what I was waiting for. A perfume like nothing else. A woman’s perfume, with the scent of a woman.”
Never revealing how her choice of “#5” was her spirit number.
PagePipe is obsessive-compulsive about speed. Speed is a fundamental principle of user experience. There is never enough bandwidth because lazy designers always use up ever last bit of resources by overdecorating sites. Designer apathy is the enemy of web speed.
How Chanel’s success story applies to your website:
Chanel had disdain for the overly decorated. Her saying was,
“Elegance is refusal”.
That applies to websites, too.
Refusal to over decorate your site.
Refuse to buy what we’re told are “must-have” items by The Herd.
Refuse to accept the conventional wisdom that you need redesigns (new clothes) constantly.
Refuse to fall prey to the “color of the year.” Like faddish gadgets: popups, slider, vanity metrics, and chat bots.
Refuse to be a human billboard of visible logos. Like Yoast, Google, even WordPress.
More than half the top 1 million websites use Google Fonts. This is not the best practice for mobile speed.
The inaccurate Web Font defense: “Without Google Fonts we’re limited to a handful of system fonts installed on our user’s device.”
So what? Is this a bad problem? Since when? Web safe fonts are not recognizable to the average web visitor. Google web fonts caused internet dilution. That doesn’t mean web fonts are better. Variety reduces imagined stigma from using “ordinary” fonts.
There is a justifiable condition for using Google Fonts. That’s when there are no other graphics differentiating your page. The font is then the only thing. It’s the bottom-most design consideration for mobile devices. Color combinations are a much more important factor.
Unaware clients talk about their logo size. Then it’s “What font will we use?” Please select one that’s readable and fast on a mobile device.
For speed, GeneratePress theme uses the default mobile system font stack: -apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”.
This method makes practical sense.
System fonts or ‘Web Safe Fonts’ are common and pre-installed across operating systems. For example, Arial and Georgia come with Windows, macOS and Linux distributions. They load fastest.
Default fonts are utilitarian. That’s good for mobile speed. We do not consider decorative body text important for small mobile screens. Readability and legibility are what count.
Web safe fonts are still preferred over requesting cached Google Fonts.
Google Fonts come with a speed cost. Each font carries a weight that the web browser needs to download before display. In worst case conditions, users wait seconds. That should be reason enough not using Google Fonts. Do Google Fonts cause delays or failures every time? No. Only sometimes. Why? Because they’re hosted from remote servers getting millions of simultaneous API hits.
Claiming “Google Fonts Are Already Optimized” doesn’t buy much in our book. Even optimized they’re never as fast as system fonts. Never.
The Google Fonts API does a “smart check of browser type.” That’s to see how it can deliver files in the most optimized and compressed format. For example, detecting the latest Chrome browser may need only one font type. Google then sends only one font variant instead of a whole font family. That is a speed improvement. Yet that still isn’t faster than system fonts. This is a workaround (kludge?) not providing any improvement over web fonts.
“Google Fonts maintains 30+ optimized variants for each font and automatically detects and delivers the optimal variant for each platform and browser.” — Ilya Grigorik, Web Font Optimization
Wow! Big hairy Google deal.
Does that cool technology specification make us feel better? Google has performant font formats for old browsers. It’s not a feature – it’s a bug fix.
“As the Google Fonts API becomes more widely used, it is likely visitors to your site or page will already have any Google fonts used in your design in their browser cache.” — FAQ, Google Fonts
Because half of websites use Google Fonts, it’s often claimed there’s no waiting. What? There’s no waiting for web safe fonts either. In fact, there is no “first-time-view” without cache for websafe fonts. Web safe fonts are always available.
Google Fonts aren’t completely cached for far-future expiration for more than 48 hours. Why? Google says it’s because they may change something and the fonts need “refreshing.” Wait?
Is Google saying there is a benefit to not caching older versions? None whatsoever for you. Only Google benefits gathering data more often. Every single visitor need a new fresh font file within 48 hours? No way.
Each font can add up to 400 kilobytes to your page weight. Multiply that by a few different font families and fonts weigh more than your entire 2- to 3-megabyte page. That is never a problem with websafe system fonts. They have an instantaneous load time. Zero seconds. Zero page weight.
For example, the Google Roboto font family weighs 144 kilobytes. But if you only use the Regular, Regular Italic and Bold variants, that number is 36 kilobytes. That’s good savings. Right? No. It’s still slower than websafe fonts. Get serious.
Web fonts need calls to Google’s servers (fonts.googleapis.com), that’s called an HTTP request. The more HTTP requests, the longer it takes your page to load.
You can call more fonts in a single request. There is no limit to how many fonts and variants a single request can hold. There are plugins to do this trick. But we’ve seen no speed benefit over using websafe system fonts. Even if you use a plugin to host Google Fonts locally on your server, they aren’t faster than system fonts. It’s a weak method to try and hang on to the sluggard.
It takes time for the browser to download Google Fonts, but what happens to the text before they are ready? Showing nothing at all is jarring to the user. A better experience is to show a system font as a fallback and then “swap” the fonts once they are ready. This is possible using the CSS font-display property. This is a ridiculous strategy. Why not avoid the hassle and use the system font? That’s right.
Forget Google Fonts.
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 the 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 the 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 a 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.
Another plugin alternative for speed: Google Fonts cause slow external requests to Google’s servers. You can host the fonts locally on your server instead. Hosting fonts locally won’t always make your site load faster. If the font is popular (like Lato or Roboto font) and already cached in a visitor’s browser, those fonts load pretty fast. But a plugin exists to help optimize local Google font hosting. It’s CAOS for Webfonts (11.5k zip download). The plugin decreases page load times, leverages browser cache, and minimizes DNS requests.
When it comes to fonts, there are many web myths and unsaid facts. Especially concerning mobile speed.
The Google Fonts API serves the fonts listed in the Google Fonts directory. You cannot control Googles headers (including expiration headers). According to the Google Fonts FAQs, their font files are cached for a year. If so, why the PageSpeed Insights render blocking error?
Google’s CSS files associated with the font are only cached for 24 hours. Speed test expiration information shows this. That is how long browsers store the asset in the browser. Best practice is setting a 1-year expiration. Far futures expiry plugin controls this or you can hand code your .htaccess file on your server. We prefer the plugin.
Google calls/requests its CSS files every time. This is for “font freshness” – updated versions. But that’s a Google smokescreen. Google says, “It’s for fast support of font changes.” Every font changes every day?
Daily updates? Really? It doesn’t churn that fast.
There is a plugin for hosting the fonts on your own web server (local). Not on Google servers (remote). Then you can do “far future expiration.”
Google, claims to encourage PageSpeed. But they don’t even cache their own fonts Why? A nice data collection opportunity for them. Wake up. It’s for their benefit – not you. There’s also a plugin to merge all font files into one – concatenation. This combines many webfonts into one request.
We’ve messed with this plugin and never can see it working in speed tests. So we’re not believers yet. But 6,000 other suckers believe.
It’s theoretical. When millions of websites all link to the same fonts, they are “ideally” cached. After loading the first font, it should appear “instantly” on all other later visited sites. But that isn’t true in all case or even in most cases. Google sees 1 CSS request per font family, per day, per user browser.
That request occurs most often on the most critical first impression. Those are visitor landing pages from the SERPS. Secondary pages don’t have the same visitor expectation for speed. So don’t decorate your main top10 pages. Keep those lean.
A single font request may take only 50 milliseconds. To put that in perspective, that’s the same speed as GeneratePress (free) theme.
“Web fonts are likely to enhance the performance, maintainability, and accessibility of your page” is a quote directly from Google.
That isn’t even a partial truth. Another Google deception. They aren’t that stupid to propose fonts improve site performance.
When you use a Google Font, you may load the entire set in the font family. Not a single style like “regular.” There may be many weights. This usually adds around 300 milliseconds to a critical first page (guesstimate). Now that doesn’t include delays caused by loading extra languages of the font set.
If you use an <i> tag (italic), which is quite common, that loads the italic font variant. Another 100 milliseconds wasted. If you call 10 font variants you produce a 1-second cumulative delay for fonts. That is very possible on branded sites (H1, H2, bold, italic, etc). Half the 2-second performance budget gone.
Google downplays the impact of their fonts on page load time. Especially for mobile phone users.
Font loading behavior varies depending on browser type. Some browsers only display text after font files load. Others will use the fallback font from the font stack and then refresh the page when the font is available. This behavior is the “flash of unstyled text,” or FOUT.
Websites include 3 fonts on average. These fonts are around 100K in size each. Fonts load after the HTML and CSS sources.
Staring at invisible text – or at font-swapping shifts – is unacceptable. The best option is giving up on custom fonts and relying on web-safe fonts. That’s our choice and preference.
We can’t describe the loss felt the day we threw our print type collection in the trash. It was something we loved. It was part of orchestrating the mood of a well-designed printed page. We let it go for a better mobile user experience. Gone but not forgotten.
Major content platforms (such as Wikipedia, Medium, WordPress and Github) use system fonts. They’re available for use on computer operating systems. This is a worthwhile strategy when styling is not a primary concern like small mobile phones. Not referring to tablets! On heavy-traffic mobile sites, traffic is 20-percent tablet visitors. The 80 percent bulk is small phone screens.
Blogs claim, “Great typography is crucial on the web” for readability, legibility and “well-crafted typographic design.
Is well-crafted a must for brand recognition and the success of your message? We say credibility and readability trump branding. Frivolous branding requires special fonts. They’d do better paying attention to other readability details. Like not using small, squinty fonts or low-contrast gray colors.
Fast-loading mobile (modern?) font stacks look something like this in CSS:
Google says one thing. We say the opposite. What’s the truth?
We strip fonts unless a site already achieves under target speed goals. Then they’re ignored. But generally, we disable them. Site users are oblivious to the differences.
Trends in mobile include new speed themes like GeneratePress and Tiny Hestia. And the Twenty-nineteen default theme. Out of the box they enable mobile font stacks defined in the style.css file. They don’t use Google Fonts. Fonts have a stigma for mobile. They consume unnecessary bandwidth and data limits.
Single-column, 350-pixel wide images or resized images are what’s served up. All that matters is legibility and readability. Creating any mood is from color choices. Color combinations recall memories. Memories have feelings associated with them. It’s a subconscious influence.
How much “mood or emotion” can you muster in a small 5.5-inch screen space? Be honest. Small blocks of color whizzing by with the flick of a thumb. That’s mobile user experience? More like roulette.
Stripped-down “speed themes” often don’t enable jQuery by default either. If you resist the temptation to install a slider, top-of-page button, or some other jQuery intensive plugin, you avoid the extra load. Themes did this in the past (like Susty, Frank and Sobe themes) but were seen as esoteric or fanatic and not well received. Now it’s a mainstream trend. The Herd wants extreme modifications because they suppose speed will save their site. Speed never compensates for poor content. Ever.
Discarding font baggage and jQuery are nuances for speed. They make for fast themes. But you can destroy that with a few popular plugins. Then the gain is minuscule by comparison. Dwarfed by thoughtless plugin abuse.
Fussing about choosing Google Fonts is wasteful.
Theme authors retrofitted speed change based on requests from users. The demand was high enough and thus offered the chance to sweeten the deal.
This means using Google Font usage is now seen as painful to speed and UX. And thus SEO. Big deal.
You don’t have to install a plugin to remove Google Fonts on these speed themes. The theme loads are transparent: meaning less than 50 millisecond load times. But if you buy the premium version, they’re no longer the fastest kid on the block. They don’t tell you that fact. The themes then are more average than special.
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 a 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 the 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 labeled Flesch that we don’t care about). [/pullquote]
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.
When you’re working hard to optimize a website, you learn that image file size is an important detail for speed. Many online publishers haven’t the time to learn Photoshop or other image editing programs. Automated optimizers are the next best thing and can speed your production. But which ones do a good job and how good is good enough? Big questions.
We’ve tested some nice online utilities for optimizing images, but only three stand out. These can be as frugal as optimization done in standalone programs like Photoshop. Don’t just ignore image speed issues. Sadly, halving the image weight on your home page will not make it load twice as fast. There are many other things to take into consideration. Nonetheless, image size and weight are the biggest contributors to site bloat. It’s worth your time to learn a few compression tricks.
Images are the biggest lump of sluggish web page weight. Everyone hates slow loading pages. Automated image workflow is an effortless way to improve user experience. Without difficulty, you can achieve the right balance of image file size and best quality. Optimizing images helps reduce your website visitor’s frustration.
We did a simple test of online optimizers with just two images. We weren’t interested in the nuances. We only wanted to know if the optimization tools met a minimum processing criteria. We describe our goals below under the section “PagePipe’s quick-test criteria.” Here are the two test images:
Test Banner JPEG Image
Test Camera Output JPEG Image
PagePipe recommends only three web image-optimizer utilities.
Please try the 3 image utilities and see if they have value for the web file sizes you use.
DynamicDrive image results are displayed by Quality-10 increments. We liked this simple, still-image visual feature a lot. DynamicDrive had an upload size limit of 2.86MB. That is too small for images straight out of a digital camera. We couldn’t upload the larger test JPEG because it is 5.5MB. We still like this browser-upload utility best for most web work because it shows all ten results for comparison. No fiddling with controls. Visual selection is easy.
Web Resizer Results: trees-rocks 19.29k, -83% savings
wood 63.94k, -98% savings
Size limit = 10MB, 2,000px wide, Cropping or resize option.
PagePipe’s quick-test criteria.
We’re only interested in compressing photograph files. The online compressor is best if it works for two different samples: a large digital camera file and a smaller web banner. Both JPEG images. Specifications for test images are below:
The software needed for image optimization must be only the browser. No other programs or plugins; such as Adobe Air, Windows Only, Flash, etc.
We want to upload the test images by browsing or drag-and-drop.
We consider it a bonus if the browser imaging tool has an image resizing option.
The tool must work. Seriously? If it fails, it’s off the list.
We’re only interested in lossy compression for the most page-weight reduction. Lossy is a type of compression where a certain amount of information is discarded. It is best. 50 to 70 percent reduction in file size.
We prefer optimizers with reduction control in steps of 10-increment quality settings. 90Q down to 10Q range. We pushed down to 10Q for testing when possible.
The 7 random losers.
We’ll share these just so you don’t wonder if we tried them or not:
Smush We’ve used smush before. It’s part of Yslow performance measurement tool by Yahoo! It never makes much of a difference. There are better alternatives. Many swear by this method. We don’t think it’s that cool by comparison. On the test, it failed to upload the images. We tried again – and gave up. We didn’t care that much. You only use lossy settings on the pro version. The free plugin has 10 percent reduction. That isn’t good enough.
Kraken.io We think Kraken has potential with the WordPress plugin version. But the online browser version doesn’t allow you to make quality settings. Our trees-rocks test image only compressed by 12.4%. Unimpressive. And the larger “wood” image wasn’t allowed. They said for that size we’d have to upgrade to Pro version with an upper limit of 16MB. Forget it!
RIOT (Radical Image Optimization Tool) For Windows only. Disqualified.
Puny PNG FAILED uploading and gave an error message. “Sorry, there was a problem with the image(s) you are uploading. Please ensure your image is a supported format and complies with your quota.” Our images worked fine everywhere else? Go figure. Yes. We tried more than once.
Shrink O’Matic Desktop app for Adobe AIR. Disqualified because it requires more than a browser.
TinyPNG – 5MB limit Has a 5MB limit and made no difference. “Zero Percent” change on the trees and rock image.
Compressor.io Compressor.io didn’t cut it either. trees – rocks only compressed by 24%. That’s not good enough for us. The “wood” image was better (-72%) but no resizing option. It wasn’t of much value for those big, fat digital camera images.
Slow speed is caused by images that aren’t optimized. It’s a trade-off between file size and image quality. Learn about proper image optimization. Heal the Internet.
72k, 8-page, 8.5 x 11 inch, printable b&w
There is no one-size-fits-all solution for image optimization. No common formula. That’s why robot-plugin optimization is usually too conservative and overcautious. They don’t compress enough. The human eye is the best judge of how much is enough. Every image is different in potential gain. Only optimize on your 10 most important landing pages. You don’t need to worry about every image site wide.
Even though you could squeeze an additional 200k of image weight from the homepage, it wouldn’t make a significant difference. Why? Browsers load images in parallel.
By default, WordPress always compressed images upon upload. In version 4.5, WordPress changed JPEG compression from 90Q to 82Q. This reduced image weight by an average of 25 percent. But why the magic number 82?
Since version 2.5, WordPress used a default-quality setting of 90 to optimize images. A 90Q (Q for quality) setting creates larger file sizes than recommended by modern web best practices. For example, WebPagetest warns site owners if images aren’t compressed enough.
WebPagetest specification: Images compressed within 10% of a Photoshop-web-save quality of 50 will pass. Up to 50 percent larger will warn (we guess that would be around 70Q to 75Q). Anything larger than that will fail. The image score is the percentage of bytes saved by image re-compression.
Photoshop provides a handy “Save for Web” option that keeps file sizes low. But what about a large website with a lot of images? An online store might have thousands of images. Having to create different sizes of each of these is an enormous task.
WordPress uses ImageMagick, an open-source command-line graphics editor, to quickly resizes images. This technique maintains great visual quality and small file sizes. It automates resizing image compression with formats like JPEG and PNG.
The Odd Number of 82Q.
Researchers compared ImageMagick’s various compression settings against Photoshop’s high quality (60Q) setting for JPEGs. An ImageMagick compression setting of 82Q was closest. They used an open source test to compare dissimilarity of input and output JPEG images.
Changing the default image quality setting is a small change. Yet, it makes a big impact on file size without sacrificing perceived image quality. The new 82Q setting only applies to the intermediate size images. Not the original files uploaded by users.
To change original image size dimensions and quality settings, we recommend Imsanity plugin (230,000+ installs, 53k zip download file size).
We repeat: original full-sized, uploaded images remain unaffected. This change only affects images resized by WordPress, such as image thumbnails. For international users, on slower web connections, this is important for performance optimization.
We approve these changes for improving WordPress speed.
Genericons are vector icons embedded in a webfont designed for aesthetics and signage. But what if you don’t use them. Then they are dead weight.
The WordPress Genericon font adds several HTTP calls and about 60k of page weight. On a Twenty-fifteen theme based website we were building, this was half the Home page weight. We felt compelled to get rid of it. Especially since not a single Genericon symbol was on the website. Bloat!
We wish there existed a Remove Genericons plugin to remedy this problem. None exists – yet. But you can fixed it with some crude surgery. Do two things:
1. Via Cpanel or FTP, delete the contents of the “genericons” folder found in yourwebsitefoldername > wp-content > themes > twentyfifteen > genericons
Open that folder and erase every file and folder. That’s right! Delete them all. You now have an empty genericons folder. Removing the genericon files off your server will save almost 50k of load time. But there is one more thing to do:
2. Since the Genericon files no longer exist, when WordPress requests the information, it produces a single 404 error. That causes a delay and about 12k of unnecessary page weight. To eliminate this badness, open the “Theme Functions (functions.php)” with the Appearance > Editor. Remove the four references to Genericons. Save the file. You’re done.
You can benchmark before-and-after changes using Yslow for Google chrome or go to WebPageTest.org.
A even better way for Genericon removal is using Asset Queue Manager plugin. Read about it.
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. Favicon Generator is an example of online automated icon sub setting. Genericons and Dashicons are not in the collection – yet.
These are the freeware icon sets available on Fontello:
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.
Today, PagePipe uses 70 plugins. About 30 of those not updated for over 1 year. Some for many years. We’re not embarrassed about that. It’s not a mistake.
Plugins listed in our ebooks are currently used on PagePipe. And also on client sites.
So the question is “Outdated? By what definition?”
Some think outdated plugins produce a warning like:
“This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.”
Being orphaned or abandoned doesn’t mean “bad or rotten.”
These lonely plugins still work. And often for over a decade without complaints. That isn’t brokenness.
“Does 8 months since an update concern us? Not in the least. There are plugins that are 8-years old in the directory that work fine. Those “best if used by” freshness dates are silly. They throw people off with their arbitrary “expiration-date” warnings.”
WordPress places warnings when a plugin isn’t tested with recent versions. Does that mean it won’t work any more with new versions of WordPress? Nope.
WordPress’ motive is their legal protection against liability and lawsuits. C.Y.A. If a plugin doesn’t work any more or presents security hazards, it’s removed fast. And some are. In particular, malicious plugins. They call those “take downs.” Plugin authors remove some because they didn’t get the market results they wanted. But generally plugins stay as long as there isn’t any noise about them. Retired or dead author’s plugins stay in the WordPress free directory.
No plugin is safe. Not paid (premium) plugins. Not obsolete plugins. And not recently updated plugins. A common plugin problem is automatic updates loading onto managed WordPress sites. Bugs in the new version mangle the site or causes conflicts.
There’s no such thing as a risk-free plugin or theme. Even reckless WordPress messes up with their own Automattic-authored plugins.
Good-old “Plugin Logic” is our secret, speed-weapon plugin. It’s used on every site we touch. SELECT.ME issue #11 talks about it. It’s an amazing plugin.
Want to keep a specific plugin from updating? We recommend “Block Specific Plugin Updates” plugin. There are times this is handy.
There’s plugin churning in the 55,000+ plugin database. Don’t let silly warnings discourage you. They aren’t for your protection. They’re protecting WordPress.
Don’t fear old plugins.
How many plugins is too many?
PagePipe is hosted on cheap GoDaddy magnetic servers with no CDN. GoDaddy hosting is the second most hated provider in the world. The first is BlueHost. We’re out to prove even “bad” hosting can get fast page speed. (We host our store on Bluehost! Our blog on GoDaddy!) PagePipe.com is living proof these recommendations for speed actually work.
PagePipe now use 70 plugins on the blog (GoDaddy) and 24 plugins on the secure store (BlueHost). Even with this many plugins, load time is under 2 seconds on cheap, shared hosting. It’s not plugin quantity, it’s the quality that makes a difference. Web designers can’t be arbitrary in loading and activating plugins. The result is slow pages. And all our plugins are freebies from the plugin directory.
It’s a myth using many plugins slows down your website. Being sloppy in judging plugin quality or necessity is the culprit. That’s within a web designer’s control. It calls for wisdom and speed testing. The best plugins add no page weight at all – weightlessness! (In reality, about 1 millisecond – or less – per plugin to the initial page load.)
We’ve done library sections on websites before. They are popular (meaning they are visited from search engines). But success is contingent on several things for SEO (search engine optimization). These things are details improving what is called findability.
Findability means visitors can easily find what they are searching for on the site. And it also means being able to find relevant information from offsite (from search engine listings – like Google).
So why this tutorial?
The newsletters that are frequently on websites are not findable. They are invisible. In fact, they aren’t listed on Google.
Our goal is to get every single page and document listed on Google. WordPress will handle most of that problem. But other things can help.
Why are some PDFs not listed? They aren’t MACHINE-READABLE. They are image files. If you try and highlight (select) the body text with the cursor, it can’t be done. That means search engines can’t read the text either. The files haven’t been saved with embedded text.
Do PDFs rank well when they are machine readable? The answer is “yes.” Engines can crawl them just as well and fast as regular old web pages. The PDFs rank sometimes even better than HTML web pages. Search Engines are looking for credible content. And PDFs have high credibility. They take longer to prepare. They are less disposable. They have a longer shelf life.
A library directory is a good thing. But library production requires a little more tender-loving care.
Here’s what that means:
1. Save a PDF with embedded text. 2. Optimize the PDF for fast download. There are various ways to automate optimization (file size reduction) with plugin or online tools. PRESS quality PDFs (300dpi) are too fat for downloading. Even PRINT quality (150dpi) can be marginally heavy. SCREEN quality (72dpi) can ruin images. So some experimenting is required. Visitors won’t tolerate slow downloads. And heavy PDFs open and scroll too slow. Fat PDFs say, “We don’t care.”
3. Build a thumbnail image for navigation. We can’t use the regular WordPress thumbnail function on PDFs. It works on JPEGs and PNG files. So we build the thumbnail by opening the PDF in an image editing desktop program. And then just save the cover page as a JPEG image file. We then upload that to the WordPress image library. This will become the link to the actual PDF.
4. Add the thumbnail image to the library page. Editorialize the image link. This means descriptive text is added that tells what sort of content is in the PDF and why the visitor would benefit from downloading it. (Search engines read this stuff, too). This text is called information scent. It cues the reader that they are on the right track. The text should state that the download is free. Also, the file size, dimensions, color, and page count should be stated. This information helps them know how long they will wait when they click the link. Visitors don’t like surprises and are apprehensive about pressing any “mystery buttons.” Consider this advertising the PDF.
So there are a few hoops to jump through when preparing a library. Based on our experience, do we think the trouble is worth it? Absolutely. Library sections are popular with both people – and engines. They are a good draw. Some people will drop into the site right on the library page – bypassing all other pages.
We also encourage harvesting content from the brochures and make HTML entries to the blog. This redundancy is perfectly acceptable because people like information delivered in different ways. They have a choice.
Just a note: These kinds of pages with many thumbnails (also called catalog pages) benefit from a WordPress lazy-load plugin to keep load time fast. One we recommend is Rocket Lazy Load.Lazy loading defers loading images in long web pages. Images outside of the browser viewport (below the fold) are not loaded until the user scrolls to them.
Twenty-seventeen is an unusual default WordPress theme. It allows background video in the header section. Here we share ideas to optimize web graphics for branding the WordPress Twenty-seventeen-theme home page.
Video headers are specially created for branding your Twenty-seventeen theme home page. It takes knowledge, skill, and patience to find – or build – non-bloated visual elements. The hunt for orchestrated, featured images is a huge time sink.
1What’s an “atmospheric” video header? They’re decorative elements – like header images, but with motion. They play automatically, loop by default, and don’t have sound. They work best when paired with a static image for mobile fallback. Motion video is a short, looping background video without controls – except for a pause button which you can easily make more transparent.
Regarding the Twenty-seventeen theme video header, it’s either locally hosted mp4 and mov files or external, hot-linked YouTube videos. But we recommend self-hosting your motion header in the media library and not using video hosted on YouTube. The experience is much better this way. Try it. You’ll see.
2Doesn’t video ruin page speed? Twenty-seventeen theme lazy loads the header video only on desktop computers – and no load at all on mobile devices. Then just the static fall-back image is displayed. Lazy loading means the theme defers video loading until last for 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.
3 How long playing are video headers? Typically, they are 16-second video motion headers. That is a good target length.
4Why GIF instead of PNG format for featured images? WordPress imposes automated resizing to PNGs when they are used as feature images. They bloat up to 3-times heavier in weight. That makes them load slower. For unknown reasons, GIFs don’t get the same treatment. WordPress doesn’t touch them. They stay light.
5Do video headers help my SEO? Lighter page weight doesn’t improve search engine ranking or visibility. Testing shows that speed affects ranking less than 1 percent. But fast pages do reduce bounce rate, improve engagement, and rescue your user experience. That is equally as valuable as improved SEO. Plus the added sense of being a good, responsible web citizen.
So, do video headers hurt my SEO? WordPress video headers do not affect page rank or time to get listed on Google. There is no downside for SEO. And that’s without any SEO plugin help. Good SEO practices are inherent in WordPress.
Headers affect User Experience (UX). That is how people feel when they are using your website. Motion headers fall in the realm of mood. Stock 16-second video tends to be around 3 to 5M in file size – and cost about $19. These double or triple the average 2.3M page weight currently on the web. Slow speed causes user frustration. This degeneration ultimately leads to the Web Apocalypse.
Heavy video slows down the Internet. This causes poor user experience – even with lazy loading. Poor UX is the real downside – not SEO.
TIP: We’ve used a rocket GIF animation as a PagePipe header image. It weighs about 300k. Much less than video and it plays on mobile this way, too. Load your animated GIF as one of the Customizer static header images. You can also rotate header images randomly in the Customizer with each page change. Nice trick.
To be read in modern browsers, HTML/CSS files must be UTF-8 – an encoding scheme developed in 1992. WordPress uses utf8mb4 and is 100% backwards compatible with UTF-8. So what? What does that trivia have to do with speeding up mobile websites?
You can customize your site icons by setting a Unicode font-size, color and text shadows, just like regular CSS text. The name is derived from Unicode (or Universal Coded Character Set) Transformation Format – 8-bit. UTF-8 is the character encoding accounting for 88.4 percent of all Web pages.
When we think of pretty font icons like arrows, hearts and stars, we think of trendy font icon services like Font Awesome or Fontello. Font Awesome is a unicode UTF-8 font referred to as a glyph icon library. You can use it as decoration, logos, or navigation. Because these are webfonts, they cause extra page weight and HTTP requests. Font Awesome and other icon fonts slow down page load times. 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 name: Left-pointing magnifying glass Alternative names:
Susty is the lightest stripped-down WordPress theme we’ve ever seen. It’s not feature-rich like GeneratePress or Twenty-seventeen default theme. But we’ve tested it. It’s built only for extreme-speed fanatics like us. We don’t recommend Susty as a speed panacea.
Susty theme isn’t available in the free WordPress repository. It’s available as a GitHub download. Still free. (Susty-master: zip file size is 37.4k).
To illustrate the extremity of Susty theme minimization:
There are no widgets or sidebars. Period. The widgets section doesn’t even appear in the dashboard navigation.
There’s no home-page Main Menu navigation. Unlike widgets, you can edit the Menu in the dashboard. The theme author relegates the menu to a different page. We find this novel and are testing it. For a small blog like our test, it’s not a problem. There are navigational workarounds we’ll use later. (And comment on if you’re curious.)
There are no Google Fonts.
No Font Awesome.
No jQuery enqueuing.
So what customization is available in the stripped-down theme? Just background image possibilities and solid-color background selection. Pretty sparse.
“You know what’s better than perceived performance? Actual performance. Avoid techniques that merely provide a mirage of speed.”
Our design-experiment test site has minimal decoration with graphic elements except for one large JPEG background image of an eBook on inner pages. Default column width is 577 pixels.
Here are interesting speed results on our Susty Home page:
Pingdom test results to NY: Load time: 433 milliseconds, page weight: 8.8k, requests: 2.
Speed load times to other locations: Stockholm: 746 milliseconds
Melbourne: 694 milliseconds
San Jose: 295 milliseconds
Where’s the host server located? Arizona. Using GoDaddy cheap magnetic shared hosting with no CDN. Of course, there’s no SSL / HTTPS certification overhead either. That helps. (SSL certification costs $69 per year on GoDaddy per domain. Gak! No thanks. A mere blog doesn’t need that junk).
Like other speed themes, you can inadvertently ruin designed-in speed gains. Simply enqueue (activate) jQuery by adding a simple top-of-page button plugin. That then adds around 33k to page weight. You can also enqueue jQuery weight with the WP jQuery Plus plugin for speed. So don’t use it unless you need jQuery for some other plugin. The Susty theme and WordPress don’t need it.
As mentioned, SSL would be bad (500ms site drag) and also Google Analytics (100 to 500ms site drag). Do you need those extras for a site where you have few pages and no ecommerce? Not at all. Unnecessary baggage.
When it comes to minimalism, Susty theme is king. Hands-down winner.
Would we recommend it for building a conventional website? Nope. We’d go with GeneratePress.
What you can’t get from other recommended and proven themes is the phenomenal low 8.8k page weight of Susty. Page weight is important for mobile user experience. Speed tricks like lazy-loading delayed images won’t reduce mobile data overhead. Those are tricks of speed perception – not actual speed performance. Susty resolves mobile speed problems with real speed.
Susty is fast and lightweight. We’ve proven it loads in under 1 second even with web graphics. But can you create an attractive site with Susty? Can it look better than classic Spartan aesthetic? Many stripped-down themes are mere text and CSS font styling. Pretty boring.
Stripped themes – like Susty – prevent excessive bloat. Why? It’s a “human temptation” problem – not a design problem. Site creators can’t discipline themselves to say “no” to unused features. They fill every slot and pocket provided. Self-imposed limitations using a bare-bones theme removes overload or gold-plating seduction.
You can’t overburden widgets that aren’t there! The unadvertised value of lightweight themes like Susty is:
AESTHETICS AND SUSTY FOR SPEED
First we checked what customization was possible. Not much. We could add:
Background color globally
Global background image
Swap out the default logo
Site Title and Tagline
Homepage setting and Posts page
Susty has no widget areas in sidebars or footers – or anywhere!
First: We set the background color to #ffffff (white) instead of the default #fffefc.
Let’s look at the graphics used:
This hero background image presented a problem on the funky Menu page. We wrote the theme author, Jack Lennox, and he suggested some custom CSS code. We added that with the Simple CSS plugin. Fixed!
background-size: 100% auto !important;
We created three 8-bit PNG icons to sprinkle on pages for visual variety.
And a call-to-action badge to sell books:
Next: A replacement logo for theme default. (895 bytes PNG image, 43px sq.)
And a dinky little 318 byte favicon for browser tab branding.
And one more for visitor cuing device: a borrowed Yoast logo 5.7k PNG image.
Summed total image weights on Home page: 82.9k
26 FREE PLUGINS WE USED
Add Search To Menu Displays search form in the navigation bar. (We’re using an older version of this plugin that’s lighter than the current one.)
Antispam Bee Toolset for day to day comment and trackback spam-fighting.
BleuT FavIcon Customize site favicon by uploading an image file.
Block Bad Queries (BBQ) Firewall to protect WordPress against malicious URL requests.
Change Table Prefix Change your database prefix after installation to thwart hackers.
Deactivate XML-RPC Service Deactivates the XMP-RPC API service. A security precaution.
Disable Embeds Removes the enhanced embeds (oEmbed) added in WordPress 4.4.
Disable Emojis Disable dead-weight Emojis.
Email Address Encoder Protect email addresses from email-harvesting robots by encoding them into decimal and hexadecimal entities.
Far Future Expiration Add a “far future expiration” date for various file types to improve site performance.
Heartbeat Control Controls the WordPress heartbeat.
Lazy Load by WP Rocket Lazy load script for WordPress without jQuery or others libraries.
Lazy Load for Videos Replacing embedded YouTube and Vimeo videos with a clickable preview image. Visitors click the placeholder image to play the video.
Limit Login Attempts Reloaded Limit the rate of login attempts, including by way of cookies and for each IP address. Security against brute force attacks.
Plugin Logic Activate plugins on pages only if they are really needed.
Shortcode For Current Date Insert current Date, Month or Year anywhere with a simple shortcode.
Simple CSS Bulletproof CSS using a CSS editor or the live Customizer.
Simple Drop Cap Transform the first letter of a word into a drop cap or initial letter simply by wrapping the word with shortcode .
Simple WP Sitemap Adds both an xml and an html sitemap, which updates and maintains themselves.
Title Remover Hide the title of any post, page or custom post type item without affecting menus or titles in the admin area.
UpdraftPlus – Backup/Restore Backup and restore: take backups locally, or backup to Amazon S3, Dropbox, Google Drive, Rackspace, (S)FTP, WebDAV & email, on automatic schedules.
WordPress Related Posts Increase reader engagement with links in content footer.
WP Author, Date and Meta Remover Remove post meta data. N o settings.
WP Counter Counter of unique site visitor status in different date range (Today, Yesterday, Current Week, Current Month).
WP jQuery Plus Loads jQuery from a CDN using the exact version as your current WordPress install.
7 PLUGINS WE DIDN’T USE
Complete Analytics Optimization Suite (CAOS)
Current Year and Copyright Shortcodes
Optimize Database after Deleting Revisions
Remove Google Fonts References
Simple Back To Top
Special thanks to Christian Nelson for bring Susty theme to our attention.
Favicons (or site icons) are a recognizable element used by web browsers. It’s good for memorability and branding. Favicons are for browser tabs (next to the page title), address bars (next to the URL), bookmarks, and windows tiles.
WordPress makes it easy to add a favicon to your site right from the customizer. This is often the recommended method. But it produces heavy image files. For speed’s sake, don’t do it that way!
A favicon improves site credibility, memorability, and findability for users. It’s easier to find a bookmark with an icon next to it than to read text.
An ICO file allows storing multiple images with different sizes in one file. This is not good for speed or mobile data consumption. Choose the simplest export possible usually 4-bit color depth. You can create ICO files in a photo editor like Gimp. But an online favicon generator is a good option.
In WordPress, favicons are called Site Icons.Since WordPress 4.3, the Customizer has a Site Icon option. For extreme mobile speed performance, we don’t recommend it.
Since HTML5, the PNG format is also an acceptable format for favicons. All major browsers support PNG now. All browsers (even old ones) support ico format.
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. These new image clones are theme dependent. WordPress then processes other sizes from that original file:
32×32 pixel favicon.
180×180 pixel app icon for iOS up to the iPhone 6+.
192×192 pixel Android/Chrome app icon.
270×270 pixel medium-sized tile for Windows.
These favicons are in your WordPress media library. If you use three colors in your favicon, all this other image baggage is unnecessary and wasteful. A favicon is not a logo. Use a photo editor like Gimp or Photoshop to design a 16×16 pixel square.
Here’s our method for best mobile speed:
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.3 – and has zero page weight. We compared all freebie 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, clear the site cache if your using a caching plugin.
Uploading a site icon with theme upload in the Customizer increases the page weight of the favicon.
The BleuT FavIcon plugin used for uploading a Favicon.ico file is probably 10 years old. Most site owners would never use it because it’s so old. But it works fine. It’s never needed to be updated even with PHP 7.3. BleuT FavIcon was last updated in 2014.
If you upload favicon’s directly to the root folder, that favicon will override the plugin. If you upload via the Customizer, it appears to override all other methods. We’re not sure why.
Favicon was the file name originally used by Microsoft. WordPress invented the phrase Site Icon. The fastest loading favicons are still in this .ico format and can be exported from image processing programs. If it is in the root folder on a server, it will automatically lazy load. This then becomes transparent to desktop users. But it is still data going through the wireless pipe to remote mobile devices.
A properly built favicon is about 300 bytes of page weight. It is 16 pixels square, not 512 pixels square. Using the old plugin does not produce two, three or more favicons as is the modern convention, only one.
Does this bother anyone? None we’ve heard of in our studies thus far. There seems to be no consequences as far as audience acceptance.
Using a plugin is a better alternative to uploading via WordPress Customizer thus bypassing the bloat WordPress causes to this kind of file.
To not upload a favicon, creates either a heavy generic browser substitute or a 404 error. Both cause delays.
We often see favicons weighing 75k or more total on slow sites. Again, it doesn’t matter for desktop – only mobile.
For mobile speed, the ideal way to make a “Site Icon” is uploading to the server root file a 16×16 pixel favicon.ico file. That is the coder way to do it using Cpanel or FTP access. The most common open-source FTP client is Filezilla. But most people don’t know how to do that stuff. It’s too scary.
Site Icon is WordPress vernacular and jargon.
The second best way for mobile speed is to upload a 16×16 pixel favicon.ico file via a plugin.
The third way is to upload a 512 pixel square GIF or PNG file to the Customizer “Site Identity” section. This will inflate a small file because of WordPress’ weird image resizing algorithms. Not always. Just sometimes. It will also load two site icons instead of one. But it is theme dependent. Some themes load up to four icons for various devices. That then can cause up to 100k of page weight and 4 requests. For mobile speed amateurs, it’s best not to use this method.
The worst way for mobile and desktop is not uploading a Favicon, thinking that’s the fastest. Instead this causes 404 errors or browser-on-the-fly default placeholders that delay pages as they search for a non-existent asset.
Online speed tests often exclude the favicon from the speed test but still show it as a lazy loaded asset. That’s all great but the data still must pass through the mobile data pipe. For guys on desktop fiber connections, this is a non-problem.
If you first used the plugin method and then used the Customizer, three favicons will load. To fix this error, delete all three and upload directly with FTP to the root. This may take up to 24 hours to propagate. Why the delay? We have no idea. But we’ve seen it many times. Silly.
One single 482-byte favicon takes 4.1 milliseconds to load without using WordPress or a plugin. Favicon size depends upon number of colors, graphic complexity, and export method.
Is website font decoration more important than speed performance? Is the typography on your site the easiest way for users to consume content?
Zero-latency fonts mean losing no time in exchanging information. The system responds with instant font information. We recommend not using Google Fonts – or any other font hosted from a remote server.
Adobe Fonts (Typekit) is an online service offering a library of fonts. Typekit often causes a 1-second delay on all pages and posts. The worst!
The more fonts you use the worse site drag becomes. OMGF plugin is for hosting Google fonts locally. We’ve tried it and are not impressed. For best speed, accept your fate. Sacrifice fancy custom fonts and use utilitarian system fonts instead.
There are other tricks touted by various plugin authors and coders as beneficial. These include lazy loading fonts or reducing font character sets. These are esoteric wastes of energy. A false sense of superiority to justify keeping decorate fonts.
Attractive fonts are popular for designing a website. Most don’t realize web fonts add extra HTTP requests and affect server response time. Don’t go for fancy. Simplify. Don’t follow herd popularity. Face it. Content readers don’t care about fonts as much as the whim of website owner. Give up the vanity.
Why is a mobile font stack best practice for mobile speed performance?
The fastest font is one where you never have to make a request. In the past, those were ubiquitous web-safe fonts like Arial, Verdana, and Georgia. These are on 99.9 percent of computers. The last font specified in a font stack is a catchall fail-safe sans-serif or serif default font.
The System-UI font is best for readability on small mobile screens. These are the default font settings in modern themes. Themes like WordPress default Twenty-nineteen theme or GeneratePress or Astra. They use a Cascading Style Sheet (CSS) font stack coding trick. It looks like this code definition:
This snippet instructs the browser to use device native fonts. On modern themes, you make these settings in the theme customizer. When loaded, the theme checks the first font suggestion. Then proceeds to the last in the series until it finds a system match. This happens faster than a blink. This is great, for two reasons:
There’s no external font to download during page load.
The site adopts the feel of the OS, making it feel “just right.”
Defaulting to the system font of a particular operating system always boosts performance. The browser doesn’t have to download any font files. It’s using one it already had. That’s true of any web safe font, also. The beauty of system fonts is that it matches what the current OS uses. It’s a comfortable look. It’s optimized and built-in for the device screen. Native fonts are already installed on the computer or device. They’re designed for best mobile readability on small screens.
What are those native fonts? It depends. For example:
Mac OS X (El Capitan): San Francisco
Mac OS X (Yosemite): Helvetica Neue
Mac OS X (Mavericks): Lucida Grande
Windows (Vista): Segoe UI
Windows (XP): Tahoma
Windows (3.1 to ME): Microsoft Sans Serif
Android (Ice Cream Sandwich (4.0)+): Roboto
Android (Cupcake to Honeycomb): Droid Sans
With new system versions, come new fonts, and thus the need to update your font stack.
But there is a method to end babysitting font changes: specify system UI fonts. It doesn’t need a web-font delivery service or font files stored on your server.
We recommend using the zero-latency system UI fonts on your website.
When we use code like font-family: system-UI, sans-serif; we’re all set. Here’s what happens on various devices:
Enabled by default in Chrome 56, system-UI is a special font name. It tells Chrome to use the system font (be it Cantarell in Gnome, San Francisco in macOS, etc.)
Safari and Firefox on Mac will recognize -apple-system and use the Mac system font. Then comes the standard system-UI, but only available in Chrome 56. Older versions of Chrome, on Mac only, will interpret the same with BlinkMacSystemFont. Now comes Segoe UI, unlike the first three this is a real font name, the one used in Windows since Windows Vista. Now comes: Roboto for Android, Helvetica Neue for some versions of macOS, and Arial for old Windows.
This superior font stack below helps Linux users – and everything else: