Improving Google PageSpeed in WordPress

Google PageSpeed 100

I set out to improve my Google PageSpeed score to 100. Through many trial & errors, I finally dumped my current theme and used just the default 2016 WordPress theme. Technically I should create a child theme if I was going to put it into production, but I just needed some insight so I ripped into the parent theme.

The end results for making 2016 theme score 100 is:

  1. Remove the external stylesheet style.css, minify it, and place it in the head.
  2. Remove references to Genericons and specialty fonts out of the functions.php file
  3. Minify the functions.js file
  4. Add this to functions.php to move the jquery scripts to the footer:
add_action('wp_enqueue_scripts', 'rudr_move_jquery_to_footer');  
 
function rudr_move_jquery_to_footer() {  
 	// unregister the jQuery at first
        wp_deregister_script('jquery');  
 
        // register to footer (the last function argument should be true)
        wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);  
 
        wp_enqueue_script('jquery');  
}

This last step got me past the dreaded “remove render-blocking js”.

Practicality?

While this theme is now technically scoring 100, getting a site ready for production will be a little harder. As plugins are added and dependencies appear, the score will decline, but at least I now have a basis to start from (start a new theme) and can work on the score each step of the way.

Bookmark: Function found here:

https://rudrastyh.com/wordpress/render-blocking-javascript-css.html

 

Google PageSpeed 100

Footer Idea

website footer idea

I always liked this type of footer, with the support people lined up to show the real human faces behind the support team or help desk.  I wonder if these are the real employees or models? If it were a staged photo,  it seems like the models would have been more diverse. At least they have the token (one) woman.

So my idea from this is to have my own footer with the many faces of “Sandy”.  A conglomeration of separate photos of me in different outfits, with different duties or aspects of my life. It would range from a baseball hat, pigtails, Burning Man outfit, to a full-on business suit, and every variation in-between. This would allow me to get creative with my persona’s.

WP Engine Onboarding

WP Engine Dashboard

I like how WP Engine orientates you to their product, aka onboarding. The help button opens up a sidebar to the right, and if you click on a topic a voice recorded tutorial starts. You can control the playback with buttons on the bottom. Both the sidebar and playback controls stay fixed during page navigation, so she continues to talk while you look around.

The maker of the tutorial is sidekick.pro

Finger Wag Usability

computer screen showing a big animated finger wagging

He got a real chuckle out of the finger wagging at him. Love a user interaction that elicits emotions.

He tried to upload multiple files at once, but the application can only process one at a time. As user feedback, the program shows a large, illustrated finger pointing into the screen. Why do we like this? It’s recognizable as a no-no, it’s unexpected, and it’s informational guidance.

 

Ad Seen in Captcha

form captcha showing ad

I was filling out a form and came across one of those captchas. to get the image verification code, I had to watch an ad first, right in the form.

form captcha showing ad

I Can’t Put My Finger on it

add too close to close button

I see what you did there. The close button on the ad is so small that I can’t get my finger on the X without hitting the ad button immediately to the left. This is bad design on purpose, who do you think you’re fooling? Additionally the ad is covering the content image. Ads suck. #usability