Readability Theme Progress Update

Last week I delve into web sustainability which led to running several tests using Google’s PageSpeed Insights tool. As I knocked out one suggestion then the next I was surprised how simple delivery enhancements can speed up even the leanest website.

PageSpeed Insights

Websites are heavy, even a simple blog post can easily pass 2 megabites just displaying text. As I drilled down the path to a score of 100 the suggested fixes turned into a game. By removing Open Sans as a web font I saved 300ms. It’s a secondary font on this theme and I didn’t even perceive the swap for my browsers default of DejaVu Sans. Here are some of my favorite enhancements.

  • Setting font-display to swap can save a few seconds. Fonts can be render blocking until the whole page has downloaded. Yikes.
  • Fewer calls to third party servers really do make a noticeable difference. Even Jetpack which leverages caching and a content delivery network adds unnecessary weight to a page.
  • After purging every unnecessary bit from this theme some of the pages load in less than a second.

Caching is easy

A few years ago I shrugged off caching, I always tried to keep my projects lean so adding a plugin to scrape off 500 milliseconds didn’t seem important. However, when you add up those extra kilobytes and half seconds over the total viewership of a website the improvements can be easily perceived.

  • JavaScript is a beast, less so when cached
  • CSS and HTML can be cached allowing for the DOM to fly by
  • I also gained a new respect for lazy loading images

Enough ranting, here’s some screenshots.

PageSpeed Insights Report for this website on the Desktop view.

PageSpeed Insights score this website for the Mobile view.

For kicks check out my PageSpeed Insight results for this page.

Restrict post to WordPress user

Over the that weekend I had been using WordPress to take notes at WordCamp Orange County and realized that WordPress’ block editor is useful as a note taking environment. But what If I don’t want these notes to be public?

Over the that weekend I had been using WordPress to take notes at WordCamp Orange County and realized that WordPress’ block editor is useful as a note taking environment. But what If I don’t want these notes to be public?

Using a template to restrict access

I duplicated TwentyNineteen’s single.php template and wrapped the loop in a conditional tag is_user_logged_in().

The code

<?php
/**
 * Single post and page template for restricting the title and content unless the user is logged in
 * Sources: 
 * https://www.wpbeginner.com/wp-themes/create-custom-single-post-templates-for-specific-posts-or-sections-in-wordpress/
 * https://codex.wordpress.org/Conditional_Tags
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 *
 * License: GPL 2 or later
 *
 * Template Name: Log in Required
 * Template Post Type: post, page
 *
 */

get_header();
?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main">

<?php
	if ( is_user_logged_in() ) {  // check if user is logged in

/* * 
 * Start the Loop 
 * This example  uses TwentyNineteen for the loop, if using a different theme subsitute that loop here.
 * */
		while ( have_posts() ) :
			the_post();

			get_template_part( 'template-parts/content/content', 'single' );

			if ( is_singular( 'attachment' ) ) {
				// Parent post navigation.
				the_post_navigation(
					array(
						/* translators: %s: parent post link */
						'prev_text' => sprintf( __( '<span class="meta-nav">Published in</span><span class="post-title">%s</span>', 'twentynineteen' ), '%title' ),
					)
				);
			} elseif ( is_singular( 'post' ) ) {
				// Previous/next post navigation.
				the_post_navigation(
					array(
						'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next Post', 'twentynineteen' ) . '</span> ' .
							'<span class="screen-reader-text">' . __( 'Next post:', 'twentynineteen' ) . '</span> <br/>' .
							'<span class="post-title">%title</span>',
						'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous Post', 'twentynineteen' ) . '</span> ' .
							'<span class="screen-reader-text">' . __( 'Previous post:', 'twentynineteen' ) . '</span> <br/>' .
							'<span class="post-title">%title</span>',
					)
				);
			}

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

		endwhile; // End of the TwentyNineteen  loop.
    
	} else { // If not logged in present a link to log into the site
		echo '<p style="text-align: center;"><a href="' .  wp_login_url( get_permalink() ) . '" title="Login">Log in to view this post</a></p>';
	}
		?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php
get_footer();

View this code in my GitHub gist.

How does this code work?

Simply put, is_user_logged in() will check if the user is logged before it displays the post. If not they’re presented with a link to log in.

Left, the user is logged in. Right, post content and title will not display.

What it doesn’t do?

Using this post and page template will only restrict the post page. The excerpt or content will still display on archive pages unless those loops run a similar conditional check.

Thirteen Blog Tips from a Thirteen Year Old

Notes taken during from E Lema’s presentation at WordCamp Orange County.

Take your own photos

Avoid stock photos, use your own artwork. Otherwise your website looks like everyone else

Use Headings

Everyone skims, keep it short.

Have an opinion

If you have an opinion, share your take. Facts are interesting, but not helpful your opinion is

Put your picture on the website

Build a personal connection

Always be helpful

Tips, opinions, expertise,

Allow comments

A great way to connect with your audience.

Don’t worry about looks

Content is what’s important

Have an About page

Why should people read your page, who are you. Make it personal. You can trust your friends.

Finish when your thought is out

Don’t write more or less than you need to.

You Don’t have to hit publish

Save it and decide later

Hit Publish

What will it take you to feel comfortable to hit publish. Use it.

Keep at it

Breaks are okay, promise to come back

You will find your voice

Don’t be worried it will come naturally with time. Let your voice come to you.

Tips

How do you deal with writers block? Start with a blank page. Choose a theme such as Inktober.

How do you choose a topic to write about about. Choose something you know well.

How often do you post? Once a week, fit it in where you can.

How many incomplete posts do you have? None at the moment. When it goes nowhere… scrap it.

Journal, smartphone notes apps are useful.