How to optimize WordPress site speed
This blog will tell you about the “How to optimize WordPress website speed without using any plugin”. You must need to check the below all details and use them on your site. Before using our code few things which is important to make changes on your site:
- You need to compress content(Images, Video, and Others).
- You need to set Lazy load to load page content.
Remove Un-used CSS/JS files
This is a great way to increase your site speed without using any plugins, You need to remove unused CSS/JS from the site as well as you need to check all pages/posts and remove CSS/JS files that are not used on the pages/posts.
For remove CSS, you need to use wp_dequeue_style(). For JS, you need to use wp_dequeue_sript(). and both functions have one parameter where you need to set ID.
For this, you can see the below example which shows you how you can remove CSS/JS from the pages/posts.
For e.g.:
function dequeue__unused_style(){
wp_dequeue_style( ‘wp-block-library’ );
// Or
wp_deregister_style( ‘wp-block-library’ );
}
add_action( ‘wp_enqueue_scripts’, ‘dequeue__unused_style’ );
Defer all CSS/JS
You need to set defer attribute which is to increase your site speed. It helps to boost your website speed. Defer specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.
You can use the below code on your site and check in the < link > and < script > tag and defer attribute is added and you can see that. After you will defer CSS and JS then your site content will be faster compared to before and it will optimize WordPress site speed.
function defer_parsing_of_js( $url ) {
if ( is_admin() ) return $url; //don’t break WP Admin
if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
if ( strpos( $url, ‘jquery.min.js’ ) ) return $url;
if ( strpos( $url, ‘wp-includes/js/dist/’ ) ) return $url;
if ( strpos( $url, ‘wp-includes/js/tinymce/’ ) ) return $url;
return str_replace( ‘ src’, ‘ defer src’, $url );
}
add_filter( ‘script_loader_tag’, ‘defer_parsing_of_js’, 10 );
function defer_parsing_of_css( $url ) {
if ( is_admin() ) return $url; //don’t break WP Admin
if( strpos( $url, ‘https://fonts.googleapis.com/’ ) ) return str_replace( “media=’all’”, ‘ media=”print” onload=”this.onload=null;this.removeAttribute(media);”‘, $url );
//if( strpos( $url, ‘frontend.min.css’ ) ) return str_replace( “rel=’stylesheet’”, “rel=’preload’”, $url );
return str_replace( ‘ href’, ‘ defer href’, $url );
}
add_filter( ‘style_loader_tag’, ‘defer_parsing_of_css’, 10 );
Litespeed cache CSS swap
If you have installed the lite speed cache plugin then you can use the below code which use to swap all font family which is faster to loading CSS on the page.
function google_fonts_ds_litespee_cache($content, $file_type, $urls) {
if ($file_type === ‘css’)
$content = str_replace(‘@font-face{‘,’@font-face{font-display:swap;’, $content);
return $content;
}
add_filter(‘litespeed_optm_cssjs’, ‘google_fonts_ds_litespee_cache’, 10, 3);
Google fonts CSS wap
You can use the below code which use to swap all google font family which is faster for loading CSS on the page.
function google_fonts_ds_inject_display_swap($html) {
$html = str_replace(“&display=swap”, “”, $html);
$html = str_replace(“googleapis.com/css?display=swap&family”, “googleapis.com/css?display=swap&family”, $html);
$html = preg_replace(“/(WebFontConfig[‘google’])(.+[\w])(.+};)/”, ‘$1$2&display=swap$3’, $html);
return $html;
}
function google_fonts_ds_capture_html() {
ob_start(“google_fonts_ds_inject_display_swap”);
}
add_action(‘init’, ‘google_fonts_ds_capture_html’, 1);
Disable embed
After you will disable embed-related things then your site content will be faster compared to before and it will optimize WordPress site speed.
function disable_embeds_init() {
// Remove the oembed/1.0/embed REST route.
add_filter( ‘rest_endpoints’, ‘disable_embeds_remove_embed_endpoint’ );
// Disable handling of internal embeds in oembed/1.0/proxy REST route.
add_filter( ‘oembed_response_data’, ‘disable_embeds_filter_oembed_response_data’ );
// Turn off oEmbed auto discovery.
add_filter( ’embed_oembed_discover’, ‘__return_false’ );
// Don’t filter oEmbed results.
remove_filter( ‘oembed_dataparse’, ‘wp_filter_oembed_result’, 10 );
// Remove oEmbed discovery links.
remove_action( ‘wp_head’, ‘wp_oembed_add_discovery_links’ );
remove_action( ‘wp_head’, ‘wp_oembed_add_host_js’ );
add_filter( ‘tiny_mce_plugins’, ‘disable_embeds_tiny_mce_plugin’ );
// Remove all embeds rewrite rules.
add_filter( ‘rewrite_rules_array’, ‘disable_embeds_rewrites’ );
// Remove filter of the oEmbed result before any HTTP requests are made.
remove_filter( ‘pre_oembed_result’, ‘wp_filter_pre_oembed_result’, 10 );
// Load block editor JavaScript.
add_action( ‘enqueue_block_editor_assets’, ‘disable_embeds_enqueue_block_editor_assets’ );
// Remove wp-embed dependency of wp-edit-post script handle.
add_action( ‘wp_default_scripts’, ‘disable_embeds_remove_script_dependencies’ );
}
add_action( ‘init’, ‘disable_embeds_init’, 9999 );
Remove the oEmbed Rest route
Using the below code will remove the un-used oEmbed endpoint and it helps to increase your website speed.
function disable_embeds_remove_embed_endpoint( $endpoints ) {
unset( $endpoints[‘/oembed/1.0/embed’] );
return $endpoints;
}
Disable handling of internal embeds in oEmbed Rest route
Using the below code will disable handling of internal embeds endpoint and it helps to increase your website speed.
function disable_embeds_filter_oembed_response_data( $data ) {
if ( defined( ‘REST_REQUEST’ ) && REST_REQUEST ) return false;
return $data;
}
Turn off oEmbed auto-discovery
Using the below code will turn off the oEmbed auto-discovery and it helps to increase your website speed.
add_filter( ’embed_oembed_discover’, ‘__return_false’ );
Remove oEmbed discovery links
Using the below code will remove oEmbed discovery links and it helps to increase your website speed.
remove_action( ‘wp_head’, ‘wp_oembed_add_discovery_links’ );
Remove action wp_head( )
Using the below code will remove the wp_head() action and it helps to increase your website speed.
remove_action( ‘wp_head’, ‘wp_oembed_add_host_js’ );
Disable embed tiny mce
Using the below code will disable oEmbed tiny mce and it helps to increase your website speed.
add_filter( ‘tiny_mce_plugins’, ‘disable_embeds_tiny_mce_plugin’ );
function disable_embeds_tiny_mce_plugin( $plugins ) {
return array_diff( $plugins, array( ‘wpembed’ ) );
}
Remove rewrite rules
Using the below code will remove the rewrite rules and it helps to increase your website speed.
add_filter( ‘rewrite_rules_array’, ‘disable_embeds_rewrites’ );
function disable_embeds_rewrites( $rules ) {
foreach ( $rules as $rule => $rewrite ) {
if ( false !== strpos( $rewrite, ’embed=true’ ) ) {
unset( $rules[ $rule ] );
}
}
return $rules;
}
Remove filter of the oEmbed before any HTTP request are made
Using the below code will remove the filter of the oEmbed before any HTTP requests are made and it helps to increase your website speed.
remove_filter( ‘pre_oembed_result’, ‘wp_filter_pre_oembed_result’, 10 );
load block editor JavaScript
Using the below code will block editor JavaScript to load on page and it helps to increase your website speed.
add_action( ‘enqueue_block_editor_assets’, ‘disable_embeds_enqueue_block_editor_assets’ );
function disable_embeds_enqueue_block_editor_assets() {
$asset_file = plugin_dir_path( _FILE_ ) . ‘build/index.asset.php’;
$asset = is_readable( $asset_file ) ? require $asset_file : [];
$asset[‘dependencies’] = isset( $asset[‘dependencies’] ) ? $asset[‘dependencies’] : [];
$asset[‘version’] = isset( $asset[‘version’] ) ? $asset[‘version’] : ”;
wp_enqueue_script(
disable-embeds’,
plugins_url( ‘build/index.js’, _FILE_ ),
$asset[‘dependencies’],
$asset[‘version’],
true
);
}
Remove wp-embed dependency of wp-edit-post script handle
Using the below code will remove the wp-embed dependency of the wp-edit-post script and it helps to increase your website speed.
function disable_embeds_remove_script_dependencies( $scripts ) {
if ( ! empty( $scripts->registered[‘wp-edit-post’] ) ) {
$scripts->registered[‘wp-edit-post’]->deps = array_diff(
$scripts->registered[‘wp-edit-post’]->deps,
array( ‘wp-embed’ )
);
}
}
