Used WordPress Plugins

Gtmetrix16042021 Min
Gtmetrix16042021 Min
Pagespeedinsights Desktop 14042021
Pagespeedinsights Desktop 14042021

The information below is mainly for our internal information. The provided information is related only to our website (Twentyseventeen theme). Modify something only when you know what you are doing.
Suggestions are welcome. You can also take a look at our used monitoring tools.

No.PlugIn namespeed improvements
1Ajax Search Litesee below
2Forget Spam Commentno impact on speed
3CAOSnothing to do, works fine
4Contact Form 7not bad
5Cookie Barno impact on speed
6Copy Or Move Commentsno impact on speed
7EditorsKitwas good. Since June2021 deleted, because suddenly unwanted functions appeared in the backend.
8Flamingono impact on speed
9G Meta Keywordsno impact on speed
10Honeypot for Contact Form 7ok
11Insert HTML Snippetno impact on speed
12Lightweight Subscribe To Commentsno impact on speed
13Listono impact on speed
14MailPoet 3 (New)see below
15MailPoet 3 Premium (New)
16MetaSlidersee below (removed since May 2021) At least for our site no one will watch a slideshow.
17One Click Accessibility
18Polylangworks fine
19Query Monitorno impact on speed
20Smushreplaced by WP-Optimize
21Tabby Responsive Tabssee below
22The Post Gridsee below
23The SEO Frameworkis ok, rich results are deactivated and added manuallly in functions.php
24Theme and plugin translation for Polylang (TTfP)no impact on speed
25UpdraftPlus – Backup/Restoreuses 100% CPU during backup, but ok
26Watu Quizno impact on speed
27Wordfence Securityno impact on speed
28WP-optimizebetter than any other tested plugin for minification and caching
29ImageKit CDNtemporary removed, we rewrite the urls with a function
30Shift8 CDNworks with deactivated plugin, we rewrite the urls on final output

All code goes to the functions.php respective style.css of the child theme. Tested only with WP Theme 2017 and our used plugins.

General

Don’t load the standard fonts, we are hosting our fonts locally for GDPR purpose and speed.

/* don't load the standard fonts */
add_action('wp_print_styles', 'twentyseventeen_dequeue_styles', 100);
function twentyseventeen_dequeue_styles() {
wp_dequeue_style( 'twentyseventeen-fonts' );}

Remove all injected inline CSS in head. WordPress and some plugins are adding css with functions inside a class. Since dequeuing these things is no real fun, we use a little helper to remove all tags starting with <style… from the head. It’s quick and hassle-free, no matter who is injecting what. Make sure that all needed CSS is in the stylesheet.

/* remove all <style tags in the head
copy all injected CSS first and put it the child theme style sheet, if needed*/
add_action('get_header',function (){
	ob_start(function ($string) {
    $string = preg_replace( '@<(style)[^>]*?>.*?</\\1>@si', '', $string );
    return trim( $string );
	 });
});


add_action('wp_head',function (){
    ob_end_flush();
   }, 992);
   

1 Ajax Search Lite

We have made these tweaks:

/* Add search in menu bar */
function se_add_search_box_to_menu( $items, $args ) {return $items . get_search_form();}
add_filter( 'wp_nav_menu_items', 'se_add_search_box_to_menu', 10, 2 );

Remove the style-sheet and add the really required css to the Child theme style.css
/* don't load the style sheets for Ajax search, styles are in the child theme css  */

add_action( 'wp_enqueue_scripts', 'mywptheme_child_deregister_styles', 11 );
function mywptheme_child_deregister_styles() {
    wp_dequeue_style( 'wpdreams-asl-basic' );
    wp_dequeue_style( 'wpdreams-ajaxsearchlite' );
}

The additional inline CSS is removed with the function under General.

14 MailPoet 3

We don’t load the custom fonts

/* don't load the custom fonts for mailpoet */
add_filter('mailpoet_display_custom_fonts', function () {return false;});

16 MetaSlider

Instead of a static image on top of all post/pages we are using MetaSlider. The shortcode is used in the Child theme header-image.php:

<div class="custom-header snow">
<div class="custom-header-media">
<!--	<?php the_custom_header_markup(); ?> -->
<?php echo do_shortcode('[metaslider id="4372"]'); ?> 
</div>
<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
</div><!-- .custom-header -->

The additional class ‘snow’ is used together with the css for generating snowflakes as overlay. This css is only activated for a certain period of the year.

17 One Click Accessibility

Nice tool, but it writes a lot of CSS in the head. You get rid of it with the function under General.

21 Tabby Responsive Tabs

Remove the style-sheet and add the really required css to the Child theme style.css

/* don't load the style sheet for tabby */
remove_action('wp_print_styles', 'cc_tabby_css', 30);

Tabby replaced by a self-made pure CSS accordion without JavaScript (06.5.2021)

22 The Post Grid

The Post Grid is loading the complete fontawesome. This is really not necessary. We are using only five icons, so we have created a sub-set.

