WordPress Performance- make your site SIZZLE!- Part 3

We have made it to Part 3 of the series on WordPress Performance for your site (the thrilling saga is now coming to an end).

Congratulations! It’s a lot of reading.

WordPress Performance- Common Sense and Plugins

As we mentioned in the last section of Part 2, it was time to take a step back and analyse what is REALLY important on your Home page.

That is the Common Sense bit.

In a sense, it is evaluating in your head whether the function you wish to support is worth the “loading” time.

For instance: what is the point in having a function… if the people that are to use that function have left the site because they got irritated waiting for it to load?

There are, of course, other things that you can do without removing function… simple things- that SO MANY sites do NOT do (be aware when browsing sites and you will see- let them know and help them- sensitively).

Probably the biggest impact here would be IMAGES.

Upload images in the size you want to use. Use a plugin to optimise and automate this (rather than going to picmonkey and resizing each image- yes, I had to do this previously- PAINFULLLLLL).

I think the best way to get going right now…is to simply list another little Table of Contents, with things you can do- and you can browse away and decide if you wish to use any of it.

Table of Contents for Part 3 of WordPress Performance

1. Disable hotlinking on CPanel.
2. Use one statistics package on your site.
3. Sliders- think carefully.
4. Fonts- be aware.
5. Comments plugins- which one?
6. Remove most external loading items (3rd party items) from your home page… e.g. google ads on your home page.
7. Social media sharing/ buttons.
8. DNS Prefetching.
9. Asset Queue Manager plugin
10. EWWW Image Optimizer plugin
11. WP Optimize
12. Autoptimize
13. Caching plugin
14. Gzip and Leverage Browser caching
15. Disable the use of Gravatars.
16. Heartbeat Control.
17. WP YouTube Lyte.
18. Removing query Strings; Removing Emojis; Async JavaScript.
19. Tools used for Webpage speed tests.
20. Conclusion. (Summary post: Post 4)

1.Disable Hotlinking:

Disable hotlinking on your server (c-Panel), so that you stop people using up your bandwidth by linking to your site and using your resources to display your pictures, etc. from your server.

Hotlink protection, can be found in the “Security” section on your cPanel.

2.Use one Statistics package on your site

I mention this, as we have previously discussed using Jetpack.

Most people will be using Google Analytics through a plugin. Jetpack has a nice, simple view using their stats.

However, when I tried to remove the Jetpack stats from the site (and only use Google Analytics), I lost some of the other functionality on Jetpack. So, I quickly activated the Jetpack stats again. (can’t quite remember what… but I reactivated).

Google Analytics do not put expired headers in (from what I remember), so if you don’t mind losing Google Analytics… then throw them out with the bathwater… your site will be quicker.

Otherwise just use the two (if you are already using Jetpack)… I do know that Jetpack issued a notice in this week that they are looking at making Google Analytics easier to implement for the Jetpack premium users … so chances are there will be some kind of link to their stats package… otherwise what point would there be?

If you are noticing a discrepancy in figures between the two packages, I would suggest using the figures from Jetpack. They seem to be more conservative and do not include all the “referral” spam that google analytics display (you can filter it out).

I use the Dashboard Jetpack stats just to give a quick insight into what is happening with the traffic figures and the google analytics if you want to drill down into the figures (make sure that you link your google analytics and google search console… it can tell you some interesting information very quickly).

3.Sliders- think carefully

Be careful when using a slider on your site. They can be extremely heavy loading.

If  your theme has sliders built in, they may load on every page.

You can look at using a plugin: “Plugin Logic” to add a slider as a plugin… you can get it to load only on the pages that you want it to (note I haven’t used this plugin- it had good reviews and made sense. I kept a note in case I wanted to use a slider).

Either way, check the size of the load of the slider you are considering, it can have a big impact on site speed.

4. Fonts- be aware

Look at the fonts you are using carefully.

They can add significant load to your page.

