Skip to main content?

Welcome dog lover to your new supercharged dog knowledge base! Earn your sad a bone today with your 1st comment on what you read

g+ wa li fb pin tw

Apr 132018
 
Fast-website_Supercharged-website-speed

Top Ten Revealed: How to Speed Up WordPress Websites

Examples of those Top 10

In no particular order, because the order depends on your website specifics!

No actually, let me first share the ONE ADVICE that summarizes everything else anyone could tell you how to improve page speed. After months and months of digging deeper and deeper into this topic, and testing and analyzing each milestone, I came to realize that THIS IS THE KEY - and I found that insiders like Patrick Saxton, Chris Coyier etc seem to agree 100%:

Load Only What Is Needed, And Only When It Is Needed!

Again, until you can recall these 11 words in your sleep: Load Only What Is Needed, And Only When It Is Needed!

Once you can recall these 11 words in your sleep, "simply" mrgreen implement it that way. Ideally exactly that way. idea

And so, MYGERMANSHEPHERD.ORG now ONLY loads the html and the "above-the-fold" css immediately (so that the requested webpage can be displayed). Everything else we only load later, after the page is rendered. Including all scripts, other css, and jQuery - where people on the internet argue "that isn't possible". You can observe our page load process with page speed tools like webpagetest.org. grin

 

Now on to some specific tips that of course are all included in the cute cow image at the top. grin

1Images: compress wherever possible!

This is obvious, and easy. We have done that ever since. Because it doesn't make sense to transmit to website visitors hundreds of kilobytes (or even megabytes) of today's even the cheapest point-and-shoot digicams - unless you have a photographers' site or whatever, in which case you'll not be using a point-and-shoot digicam anyway.

So for now, let's not elaborate on this well-known point.

2Comments: load comments only on click!

This is all the more critical when the website is using avatars, or gravatars for that matter (globally recognized avatar) to help visitors associate with their comments. Even more critical because making server calls to fetch every single avatar (possibly even from third party servers like in case of gravatars) COSTS TIME AND BANDWIDTH!

It is amazing to see how many websites FAIL here. And we did too. Hey, all websites except for MYGERMANSHEPHERD.ORG even fail to avoid comment spam, hence why most quality websites have disabled comments altogether. They realized that more SPAM gets posted than genuine comments, right?

Indeed of all the sites I have ever visited, ONLY MYGERMANSHEPHERD.ORG is 100% spam spam-free, and has always been: The spam-free oasis on the internet.

And now, we also learned how to load comments (and their avatars) only on click! grin This saves tremendously on initial page size and avoids server calls, and so this dramatically improves page load speed!

pt-rt-grThese two sub-points may convince millions of corporate websites to bring back comments, which are essential if you have interest in your visitors. If you merely advertize your services (communicate one-way) then effectively you spam your audience, and then you don't need to offer comments of course. But: with no interest in your audience you may not have an audience for long. doh!

So everyone: Do bring back comments, just safeguard your site against SPAM spam the way we do so successfully.

