Category: Wordpress optimization

Jquery.migrate is used to ensure compatibility with older jquery code using deprecated function.

In case your jquery is all shiny and new and you don’t use deprecated functions, then you can get the reed of jquery migrate and have one less file to load. As usual, we will do that by adding a function in the functions.php file of your theme:

function remove_jquery_migrate($scripts)
{
    if (!is_admin() && isset($scripts->registered['jquery'])) {
        $script = $scripts->registered['jquery'];
        if ($script->deps) { 
            // Check whether the script has any dependencies     
            $script->deps = array_diff($script->deps, array('jquery-migrate')); 
            }
      }
 } 
 add_action('wp_default_scripts', 'remove_jquery_migrate'); 

Last time we saw different methods to serve webp or JPEG 2000 pictures to our users. Now let’s see how we can implement this in wordpress

We might work something out thanks to our previous work on changing the wrapping of thumbnails: https://blog.seobytes.eu/wordpress/theme-customization/modify-thumbnails-wrapping-in-woocommerce-product-loop/

We shall also do the same operation on any other images be it post, product pages, background images, header images etc…

But let’s start with the thumbnails: the following code assume that our webp version of the images are in the same folder and have the same name than the jpg version, beside the extension.

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
function woocommerce_template_loop_product_thumbnail() {
echo woocommerce_get_product_thumbnail();
} 
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) { 
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0 ) {
global $post, $woocommerce;
$output = '</div class="imagewrapper"></picture>'; if ( has_post_thumbnail() ) { 
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), $size);
$image_url =$image_url[0];
$webp_url= str_replace('jpg', 'webp', $image_url);
$output .= '<source srcset="'.$webp_url.'">';
$output .='<img class="lozad" data-src="'.$image_url.'" alt="">';
} 
$output .= '</picture ></div>';
return $output;
}
} 

With further research and the sudden realization that there might be a plugin already doing this (although, where is the fun in that?) I found the following plugins:

Webp express which is a free plugin

and Optimus which comes with a fee as far as webp conversion and serving is concerned.

While testing Webp express, it occurs that my virtual hosting does not allow for automatic conversion*. So I have written an article on how to batch convert pictures into webp. 

The author of Webp Express also made a php script to serve webp to supporting browser with .htaccess redirect which is a pretty elegant solution. Check the github page of the project . 

*My web host implemented imagick on the server after I inquired about it :) . No need to batch convert but it seems Imagick does not handle files containing a space in their name.

The apache log of your wordpress server shows:

"POST /wp-cron.php?doing_wp_cron=1542232954.9134418964385986328125 HTTP/1.1" 200 3305 "https://www.example.com/wp-cron.php?doing_wp_cron=1542232954.9134418964385986328125" "WordPress/4.9.8;

WordPress make a http call to wp-cron.php at every site visit. This php script takes care for update check up and for schedule article publication.

WP-Cron works by: on every page load, a list of scheduled tasks is checked to see what needs to be run. Any tasks scheduled to be run will be run during that page load. WP-Cron does not run constantly as the system cron does; it is only triggered on page load.

Source: https://developer.wordpress.org/plugins/cron/

If you want to make sure some tasks are done at a certain time for sure, you can setup a cron task on your server and disable the call to wp-cron.php in the wp-config file.

There is an excellent article from wordpress developper site explaining all the details.

Note: Some sites report that if you use cloudflare or caching plugins, cron may “never run” and therefore recommend the afore-mentioned method. This assertion needs to be verified. Conclusion will be added here.

If error messages and warning are essential during development. They are not welcome in your production environment.

We will have a look on how to hide warnings and error messages from the public while keeping this information accessible to the admin (see https://codex.wordpress.org/Editing_wp-config.php#Debug ) .

Method one: wp-config.php  and php.ini

First we will have a look at the wp-config.php file. For this you will need an ftp access to your site.

https://codex.wordpress.org/Editing_wp-config.php#Debug

You will also need access to php.ini

Method 2: wp-config.php only

Replace:

define('WP_DEBUG', false);

by:
ini_set('log_errors','On'); ini_set('display_errors','Off');
ini_set('error_reporting', E_ALL );
define('WP_DEBUG', false);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
Source: https://www.templatemonster.com/help/wordpress-how-to-hide-php-warnings-and-notices.html

With this method nothing is logged (at least on my server).

For a debug friendly version use Method 3:

 // Enable WP_DEBUG mode
define( 'WP_DEBUG', true );

// Enable Debug logging to the /wp-content/debug.log file
define( 'WP_DEBUG_LOG', true );

// Disable display of errors and warnings 
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

// Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
define( 'SCRIPT_DEBUG', true );

Source: https://codex.wordpress.org/Debugging_in_WordPress

Message are off and error are logged. The draw back of this methods is that the logs are public at /wp-content/debug.log