I first looked at what the best “reading” fonts for the web are, found one closest that was not a google font or font awesome and then set about removing google fonts through the Autoptimize plugin and looked at loading only the essentials of Font Awesome.

I now use Arial. I will continue to use this specific font on all sites…good for reading and not “heavy”.

I also tried removing Font Awesome through the plugin “Asset Queue Manager” (brilliant plugin to give you an actual view of what is loading on your site).

However, the theme GeneratePress uses some icons from Font Awesome, so this was not ideal.

Then I used an article that GeneratePress published, which discusses the loading of only the Font Awesome Essentials and did what that article suggested.

And Voila… Typography sorted out for Speed!

(Note: if you are not using GeneratePress, you will need to google and get help with how to sort this issue out for your site. The point is- BE AWARE of your fonts).

Below is the information on how to load only the essentials of Font Awesome in GeneratePress theme (taken from the GeneratePress article).

How to load only the Essentials for Font Awesome in GeneratePress:

Font Awesome is, well, awesome. However, there’s a LOT of icons, and if you’re not using them, then there’s no point in loading all of them.

GeneratePress requires some of these icons for various elements throughout the theme, so we can’t full out remove them.

That’s why GeneratePress has this nifty little filter to strip the icons down to only the essentials.

add_filter( 'generate_fontawesome_essentials', 'generate_fontawesome_essentials' );
function generate_fontawesome_essentials()
{
    return true;
}

To show the difference made here, we can compare the size of the SVG file from Font Awesome (383kb) to the essentials SVG file (7kb).

You can add this filter using the instructions found in our Adding PHP article.

(GeneratePress mentions the use of a plugin called “code snippets“, which I have found very useful previously, to add code for your functions.php file).

5. Comments plugins- which one?

Akismet is pre- loaded with most wordpress installations (or with Jetpack- can’t remember).

It is no longer free.

Comments plugins can be extremely heavy. (I have kept Akismet activated on this site).

You could try the plugin “cookies for comments”, see this page:

http://pagepipe.com/does-akismet-plugin-help-or-hinder-wordpress-page-speed/#more-7794

(Note: the point once again, is to be aware of the load that comment and spam plugins can have on your site).

6. Remove most external loading items (3rd party items) from your home page… e.g. google ads on your home page.

Go through your home page.

Remove google ads (if you are using).

Remove most of the items that will make your page load slower, with them enabling 3rd party scripts.

Do you really want someone to click on an ad and EXIT your site from your home page… or would you rather get a newsletter subscription or get them deeper into your site?

(you can always add back your ads and so forth on a lower level page… where the long tail keywords would be ruling).

7. Social media sharing/ buttons

As we know Sharing Buttons can have a big impact on a sites load time.

There are a huge amount of “sharing” plugins available. (I have the jetpack share on this site).

A big part of the load time is the jsquery that is loaded. Specifically large is the fact that when you have the “count” installed, the query needs to go back to the specific share site to get the count. So you are loading two scripts as opposed to one, if you did not have the share count.

I know it is nice to see the share count… however, if it is causing you large load times… you can consider removing that return call for the count.

Another big factor here is to check the site on mobile as well.

Some buttons completely override the content.(i.e. they get in the way of the content when viewed on mobile)- especially on the “floating/ side bar” type buttons.

Consider putting your share buttons at the bottom of your post (if not using a floating bar), so that people are only sharing after they have actually scanned or read the whole post.

If you want to remove the share count from your sharing button on jetpack, see this post:

https://jeremy.hu/jetpack-remove-the-share-counts-from-the-sharing-buttons/

Implement and Voila, the count function gone… and the plugin (CodeSnippets) loads into the functions.php file… so you don’t need a child theme or anything like that.

You can use the Plugin “code snippets”, by Shea Bunge.

Below from Jeremy Hu’s posting:

“Jetpack’s sharing buttons look good, are simple, and offer 4 different display options:

• Icon + Text

• Text

• Icon

• Official Buttons

If you choose one of the 3 first button types, Jetpack automatically adds sharing counts for the most popular Social Networks.

