How to Optimize your WordPress Theme for the Web in 2018

Published January 7, 2018

I’ve spent the last few weeks tweaking this WordPress theme to include semantic HTML5 elements, basic SEO/meta tag prep, and code minification. I wanted to be sure this site loads fast, is indexable by search engines, and features clean and minimized code!

I put together this list as a “first-stop” in prepping a WordPress theme for the web in 2018. My aim was to keep it to a manageable chunk of tasks that could be accomplished on a Sunday afternoon. Hope you find it helpful!

Cleaning up the HTML <head> Section

The WordPress wp_head() function will include all kinds of meta tags out of the box, which is great to include by default; I chose to disable a few of the more nuanced tags in order to clean up by <head>. This was done fairly easily by adding lines to the functions.php file of the theme:

remove_action('wp_head', 'rest_output_link_wp_head');
remove_action('wp_head', 'wp_oembed_add_discovery_links');
remove_action('template_redirect', 'rest_output_link_header', 11, 0 );
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_shortlink_wp_head');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wp_resource_hints', 2);
remove_action('wp_head', 'feed_links_extra', 3 ); // Display the links to the extra feeds such as category feeds
remove_action('wp_head', 'feed_links', 2 ); // Display the links to the general feeds: Post and Comment Feed
remove_action('wp_head', 'rsd_link' ); // Display the link to the Really Simple Discovery service endpoint, EditURI link
remove_action('wp_head', 'wlwmanifest_link' ); // Display the link to the Windows Live Writer manifest file.
remove_action('wp_head', 'index_rel_link' ); // index link
remove_action('wp_head', 'parent_post_rel_link', 10, 0 ); // prev link
remove_action('wp_head', 'start_post_rel_link', 10, 0 ); // start link
remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0 ); // Display relational links for the posts adjacent to the current post.
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action('wp_head', 'rel_canonical'); //remove duplicate canonical include

I noticed that WordPress was inserting styles and tags for the WP Emoji functionality, which my theme does not tag advantage of. To remove this add these lines to your functions.php:

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_scripts', 'print_emoji_detection_script' );
remove_action('admin_print_styles', 'print_emoji_styles' );

Using HTML5 Semantic Elements

HTML5 introduced a few new HTML tags that can easily be worked into our templates, which will improve our SEO rating and make our site more accessible via screen readers.

Semantic Element layout, featured in Michelle Lee’s post

Header

The <header> element can be used in two places:

The top navigation area of the template that is shared on all pages – contains the site title, main navigation menu, and anything else at the top that is shared by all pages.
The beginning of our article or blog post – contains the unique title of the post (not to be confused with the title of the site itself), as well as any author and publication date information.

More information on the <header> tag is available here.

Footer

Probably the easiest of our semantic tags, the <footer> element is used at the bottom of our page HTML, and encompasses any information, links, etc. that is shared between pages.

Footer tags can also be used at the bottom of an <article> tag (discussed below) to house things like comments or footnotes.

More information on the <nav> tag is available here.

Nav

The <nav> is used wherever our template features navigation items. A good guiding principle is to include any items or links in a <nav> element that you would want skipped by a screen reader. I used the <nav> element for the top navigation of this theme.

More information on the <nav> tag is available here.

Article

The <article> tag is powerful, and can be used to signify any content that could be replicated or distributed on its accord. To help understand exactly what we need inside of the <article> tag, imagine one of our posts being printed like a news article, and distributed by hand around town. In that scenario, we would only want the essentials included: unique post title, author information, publication date, and post content itself; we would not need our site header, navigation, or footer information.

More information on the <article> tag is available here.

Time

An interested tag, <time> is used to specify the publication date in a machine readable format (often ISO8601). This is picked up by search engines and allows them to easily index the publication date of our post.

Similar to an <href>, the human readable date is included in-between the opening and close <time> tags, while a “datetime” attribute is used to specify the date in machine readable format.

<time datetime="2017-12-31T17:41:10+00:00">December 31, 2017</time>

Medium makes good use of the <time> element.

Including a Sitemap and Robots.txt

Luckily with WordPress there are several plugins that can take care of generating the sitemap and robots.txt file for us (some will even proactively submit them to Google and search engines on update).

The plugin I went with is called Google XML Sitemaps. After installing it and minimal configuration, I had a dynamic sitemap.xml and robots.txt file available. Its just that easy!

Code Minification

One final thing we can do to cut down on site transfer time is to employ code consolidation and minification. Again we can use plugins to do this for us. Of the many alternatives out there, I stumbled across Fast Velocity Minify, which takes care of minifying HTML, JavaScript, and CSS.

I like this plugin because it can handle multiple JavaScript or CSS files, and merge them into a single, minified file. It even places the <script> include in the site footer, which is non-blocking and helps the site HTML render faster. ¹

We can include third-party JavaScript and CSS files in Fast Velocity Minify’s minification process using WordPress’s built in wp_enqueue_style() and wp_enqueue_script() functions.

Below is code that I use to include Prism, the popular syntax highlighter, in my WordPress theme. I simply added the following lines to my theme’s functions.php to register Prism’s JavaScript and CSS with WordPress. Once registered, the Fast Velocity Minify Plugin includes these files in it’s minification build!

// register css file with WordPress
wp_enqueue_style( 'prism', get_stylesheet_directory_uri() . '/css/prism.css' );
// register javascript file with WordPress
wp_enqueue_script( 'prism', get_stylesheet_directory_uri() . '/js/prism.js' , null , null , true );

Further Research

I am continuing to research other ways to speed up page delivery including using things like using CDNs, cache headers, and Gzip compression. Another topic that has been very important on other site’s I’ve managed is Image Optimization – I’ve been playing around with the EWWW Image Optimizer Plugin with great success.

Hope this article was helpful, and stay tuned for more updates!

References

Should Jquery code go in header or footer?