@font-face {
  font-family: 'icomoon';
  src:  url('https://clouglobal.com/wp-content/uploads/omgf/icomoon.eot?3iqpaz');
  src:  url('https://clouglobal.com/wp-content/uploads/omgf/icomoon.eot?3iqpaz#iefix') format('embedded-opentype'),
    url('https://clouglobal.com/wp-content/uploads/omgf/icomoon.woff') format('woff'),
    url('https://clouglobal.com/wp-content/uploads/omgf/icomoon.ttf?3iqpaz') format('truetype'),
   url('https://clouglobal.com/wp-content/uploads/omgf/icomoon.svg?3iqpaz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

The assignment to the post grid selectors:
[class^="fa "]{
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 15px;
  color: #cb2424;
  letter-spacing: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

i.fa.fa-user:before {
font-family: 'icomoon';
  content: "\f007";
}

i.fa.fa-calendar:before {
  content: "\f073";
}

i.fa.fa-comments-o:before {
  content: "\f0e6";
}

i.fa.fa-folder-open-o:before {
  content: "\f07c";
}

i.fa.fa-tags:before {
  content: "\f02c";
}

Remove the fontawesome

/* don't load fontawesome */
add_action( 'wp_enqueue_scripts', 'remove_postgrid_fontawesome', 20 );
function remove_postgrid_fontawesome() {
 wp_deregister_style( 'rt-fontawsome' );
  }

Since we are using only a fragment of the Post Grid css, we have added the necessary styles to our style.css and removed the plugin style sheet

/* don't load the postgrid css */
add_action('wp_print_styles', 'remove_postgrid_css', 100);
function remove_postgrid_css() {
wp_dequeue_style( 'rt-tpg' );}

Remove the Twentyseventeen SVGs

The page body includes plenty of svg-definitions. We need only a few.

/* remove the svg icons*/
function remove_parent_svg_icons()
    {
        remove_action('wp_footer', 'twentyseventeen_include_svg_icons', 9999);
    }
add_action('after_setup_theme', 'remove_parent_svg_icons');

Then add what we need to the child-theme footer.php. Copy the required symbol definitions before you remove the svg icons.
Childtheme Footer
Childtheme Footer

Move styles from head to footer

Our solution so far

/*remove css from head*/
add_action( 'wp_enqueue_scripts', 'cl_unload_css', 9999 );
function cl_unload_css() {
    wp_dequeue_style( 'pojo-a11y' );
    wp_dequeue_style( 'contact-form-7' );
    wp_dequeue_style( 'cookie-bar-css' );
    wp_dequeue_style( 'editorskit-frontend' );
    wp_dequeue_style( 'twentyseventeen-ie8' );
}

/*add css to footer */

function cl_additional_stylesheets() {

wp_register_style( 'pojo-a11y', 'https://clouglobal.com/wp-content/plugins/pojo-accessibility/assets/css/style.min.css' );
wp_enqueue_style( 'pojo-a11y' );
wp_register_style( 'contact-form-7', 'https://clouglobal.com/wp-content/plugins/contact-form-7/includes/css/styles.css' );
wp_enqueue_style( 'contact-form-7' );
wp_register_style( 'cookie-bar-css', 'https://clouglobal.com/wp-content/plugins/cookie-bar/css/cookie-bar.css' );
wp_enqueue_style( 'cookie-bar-css' );
wp_register_style( 'editorskit-frontend', 'https://clouglobal.com/wp-content/plugins/block-options/build/style.build.css' );
wp_enqueue_style( 'editorskit-frontend' );

}

add_action( 'wp_footer', 'cl_additional_stylesheets' );

Final removals and substitutions

  ob_start();
add_action('wp_print_footer_scripts', function () {


    $html = ob_get_clean();
    
    /*logo*/
    $html = str_replace('alt="Logo" sizes="100vw"', 'alt="CLOUGLOBAL-Logo"', $html);
    
   
    /*remove the escape slashes in excerpt*/
	$html = str_replace("'", "'", $html);
	
	/*remove mailpoet inline style*/
	$html = str_replace('', '', $html);
	
	
    echo $html;
}, 0);

The above action replaces whatever comes in your mind before page/post caching. Here you can do final cosmetics for the html-source-code.

ImageKit Content Delivery Network

The minified JS and CSS files are with the Imagekit-plugin not linked to the CDN. WP-Optimize adds those files after the rewriting of the CDN was done.
To overcome this, we rewrite at the shutdown-hook, immediately before cacheing.
This solution also works with Shift8

ob_start();
add_action('shutdown', function () {
$html = ob_get_clean();
    
$html = str_replace("clouglobal.com/wp-content/cache", "yourCDN.../wp-content/cache", $html);
    
echo $html;
}, 0);

This is quick, dirty and efficient. Better solutions are welcome:)
The actual solution is running Shift8.

Conclusion

All the above code is active running on this page. The information here is mainly for our maintenance staff. If you find something useful, leave a comment.

For fun, you can review the actual performance of the top 100 websites.

Thank you for taking a look.

Leave a Reply

Your email address will not be published. Required fields are marked *