Get almost 100% PageSpeed on Newspaper theme

47
Get almost 100% PageSpeed on Newspaper theme

The newspaper theme is a most popular premium theme for self-hosted WordPress blog. The theme is developed by team tagDiv. You can buy this theme from ThemeForest. The theme comes with great features. The theme package contains some premium plugins which are listed below –

  • Mobile theme plugin
  • TD Composer plugin
  • Js Composer plugin
  • Social Counter plugin
  • Speed Booster plugin
  • Revolution Slider plugin

Theme developers have provided great support forum and tutorials for step by step setup. They have also provided PageSpeed guide to speed up your blog. You can buy Newspaper theme here.

Here, I am going to share some simple ideas which I have learned while optimizing my own blogs.

I am considering you have self-hosted WordPress blog with Newspaper theme active.

Install WP Super Cache

WP Super Cache plugin is a recommended cache plugin by tagDiv. It serves static contents to the visitor which improve page load speed.

Setup CloudFlare

CloudFlare is a free CDN which cache all the resources from your website and serve them to the users from their servers which are located across the globe. This reduces the load time of your website.

Options you have to enable on CloudFlare’s dashboard.

In your CloudFlare’s dashboard go to speed option. In the Auto minify check for-

  • JavaScript
  • CSS
  • HTML

minify_cloudflare

Scroll down, under the Rocket Loader settings, check Automatic this will improve load time for pages that include JavaScript.

enable-rocket-loader

Browser Caching – Add Expire Headers to WordPress

We are almost done here, now will go with sensitive part of this tutorial. You have to modify the code in .htaccess the file. If anything goes wrong while editing,.htaccess your site may show a blank page or Error 500.

You have to add below code to your .htaccess file. Just copy and paste the following code-

NOTE: If you have Optimize Website module enabled. It is located in your cPanel under Software. Then just remove the following code from a .htaccess file. It is highlighted with red color in above code.

<IfModule mod_deflate.c>
<filesMatch "\.(js|css|woff|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>

Fix The admin-ajax.php Slow Problem

As discussed with the tagDiv team it confirmed that theme uses admin-ajax.php almost for every block to request the Server and many of the features theme uses this way to query the server and may increase WordPress server load time.

So, to reduce admin-ajax requests trim down the block ajax options meaning the blocks pagination and ajax filters. Turn off the Ajax view count. Also, make sure you do not use too many different types of blocks. It’s better to check my guide to reduce admin-ajax server load in WordPress.

Install Lazy Load

You can reduce numbers of REQUESTS by installing Lazy Load plugin. Though theme has it’s inbuilt lazy load feature. Basically, it does not Lazy load images on your website, it just adds animation to your images.

Note: Don’t forget to disable theme’s inbuilt Lazy Load animation from Newspaper theme panel.

Install tagDiv Speed Booster plugin

tagDiv speed booster plugin comes with Newspaper theme bundle. It compresses all the Stylesheets and JavaScripts and moves them to the bottom of the page. This will Eliminate render-blocking JavaScript and CSS.

Removing Font Awesome

To use icons in the theme, you have to use Font Awesome plugin. There are LOT of icons, and if you’re not using them, then there’s no point in loading all of them.

You need some of these icons for various elements throughout the theme. So you can add a little filter to script so that it only loads essentials.

To do so, put the following code in your theme’s functions.php file.

add_filter( 'infophilic_fontawesome_essentials', 'infophilic_fontawesome_essentials' );
function infophilic_fontawesome_essentials()
{
 return true;
}

Removing Emojis

If you not using Emojis on your site then there’s no need to load them in the back-end. So you can remove it by adding following code in theme’s functions.php 

add_action( 'init', 'infophilic_disable_wp_emojicons' );
function infophilic_disable_wp_emojicons() 
{
 // all actions related to emojis
 remove_action( 'admin_print_styles', 'print_emoji_styles' );
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
 remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
 remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
}

Removing other scripts

Newspaper theme comes with inbuilt embed script so there’s no need to use embed script by the core WordPress. It’s it better to deregister by adding following code to the end of your theme’s functions.php file. This will also reduce HTTP requests to the server.

// Remove WP embed script
function infophilic_stop_loading_wp_embed() {
if (!is_admin()) {
wp_deregister_script('wp-embed');
}
}
add_action('init', 'infophilic_stop_loading_wp_embed');

Remove Scripts by Jetpack

Jetpack is one of the best plugins to enhance functionality and the security of your WordPress site. Jetpack’s single sign-on (SSO) feature is the best option to deal with the brute force attacks. Use my guide to enable single sign-on for your WordPress site. But the scripts and the CSS that been loading by Jetpack are not necessary for this. So it’s better to remove them. Add following code to your theme’s functions.php to remove scripts by Jetpack plugin.

//Remove Jetpack css
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

//Remove Jetpack script 
function jeherve_dequeue_devicepx() {
wp_dequeue_script( 'devicepx' );
}
add_action( 'wp_enqueue_scripts', 'jeherve_dequeue_devicepx' );

Conclusion