This is great, but what if you don’t want to make extra requests to external services for each post that you publish on your site? Luckily, Jetpack allows you to remove the sharing counts with a simple filter:

add_filter( ‘jetpack_sharing_counts’, ‘__return_false’ );

Once you add that filter to a functionality plugin or to your theme’s functions.php file, Jetpack will stop adding the Javascript library responsible for calling each Social Network to count the number of shares. Your sharing buttons won’t include any count anymore, but you will have saved a few resources on your site!

I was looking at a few other social sharing plugins, however, jetpack works fine with this removal of the sharing count.

8. DNS Prefetching

DNS prefetching basically calls up the code needed- early in the page, before it is actually needed, see the post below, by Robert Went:

https://www.robertwent.com/blog/general/96-standard-urls-called-by-websites-for-dns-prefetching

I put these two links, for example, into the “head” section in GeneratePress

<link rel=”dns-prefetch” href=”//www.google-analytics.com”>(basically to get the google analytics code early)( and for the google ads)

<link rel=”dns-prefetch” href=”//ajax.googleapis.com”>

Just remember, you can call up (prefetch) your social buttons information, etc. in the same way, the linked page above gives the general most used codes.

9. Asset Queue  Manager plugin

Asset Queue manager is a plugin- which is good for de-enqueueing something that you may not be using , like a font. Or, to see what is happening (what scripts are loading) when your page is loaded.

This is a really handy plugin, I also know that there are paid plugins out there doing the same thing. So. this is a good plugin to use.

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

10. EWWW Image Optimizer plugin

I was going write out this plugins whole story for you, but it is too long and will blog down this post.

Basically, this plugin optimises your images as you upload them to your site. It is really brilliant, I cannot give them enough credit.

Definitely worth your time in using.

https://wordpress.org/plugins/ewww-image-optimizer/

11. WP Optimize:

Another plugin that I would not do without.

Cleans post revisions, tidies up your database and so on.

Your site can build up a lot of junk , old comment, revisions, etc etc- so you need something that can clean this up for you effortlessly.

They are also the makers/ developers of the very popular free backup plugin: Updraft Plus.

12. Autoptimize

I highly suggest that you also install the Autoptimize plugin. Another plugin I will not do without.

It reduces the amount of CSS and JS files being loaded on each page and makes a huge difference to your page speed.

Autoptimize will also bundle the CSS generated into an external file, allowing your browser to cache it.

Once again, there is a plethora of information on the actual FAQ’s regarding the use of Autoptimize.

Here is the link: Autoptimize

13. Caching Plugin

SG Cachepress is the Siteground caching plugin,. it has worked very well for me.

There are a couple of plugins for caching which have very good names/reputations. I would probably use W3 Total cache, if I did not have access to Sitegrounds own developed caching plugin.

I would use it as it has many options, which you can play around with and tweak till you have it just right.

14. Gzip and Leverage Browser caching.

Gzip is another form of compression which compresses web pages, CSS, and javascript at the server level before sending them over to the browser.

GZIP compression saves 50% to 80% bandwidth and will therefore significantly increase a website’s loading speed.

Leverage browser caching will allow your web pages to be served from the browser of the person viewing – this will also increase website performance.

Both of these issues, can be done (if not already done) at server level, so enlist the help of your host (read their FAQs) to get this done and your site will show a better performance.

15. Disable the use of Gravatars.

You may find that the use of Gravatars is costing you a lot of time loading… disable them via your dashboard Jetpack settings.

16. Heartbeat Control

Install the Heartbeat Control plugin (to reduce resource usage on your server).

https://wordpress.org/plugins/heartbeat-control/faq/

17. WP YouTube Lyte

If you have a site that has a lot of video (You Tube), you can install the plugin.

It is developed by the Frank Goossens and Optimizing Matters. (The same bright developer who brought you Autoptimize).

Allows you to lazy load your videos.

Worth your time!