pt-rt-grPatrick, this includes you too wink (he doesn't allow comments on varvy)

3Scripts and CSS: eliminate, defer, or inline!

Phew, this was tough! Toughest! I really thought we would never be able to make this website fast! All those pagespeed-website1 suggestions meant nothing to me:

  • Avoid landing page redirects
  • Enable compression
  • Improve server response time
  • Leverage browser caching
  • Minify resources
  • Optimize images
  • Optimize CSS Delivery
  • Combine external CSS
  • Prioritize visible content
  • Remove render-blocking JavaScript
  • Combine external JavaScript
  • Parallelize downloads across hostnames
  • Minimize redirects
  • Minimize DNS lookups
  • Remove query strings from static resources
  • Specify a cache validator
  • Serve static content from a cookieless domain

I had NO IDEA WHAT??, no idea HOW?? doh!

 

pt-rt-gr1 Pagespeed-websites: The six we used are, in no particular order:

Finally I figured, for each individual plugin, script, and css file you basically need to consider:

1Does the plugin/script/css need to load on all pages, or indeed at all??

If not, restrict the plugin/script/css to pages that need it!

This entails to get rid of every plugin that isn't essential or at least truly helpful to your audience.

2Next, on the pages where needed, defer the script to load only later. Because scripts prevent rendering of the page, and even loading them asynchronously is suboptimal to not loading them at all, until needed.

Likewise, defer the css that isn't needed for initial page display. That's often also called "above the fold" but really means "for a first complete impression" of your website, because often visitors may start scrolling down instantaneously "thanks" to the "above the fold" ads and popups overload they experience everywhere else - which by the way is very similar to the vaccination overload: only harmful, no benefit at all!

3Next, can the script or css be inlined?

  • Yes, if small. What is small, you decide.
  • If it cannot be inlined, can the script or css be stored and retrieved locally from your own server, OR is it a resource that is already stored on most visitors' devices anyway? For example Google's jquery library is!

Be aware that some genuine website speed improvements, like this one, will lower the grades you get in some website-speed tests. But that is purely a reflection of their testing methodology, it should not stop you to do what genuinely improves page speed for your visitors!

So if the script or css cannot be inlined then:

  • link to the external resource: this is ideal if a ubiquitous resource because it's already stored and so does not need to be downloaded
  • or retrieve it locally from your own server: this is ideal if not a ubiquitous resource because you avoid an external server call and wait time!

Conclusion

Even if all you do is these three of the Top 10 the cow portrays so lovely above,do these three and you will have one of the fastest websites around. And if your content is Top too, you will please your visitors twice: Top content, delivered at Top speed. What a great browsing experience!

Remember, part of Top content is ZERO SPAM spam. Because

There is no such thing as a quality website that either has no #comments at all, or comments intermixed with #SPAM

click to tweet

And that's regardless whether that SPAM are:

  • irrelevant links that your site accidentally approved
  • or a mystical series of ??? ? ?? ????? ?? (apparently the new kid on the block amongst spammers)
  • or "i've found your blog to be really good, i've bookmarked it, i will be back for more" [SPAM]

 


Example for 3

As a typical wordpress website example, here is all the stuff that got loaded and evaluated on each of our pages - until "the day after" I learned how to eliminate, defer, or inline all scripts and CSS: grin

The CSS

Immediately ("above the fold")

1. <link rel='stylesheet' id='quoty-css' href='https://mygermanshepherd.org/wp-content/plugins/quoty/public/css/quoty-public.min.css' type='text/css' media='all' />

2. <link rel='stylesheet' id='suffusion-theme-css' href='https://mygermanshepherd.org/wp-content/themes/suffusion/style.css' type='text/css' media='all' />

3. <link rel='stylesheet' id='suffusion-theme-skin-1-css' href='https://mygermanshepherd.org/wp-content/themes/suffusion/skins/light-theme-red/skin.css' type='text/css' media='all' />

4. <!--[if !IE]>--><link rel='stylesheet' id='suffusion-rounded-css' href='https://mygermanshepherd.org/wp-content/themes/suffusion/rounded-corners.css' type='text/css' media='all'><!--<![endif]-->

5. <!--[if gt IE 8]><link rel='stylesheet' id='suffusion-rounded-css' href='https://mygermanshepherd.org/wp-content/themes/suffusion/rounded-corners.css' type='text/css' media='all'><![endif]-->

6. <!--[if lt IE 8]><link rel='stylesheet' id='suffusion-ie-css' href='https://mygermanshepherd.org/wp-content/themes/suffusion/ie-fix.css' type='text/css' media='all'><![endif]-->

7. <link rel='stylesheet' id='suffusion-generated-css' href='https://mygermanshepherd.org/wp-content/uploads/suffusion/custom-styles.css' type='text/css' media='all' />

8. <style type="text/css" id="custom-background-css">body.custom-background { background-color: #ffffff; }</style>

9. <style type="text/css">/* <![CDATA[ */ #wrapper #nav {float: left;} /* ]]> */</style>

10. <style type="text/css">/* <![CDATA[ */ /* fixing navigation bar above header to top */ #nav-top, #nav-top.continuous ... AND-ON-AND-ON ... 20px!important;}/* ]]> */</style>

And subsequently with the content

11. <style type="text/css">.comment-sub-ops ... AND-ON-AND-ON ... </style>

12. <link rel='stylesheet' id='mediaelement-css' href='https://mygermanshepherd.org/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css' type='text/css' media='all' />

13. <link rel='stylesheet' id='wp-mediaelement-css' href='https://mygermanshepherd.org/wp-includes/js/mediaelement/wp-mediaelement.min.css' type='text/css' media='all' />

The scripts

Immediately ("above the fold")

1. <script type='text/javascript' src='https://mygermanshepherd.org/wp-includes/js/jquery/jquery.js'></script>

2. <script type='text/javascript'>/* <![CDATA[ */ var Suffusion_JS = ... AND-ON-AND-ON ... /* ]]> */</script>

3. <script type='text/javascript' src='https://mygermanshepherd.org/wp-content/themes/suffusion/scripts/suffusion.js'></script>

4. <script type="text/javascript">/* <![CDATA[ */ wppaImageDirectory = = "https://mygermanshepherd.org/wp-content/plugins/wp-photo-album-plus/img/"; wppaAjaxUrl = ... AND-ON-AND-ON ... /* ]]> */</script>

5. <script type="text/javascript">/* <![CDATA[ */jQuery.noConflict(); jQuery(document).ready(function($){var $wpAdminBar = $('#wpadminbar'); ... AND-ON-AND-ON ... /* ]]> */</script>

6. <script type="text/javascript">wppaImageDirectory = "https://mygermanshepherd.org/wp-content/plugins/wp-photo-album-plus/img/";wppaWppaUrl = ... AND-ON-AND-ON ... </script>

7. <script type="text/javascript">function googleTranslateElementInit() { ... AND-ON-AND-ON ... }</script>

And subsequently with the content

8. <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->

9. <script>jQuery(document).ready(function() {var handler_shortcodedonate = StripeCheckout.configure ... AND-ON-AND-ON ... </script>

10. <script>window.fbAsyncInit = function() {FB.init({ ... AND-ON-AND-ON ... (document, 'script', 'facebook-jssdk'));</script>

11. <script>jQuery(document).ready(function() {var handler_sidebarwidget = StripeCheckout.configure({ ... AND-ON-AND-ON ... </script>

12. <script>jQuery('#wppa-exit-btn').on('touchstart',function(){jQuery('#wppa-exit-btn').stop().fadeTo(300,1);});jQuery('#wppa-exit-btn').on('touchend',function(){jQuery('#wppa-exit-btn').stop().fadeTo(300,0.1);});</script>

13. <script>jQuery('#wppa-fulls-btn').on('touchstart',function(){jQuery('#wppa-fulls-btn').stop().fadeTo(300,1);});jQuery('#wppa-fulls-btn').on('touchend',function(){jQuery('#wppa-fulls-btn').stop().fadeTo(300,0.1);});</script>

14. <script type="text/javascript">jQuery("#wppa-overlay-bg" ... AND-ON-AND-ON ... </script>

15. <script type="text/javascript" > ... AN EMPTY ONE INDEED ... </script>

16. <script type='text/javascript' src='https://mygermanshepherd.org/wp-content/plugins/quoty/public ... </script>

17. <script type='text/javascript'>var mejsL10n = {"language":"en","strings":{"mejs.install-flash":"You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https:\/\/get.adobe.com\/flashplayer\/","mejs.fullscreen-off":"Turn off Fullscreen","mejs.fullscreen-on":"Go Fullscreen","mejs.download-video" ... AND-ON-AND-ON ... "mejs.ukrainian":"Ukrainian","mejs.vietnamese":"Vietnamese","mejs.welsh":"Welsh","mejs.yiddish":"Yiddish"}}; ... YIDDISH! mrgreen ... </script>

18. <script type='text/javascript' src='https://mygermanshepherd.org/wp-includes/js/mediaelement/mediaelement-and-player.min.js'></script>

19. <script type='text/javascript' src='https://mygermanshepherd.org/wp-includes/js/mediaelement/mediaelement-migrate.min.js'></script>

20. <script type='text/javascript'>/* <![CDATA[ */ var _wpmejsSettings = {"pluginPath":"\/wp-includes\/js\/mediaelement\/","classPrefix":"mejs-","stretching":"responsive"};/* ]]> */</script>

21. <script type='text/javascript' src='https://mygermanshepherd.org/wp-includes/js/mediaelement/wp-mediaelement.min.js'></script>

22. <script type='text/javascript' src='https://mygermanshepherd.org/wp-includes/js/comment-reply.min.js'></script>

23. <script type="text/javascript">(function($) // Comment Mail™ subscr. options. ... AND-ON-AND-ON ... (jQuery);</script>

24. <script src="//mygermanshepherd.org/wp-content/themes/gsd/scripts/Google-Translate.js" type="text/javascript"></script>

25. <script src="https://checkout.stripe.com/checkout.js" type="text/javascript"></script>

PLUS, page-specific things

Like say, only on the actual subscribe page, this css and this script:

<?php if (is_page('2250')): ?> <!--do Mailchimp; mailchimp-signup-popup_embed-min.js does not seem to be needed so I deleted it here--> <link href="//mygermanshepherd.org/wp-content/themes/gsd/custom/mailchimp-classic-081711.css" rel="stylesheet" type="text/css"><script> <!-- function showMailingPopUp() { document.cookie = ... AND-ON-AND-ON ... onclick = function() {showMailingPopUp()};--> </script> <?php endif; ?>

pt-rt-grYou see, an exhausting list of css and scripts got loaded and evaluated on visitors' devices! ALL of that had to be transferred to even the tiniest mobile devices that today's bored commuters(?) put up with using... doh!

I almost feel sorry now that I know.

No more! Now MYGERMANSHEPHERD.ORG is among the FASTEST websites. grin And yet, the high quality content has stayed.

How long did it take? From starting to study what javascript is, css, fluid resizing, concatenation, wp_enqueue, media queries, critical rendering path, deferred asset loading, ... and hey-what-not doh! ... to the final experimenting, testing, implementation, and documentation: about three months! Since then, it has been a "hobby" of ongoing testing... mrgreen

But now I know how to do it all.

And, I hope, it was worth the effort?

 

adult GSDWill you give back a bit today?

USD
 

g+ wa li fb pin tw

 

Join the discussion

 

 

Jonathan: "Thank you for your period advice. It is excellent! My GSD puppy is now 8 months and we read your advice regularly."
Dwayne: "I love this site and the info you post onto it. Thanks again!!!!"
Penny: "Thanks for making your great articles available to all of us. it's nice to know that a recommended product is actually available in my country."

Stay with us and your dog will stay with you, both of you healthy and well-behaved.
If you are ever unhappy with anything we write, do or don't do, we want to be the first to know, thanks.

Disclaimer: Always apply your own common sense when you follow anyone's suggestions. As much as your dog is special (s)he may react different too.

© MYGERMANSHEPHERD.ORG - All content is protected. You must not copy or spin or otherwise change our content to republish it in your name, another one's name or without a name. If you wish to make use of our Intellectual Property Rights contact MYGERMANSHEPHERD.ORG. Thank you.

There's nothing quite like a healthy and well-behaved dog who freely guards every corner of your home, who brings you peace, who brings you joy!
Welcome to MYGERMANSHEPHERD.ORG Saves Health, Cost, Lives!
We help YOU that YOUR DOG does not end up in a(nother) shelter! Nor at a costly yet incompetent vet!
The server used 34 database queries and rendered the page in 1.66 seconds