Top rated WordPress cache plugins available to speed up your blog, but in this tutorial, you can easily speed up your WordPress website without cache plugin.
Page speed and responsive design are must-use tips to boost rankings in search engine result pages. Let's speed up and optimize your WordPress website right now with the following useful code snippets.
When you use Google page speed insights to perform your WordPress site page speed, you may get the " consider fixing: Leverage browser caching". Browser loads website logo, CSS, and other important files, if a visitor opens another page in your website, the browser automatically loads logo and css files instead of requesting a fresh file from the server. Add the following code to your .htaccess file to fix the leverage browser caching issue.
## 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 text/html "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 ##
Open the .htaccess file with Cpanel credentials and add the following code to enable Gzip compression in WordPress.
<ifModule
mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
WordPress generates query string based on the version number of static resources like CSS and JS files.To remove query string from static resources add the following code to your active theme's functions.php file.
function _remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
To include the Vary: Accept-Encoding header in the WordPress website, open your .htaccess file with Cpanel credentials or WordPress SEO by Yoast plugin and add the following code.
<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
Always use wp_enqueue_style() code to your WordPress child theme's functions.php file instead of @import URL('../twentyfifteen/style.css'); call of your WordPress child theme CSS file.Know more on how to avoid CSS import in WordPress.
// avoid @ CSS import WordPress
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
To load main content first then JavaScript files for better WordPress speed, add the following code to your theme's functions.php file. This is the best method to defer the parsing of JavaScript in WordPress.
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
If you like to use WordPress plugins for caching feature to speed up your blog, consider using WP super cache, W3 total cache, and the best cache premium plugin WP Rocket.
To Eliminate render-blocking JavaScript and CSS in above-the-fold content completely install and configure Async JS and CSS Plugin.