That’s it, you are done with the optimization now check your website’s performance score at GTMetrix.com. I am sure you are much satisfied with the speed. If you stuck somewhere feel free to drop a comment below.

Hey, wait!!
Don’t forget to share this tutorial on your social networks.  Thanks for reading 🙂

  • Hi Amit, I followed all your steps but still have “elements that must be corrected:” do not know where and how to add these images and files so they are cached at least 31 days for example:
    http://sumome.com/api/load/ (not specified expiration time)
    https://shield.sitelock.com/shield/trebol-apuestas.com (not specified expiration time)
    ….

    Here you can see my pagespeed
    https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.trebol-apuestas.com%2F&tab=mobile

    You can help me a little more

    • Hello Trebol,

      Note that you can’t add expires header for the 3rd party contents.
      On checking, I didn’t find CloudFlare enabled on your site.
      You can refer this tutorial https://goo.gl/dQrNql to setup CloudFlare

  • Hi Amit,

    Which Lazy Load plugin do you recommend?

    • Hey Jerrad,
      I have tested Lazy Load [https://wordpress.org/plugins/lazy-load/] with Newspaper theme and it works really well.

  • Yes, It works fine with Newsmag theme.
    Reply here if you need further help.

  • Thanks Amit for the Tutorial. The object-cache.php returned error and turn my site off. I have set others as stated but the search function seems not working anymore on desktop version. You can check the demo by clicking on my name. What next???

    • Hello Hadharm,

      to fix the object cache error Make sure, you have XCache module enabled for your server.

  • Guide2Free

    I am using cloudflare and wp rocket for caching and getting like a 98/100 but the search, more from author, infinite load wont work unless cloudflare rocketscript it off which then takes my page load time way up. I downloaded wp super cache and tried your way and I get an F score on gtmetrix. Any idea why?

    • Hello,

      Upon checking your website, I can see you are using WP Rocket cache plugin.
      Kindly purge all WordPress, CDN cache including browser cookies and test your site using GTmetrix.

      • Guide2Free

        I did but that doesn’t stop the issues with search, more from author, infinite load not working. They only start working when I disable rocketscript on cloudflare. Doesn’t matter which cache plugin I use.

      • Remove Minify option for the JavaScript from CloudFlare

      • Guide2Free

        Thanks for the help but that didn’t work either…blahhhh I cleared all caches and everything. I dunno how your doing it!

      • Disable minification for the JavaScript from both CloudFlare and WP Rocket

  • Yes, It works fine with Newsmag theme.
    Reply here if you need further help.

  • Hello, thank you for these tips! I’m still at 59% so will keep exploring how to fix that.

    • Hello @culturedblackpearl:disqus

      You must add expire headers to WordPress to improve browser caching. Make sure you set minimum 8 days time period.

  • Mayapur Voice

    Hello Amit, I came here from Newpaper forum. Really appreciate your input. Our site mayapurvoice was shown green (score around 85) in Google page speed insight but after upgrading either some plugin/s or the theme itself the speed score plummeted to below 60 (couldn't ascertain the culprit although I tried disabling plugins and stuff.. will try downgrading the theme if nothing works).

    I went through your suggestions and they all make sense to me but I have a question before I install Could flare. Do you know if this plugin doesn't bring a desired result and if I disable and delete it, will it undo the changes it may have done to my theme and other settings? I ask this because one security plugin screwed up my .htaccess file and although I deleted the plugin, it didn't put back my original .htaccess file. Not only that, the plugin didn't even create (or at least I couldn't find) a back up of that file and I had to re-enter some entries manually. Perhaps that also has affected my page speed but I am not sure. On top of that, I spent days before finding it to be the reason for my cron job issues. Anyway that's a side point.

    The number of posts and images on our homepage should not be a real issue as more or less the same were there when it was in green.

    Your input will be useful. Thanks again for the post on Newspaper forum and here.

    • Hello Mayapur,

      I have inspected your site, It's loading fine on my end. All you need to optimize images on your website. It will surely add some positive points to Google page speed score.

      Now coming to the CloudFlare query, it will not damage your site. All you need to follow this tutorial https://goo.gl/1qCXdP

      Installing CloudFlare plugin doesn't change any existing file (.htaccess) on your server.

  • Hello

    Newspaper 7 recommends disabling Rocket Loader for the incompatibility it causes. What you did to fix this, for example the search button gets error and several other things.

    • Hello Pedro,

      No magic!!
      All you need to minify scripts correctly.

  • How I do this?

    • Don't over minify the scripts, use CloudFlare alone for the minification. And purge all the cache. If you face image loading issue on successful activation of Rocket loader, reactivating Image load animation (Lazy load) from the theme control panel.

  • Toni Kusi

    This is very helpful, I applied all and my site https://goo.gl/dIZdp4 speed is running very fast now..Thank @Amit

    • Hi @anthonykusiababio:disqus

      I am glad I’ve been able to help.

      I have updated the tutorial to fix Admin ajax issue.

  • Syams

    It is work for newsmag?

  • Very super article and it was very helpful for increasing the frontpage. However, almost all of the tests-increase your site speed tutorials are based on the frontpage and it’s about the article because they have to rank. Upon I speed test an individual post the results turned into red. Al lot of scripts are in the header.

  • ChrisVelev

    Hi, Amit,
    Great article. I went through all your suggestions but the strange thing is that when I complete most of the steps the Pages Speed according to Google is 70+, but the site is loading slower. If I disable WP Super Cache and stop using Gzip compression via the .htaccess, the site score is really low (30), but it seems to load faster. Any ideas why this happens? The site is blog.hotel-extreme.bg

    • @ChrisVelev:disqus

      Thank you for the appreciation.
      I have checked your site and found you are not using CloudFlare.
      Only enable Gzip with a single setup. I recommend you to install WP Super Cache plugin without adding Gzip code on .htaccess and remove other expiry header code from it.
      Note:
      1. Cache plugin takes some time to build all the cache.
      2. You can use my tutorial for WP Super Cache settings here: https://www.infophilic.com/install-setup-wp-super-cache/

      • ChrisVelev

        Thanks,
        I also installed WP Super cache with the settings you recommend and the site is loading slower, but the score on Page speed insights is better? Not sure why this is happening? Any idea how long it takes to build up all the cache?

      • As I can see, you using custom headers for your blog. Are you using any cache service from the hosting end?

      • ChrisVelev

        I think not. Also when I clean the htaccess and leave it default the site speed does not improve at all.

      • You have added some code (added by W3 Total cache plugin) on root htaccess for the main domain that adding header to your blog as well.

  • Come on Speed Booster is a TOTAL JOKE! There are NO compatabilities. I removed 7 plugins and it just kept saying disabled, yet another thing isn’t compatable.

    • You have to add them to the exception in order to make Speed booster work. But I have removed this plugin because i am using it on cloudflare already. So why double minifying it and the less plugins you’re using the better it is.
      It’s or speed booster or Cloud flare, not speed booster and cloud flare.

  • Hello Amit!

    I have to say, this is exciting to see! My site seems to have some problems that I cannot seem to figure out. http://www.rootfantasysports.com – I did most of what you said, however, I couldn’t figure out what you meant by “disable object cache” and the ajax issue I do not understand and how to do. Furthermore, I am encountering an even bigger issue. My mobile site (apparently, just the Home (front) page ONLY loads code…how can this be?? How did this happen? Please help if you can!

    Thank you!

    • Hello Andrew,
      I have checked your site. There is no issue related to the admin-ajax.php file.
      To fix your mobile site issue, Go to Jetpack settings and disable mobile theme feature. That’s it.

      Have a great day.

  • Huy

    If I use the wprocket plugin
    So do I need to use this code?
    # BEGIN Expire headers

    ExpiresActive On
    ExpiresDefault “access plus 5 seconds”
    ExpiresByType image/x-icon “access plus 604800 seconds”
    ExpiresByType image/jpeg “access plus 604800 seconds”
    ExpiresByType image/png “access plus 604800 seconds”
    ExpiresByType image/gif “access plus 604800 seconds”
    ExpiresByType application/x-shockwave-flash “access plus 604800 seconds”
    ExpiresByType text/css “access plus 604800 seconds”
    ExpiresByType text/javascript “access plus 604800 seconds”
    ExpiresByType application/javascript “access plus 604800 seconds”
    ExpiresByType application/x-javascript “access plus 604800 seconds”
    ExpiresByType font/truetype “access plus 604800 seconds”
    ExpiresByType font/opentype “access plus 604800 seconds”
    ExpiresByType application/x-font-woff “access plus 604800 seconds”
    ExpiresByType image/svg+xml “access plus 604800 seconds”
    ExpiresByType application/vnd.ms-fontobject “access plus 604800 seconds”
    ExpiresByType text/html “access plus 600 seconds”
    ExpiresByType application/xhtml+xml “access plus 600 seconds”

    # END Expire headers

    SetOutputFilter DEFLATE

    • Hello Huy,

      You don’t need to add Expiry header code in htaccess. WP Rocket comes with it.

    • Hello Huy,

      You don’t need to add Expiry header code in htaccess. WP Rocket comes with it.

  • Miguel Patricio

    Hi,
    Thanks for this amazing tutorial! 🙂
    My blog (https://poupaeganha.pt/) runs on NGINX server, do you have any special instructions in this case?

    • Hi,
      The instructions in the guide are applicable for both NGINX and APACHE. As NGINX does not support .htaccess files you can skip Step for Browser Caching.

  • Thanks for this great tutorial, Amit! 😀

    One question — when updating the function.php file, do I copy-paste the filtering code into the file with the references to ‘infophilic’?
    Are those recognized by Newspaper theme… or am I missing something?!?

    Thanks!
    Ian

    • Hi @ianrenaud:disqus
      Yes, just copy paste code in theme’s functions.php, Newspaper theme will recognize them.
      I have checked your site and it’s loading fast with good score.

      Note: Seems you’re using Contact form 7, load it’s JavaScript and stylesheet only when it is necessary.

      • Thank you Amit, I will update the function.php file right away and let you know about the results!

      • Yea, for sure!