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
2Antispam Beeno impact on speed
3CAOSnothing to do, works fine
4Contact Form 7
5Cookie Barno impact on speed
6Copy Or Move Commentsno impact on speed
7EditorsKitremove all unnecessary items in the settings, works fine
8Flamingono impact on speed
9G Meta Keywordsno impact on speed
10Honeypot for Contact Form 7
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
17One Click Accessibilitysee below
18Polylangworks fine
19Query Monitorno impact on speed
20Smushworks fine
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 Mail Loggingno impact on speed
29WP-Optimize – Clean, Compress, Cacheworks fine, significant improvement out of the box. Before we where running a various number of optimization plugins.
No. 2 on my ranking would be Autoptimize in combination with Fastest Cache.

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 four.

/* 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' );

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.

Thank you for taking a look.

Leave a Reply

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