18. Removing query strings; removing Emojis and Async JavaScript.

These 3 methods are taken from the “Optimizing GeneratePress” post by Tom Usborne.

Link: https://generatepress.com/fastest-wordpress-theme/?ref=213

Removing Query Strings

While this won’t make a noticeable difference in your page speed, it will increase your ranking in speed tests.

add_filter( 'style_loader_src', 'generate_remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'generate_remove_cssjs_ver', 10, 2 );
function generate_remove_cssjs_ver( $src ) {
	if( strpos( $src, '?ver=' ) )
		$src = remove_query_arg( 'ver', $src );
	
	return $src;
}

There’s also a plugin which does this for you: Query Strings Remover

Removing Emojis

If you don’t use emojis on your site, then there’s really no point in loading the scripts for them.

This code will remove the WordPress emojis script from your site:

add_action( 'init', 'generate_disable_wp_emojicons' );
function generate_disable_wp_emojicons() 
{
	// all actions related to emojis
	remove_action( 'admin_print_styles', 'print_emoji_styles' );
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
}

There’s also a plugin that can do this for you: Disable Emojis

Async Javascript

This is a simple little plugin which will add some tags to your javascript files, increasing your page speed and giving you better speed scores.

Async Javascript works hand-in-hand with Autoptimize, which is a bonus.

These are the settings I like:

Thank you to Tom Usborne of GeneratePress for these methods.

19. Tools used for Web Page speed tests:

• Gtmetrix.com
• Pingdom tools
• YSlow (is also contained in gtmetrix. However, you can load it up from Google chrome as extension and it shows up on the page that you are on). Try and keep your http requests under 24 on the statistics tab.
• Webpagetest.org does a first time test and a repeat time test (i.e. using the caching)(this is probably the most conservative. You can also run mobile page speed tests)
• https://www.dotcom-tools.com/website-speed-test.aspx (this is nice for getting speed from South Africa)

20. Conclusion

I have no doubt that a lot more can be done to increase your ranking on these tools.

However, there comes a point where “enough is enough”… and Remember, in Part 1- we mentioned that content is the real reason that you have a web site.

So, putting on more informative, interesting, exciting, user interactive content will make your site more well read and visited- which is what you want, speed aside.

Meaning, that if your expertise is the reason for the content- it would probably be better to get someone to do all these things for you and get your website performance up (I have done it myself, as I like to understand what is going on before asking someone else to help).

I truly hope that these postings have helped you with your site. It’s taken a while to get this down in writing.

Helpfully yours

Kenny

P.s.- I will publish a SUMMARY post so that the information is accessible without going backwards and forwards from post to post.

(AND, that’s not all!!)

Further down the line- tools you may want to look at

• “ WP App studio”- this is a package that allows you to develop your own plugins/apps in wordpress. There is actually a free starter option, where you can learn the best method of creating (best practices)… it looks like something I would really enjoy and then the charge is not too much… if you were running a development practice.

http://www.wpmayor.com/wp-app-studio-review/   (review)

• Windows app studio (also free) allows you to create an app in windows… which then gives you the code for visual studio… interesting… with course material etc.
  • Post from Yoast on custom content/post types:
  • https://yoast.com/types-wordpress-plugin/
  • Other custom post type plugins:
  • https://wordpress.org/plugins/custom-post-type-maker/https://wordpress.org/plugins/wck-custom-fields-and-custom-post-types-creator/ (lot of 5 stars)(WordPress creation kit- this is the one to use!)“post type switcher” plugin, if you want to convert a lot of posts/ pages, etc. to another content type.
  • https://wordpress.org/plugins/pluginception/faq/ (a plugin to create plugins)
  • https://wordpress.org/plugins/custom-post-type-ui/ (this is the one mentioned by wordpress beginner). You need to get the extended version for the “display” of those custom posts. Seems like it has a couple of good write ups (about 20$ for the views portion).
  • https://wordpress.org/plugins/wck-custom-fields-and-custom-post-types-creator/