Must have Practices for Optimizing your WP Website

PressTigers

Must have Practices for Optimizing your WP Website

October 22, 2015
Leave a comment

You can optimize your WordPress or Non WordPress website through several ways. This article will cover some important and must have practices for optimizing your WordPress website.

First of all you have to check your website rank/load time/speed from the links given below, so that you can compare your website speed after implementing the practices:

Now you need to follow the following practices every time while developing website:

Enable G-zip Compression
How to Leverage Browser Cache
How to Optimize PNG Images
How to DeQueue unwanted script and styles
How to move WordPress Core scripts and style to footer
How to move custom scripts from head section to footer.

Enable G-zip Compression:

You can do this by modifying your WordPress website .htaccess file. See the screenshot below for how to access the .htaccess file:

Enter the code below at the end of your .htacces file:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</IfModule>

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

</IfModule>

Leverage your Browser Cache:

You can leverage your browser cache by modifying your website’s .htaccess file. Enter the code below at the end of your .htacces file:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

## EXPIRES CACHING ##

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType text/css "access 1 month"

ExpiresByType application/pdf "access 1 month"

ExpiresByType text/x-javascript "access 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 1 month"

</IfModule>

## EXPIRES CACHING ##

Here point to be noted is that default expires date is 1 month i.e. ExpiresDefault “access 1 month”.

Optimize PNG Images:

Large images on the website reduces website speed, so its better to use optimized images. You can optimize images by using PhotoShop or use exactly the same dimensions which are needed. For optimizing PNG images, you can use the website listed below from where you can optimize as many PNG images as you want to:

Tinypng.com
.

DeQueue unwanted Script and Styles:

If you are using a child theme or using so many plugins in your website, then you have to remove some unwanted scripts and styles. You can remove them by putting the following code in your functions.php file of the theme:

function pt_remove_scripts() {
    wp_dequeue_style( 'unwanted-style-handle' );
wp_deregister_style( 'unwanted-style-handler' );

    wp_dequeue_script( 'unwanted-script-handle' );
    wp_deregister_script( 'unwanted-script-handler' );

}
add_action( 'wp_enqueue_scripts', 'pt_remove_scripts', 100);

function pt_remove_scripts() {

wp_dequeue_style( 'unwanted-style-handle' );

wp_deregister_style( 'unwanted-style-handler' );

wp_dequeue_script( 'unwanted-script-handle' );

wp_deregister_script( 'unwanted-script-handler' );

}

add_action( 'wp_enqueue_scripts', 'pt_remove_scripts', 100);

Here point to be noted is that you must know how to handle the script or style which you want to remove. For your convenience, see the screenshot below for how to access your theme’s functions.php file:

Move WordPress Core scripts and style to footer:

WordPress by default add some scripts and style in the Head section of your website. For example jQuery, so you can move these scripts and styles from the head section to footer section. For this, put the following code in your theme’s functions.php file:

function pt_footer_enqueue_scripts() {
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
}
add_action('wp_enqueue_scripts', 'pt_footer_enqueue_scripts');

function pt_footer_enqueue_scripts() {

remove_action('wp_head', 'wp_print_scripts');

remove_action('wp_head', 'wp_print_head_scripts', 9);

remove_action('wp_head', 'wp_enqueue_scripts', 1);

}

add_action('wp_enqueue_scripts', 'pt_footer_enqueue_scripts');

Move Custom Scripts from Header to Footer:

Sometimes your website contain many custom scripts and styles that causes render blocking while loading the page. Reason being those scripts and styles are included in the Head section of the website. If you move those scripts and styles to the footer, then you will not see the render blocking error again.

Point to be noted is that by moving these custom scripts and styles to the footer may cause your website messed up. You need to move only those scripts and styles that will not effect your website layout and front-end functionality.

Use the following code in your theme’s functions.php file:

add_action('wp_print_styles', function() {
  if ( ! doing_action( 'wp_head' ) ) { // ensure we are on head
    return;
  }
  global $wp_scripts, $wp_styles;
  $queued_styles  = $wp_styles->queue;
  $queued_styles_header = array();
  $queued_styles_footer = array();
  foreach ($queued_styles as $key => $value) {
        if($value != "custom-style-handle"){
            $queued_styles_footer[] = $value;
        }
        else{
            $queued_styles_header[] = $value;
        }
  }
  $wp_styles->queue  = $queued_styles_header;
  $wp_styles->to_do  = $queued_styles_header;
  $queued_scripts = '';
  add_action( 'wp_footer', function() use( $queued_styles_footer, $queued_styles ) {
    global $wp_scripts, $wp_styles;
    $wp_styles->queue  = $queued_styles_footer;
    $wp_styles->to_do  = $queued_styles_footer;
  }, 0 );
}, 0);

add_action('wp_print_styles', function() {

if ( ! doing_action( 'wp_head' ) ) { // ensure we are on head

return;

}

global $wp_scripts, $wp_styles;

$queued_styles = $wp_styles->queue;

$queued_styles_header = array();

$queued_styles_footer = array();

foreach ($queued_styles as $key => $value) {

if($value != "custom-style-handle"){

$queued_styles_footer[] = $value;

}

else{

$queued_styles_header[] = $value;

}

$wp_styles->queue = $queued_styles_header;

$wp_styles->to_do = $queued_styles_header;

$queued_scripts = '';

add_action( 'wp_footer', function() use( $queued_styles_footer, $queued_styles ) {

global $wp_scripts, $wp_styles;

$wp_styles->queue = $queued_styles_footer;

$wp_styles->to_do = $queued_styles_footer;

}, 0 );

}, 0);

In the code, $queued_styles_header will contain those scripts and styles which you don’t want to move and $queued_styles_footer will contain those scripts and styles which you want to move to the footer section. Also note that the custom-style-handle is in the $queued_styles_header array, so it will not move to the footer.

By following these above mentioned practices in your WordPress website, you can achieve excellent page speed/load time/rank.