A Guide to Speeding up Newspaper, a Theme by tagDiv

Newspaper is one of the the most popular themes out there, but out of the box it can be pretty slow. In this guide, I’ll take you through hosting, caching, optimisation on both the server and front end, and finally a few more advanced options. All of the included tips are free, and you won’t need to spend any money on extra plugins.

I’ll be assuming you have self hosted WordPress with the ability to access files via FTP.


Speed is important on WordPress, and this guide will take you through optimising the Newspaper theme. A few things first:

  1. Keep plugins low – the less plugins, the better. I make edits to functions.php instead of installing plugins, which keeps unused code to a minimum. Before starting, uninstall Jetpack. It’s a heavy plugin, and removing it will have a great positive impact on site speed. We will be replacing its CDN and lazy load features anyway with Cloudflare and Autoptimize.
  2. Compress images – this can have a huge impact. I use TinyJPG to compress images. You can use the plugin they offer for this, but as mentioned previously, I like to keep plugins low so do it manually.
  3. The less on the page, the better. I don’t use any of the snazzy page builders on this site as they add blocks, code, and make the site heavier.
  4. Adverts add time. Whilst Adsense (what I use) is decent in that ads usually load last, keep this in mind. Also, the less ads you have, the better for pagespeed and for your users.

Hopefully, this guide will help you get decent speeds on your Newspaper site. Below is the GTMetrix score that I get on this site.


Hosting

Hosting is one of the most speed impacting things when it comes to WordPress sites. Avoid Bluehost and other EIG companies – they are known for cramming their servers too full, and I was on them for three years and had a terrible experience.

I would suggest ICDSoft. I use ICDSoft for The Nerdy Student, and my experience has been great. Plus, they’ll migrate the site for you (I moved from Bluehost). They have affordable plans, and will help you out with any issues you encounter. Plus, their servers are fast. They also offer discounts for renewals.

Make sure that your hosting plan fits your usage. You don’t want to be on an incredibly cheap plan for a heavy site or a popular site. You want your CPU usage to sit comfortably and the server to be less stressed. This can have a great impact on performance.

Make sure your site is running on PHP 7, and preferably the latest version they offer of it. I saved around two to three seconds of load time by upgrading from PHP 5.6. Plus, the latest versions are more secure.


Caching

Caching has one of the largest impacts on speed, and is a must have for any site.

WP Super Cache

Caching is incredibly important on WordPress. You’ll want to use WP Super Cache for this. Personally, I prefer W3 Total Cache, however Newspaper do not support this unfortunately. However, with the right settings, WP Super Cache can perform well.

After enabling WP Super Cache, go into the settings and enable the cache.

Then move onto the Advanced tab. For Caching, click enable, and for the method, simple. Then, select the follow options below.

    For advanced options, enable the following.

    It’s important to tick the mobile support option. Most of my viewers are mobile, and therefore I need to make sure they are treated well too.

    For expiry time and garbage collection, I have set the timeout to 3600 seconds, on a timer of 600 seconds. This makes sure that if I make a change to a file, it is refreshed at some point.

    Leave all the other settings the same on the Advanced tab, but review the Accepted Filenames & Rejected URIs section to make sure that you don’t cache pages such as feeds.

    Contents is simply information about your cache, and in preload set the below settings.

    Click in plugins, and make sure you have the right options if you use any of the plugins. As I try not to use plugins, I don’t have any of these enabled.

    All done! WP Super Cache is now set up with the best settings. Let’s move onto Autoptimize now.

    Autoptimize

    We install Autoptimize to make sure files are minified (remove whitespace and comments), and load in quicker. Minified files are smaller, and will load in quicker.

    JavaScript options

    Firstly, in the JavaScript option, enable the below options.

    1. Optimize JavaScript Code will minify JavaScript.
    2. Aggregate JS-file will load in later to prevent them from blocking the page render.

    For advanced users, you can select aggregate inline JS. Make sure you exclude scripts that you don’t want optimized – I have adsbygoogle.js, ads.js, analytics.js, ace.edit, disqusConfig, tdBlocks disabled, to prevent cache oversize and enable all functions on the page. Once again, do not do this if you are unsure about JS (JavaScript), HTML and CSS.

    Clear your WP Super Cache, and make sure your site loads fine.

    CSS options

    1. Optimize CSS code – we want it optimized, so enable.
    2. Aggregate CSS-files means that CSS files will be compiled together. Better as it means files aren’t loaded individually.
    3. Also aggregate inline CSS will place CSS on the page into a file and link it. This means that less <style> tags are loaded. It is very important that you add _rand.td, _rand into the Exclude CSS options. Otherwise, your AO (Autoptimize) cache will blow up. This is because the _rand.td variable changes for each user. If you don’t really know what you are doing, or don’t have much experience, it’s best to leave this off. Everyone’s setup is different and therefore this may not work for everyone.

    Once again, clear your cache and test. If you experience the AO cache rapidly increasing, disable the Also aggregate inline CSS option.

    HTML options

    1. Optimize HTML code will mean that your HTML is minified.
    2. Keep HTML comments is optional. I keep them on the page as I often use them for development, but if you never look at your source, disable them as it will save a few bytes.

    Purge your cache, and test.

    Misc options

    These should all be enabled. If you have issues with AOs cache blowing up, disable the last option. It may be changing user variables that cause it to blow up.

    Images

    We want to enable lazy loading for images, so select the option for that. This will load images after images in the viewport are loaded, and will have a very large impact on your site speed.

    Extras

    1. Google Fonts have a big impact on site speed. Selecting the fourth option combines them using the Google API, and loads them later, stopping them from being render blocking.
    2. Remove emojis – if you don’t use them, get rid of them, as they can slow your site down quite a bit.
    3. Remove query string – this can also mean that the .htaccess edits we make later will have more of an impact.

    Make sure you clear your cache, and test your pages on mobile and desktop. The options above should work fine, but just do it in order to make sure. Now, let’s move onto Cloudflare.


    Cloudflare

    Cloudflare is an amazing tool that will really help your site speed. Make an account, add your site, and transfer your DNS over. Cloudflare guides you through this pretty well. Make sure you change your nameservers on your DNS, and it will take 48 hours for the change to propagate.

    It has a large impact on site speed as it can serve assets for your site, as well as save you bandwidth and server pressure. Plus, it has some awesome security features too. Check out this post if you want to read more about other features in Cloudflare apart from speed.

    Now, lets enable some options. Click onto speed at the top of your Cloudflare dash, and then onto optimisation.

    Despite having used AO to minify, Cloudflare can also do it. I leave both enabled.

    1. Make sure Brotelli compression is enabled. This is a more efficient method of Gzip, so will serve your content quicker.
    2. Don’t enable Rocket Loader. This causes oddness with the search on desktop, and on mobile.

    That’s it. Cloudflare will really help your server response time, and is a must have for any site.

    If you don’t use a CDN, Cloudflare will cache and serve your images, greatly decreasing speed and bandwidth usage.


    Newspaper Theme Panel

    We want to keep the use of admin-ajax requests to a minimum. Newspaper uses this a lot in the page customiser, but if you don’t use it, or only use a few blocks, you should be okay. In addition to this, turn off the Ajax view count in the theme panel.

    If you have a content heavy site, such as a blog, enable AMP. This will really increase your views on mobile, as your site will load nearly instantly.


    Server side edits

    .htaccess

    For this, you’ll need to connect via FTP for your site. Look up on your host how to do this – it’s pretty easy; you’ll need to install an FTP client such as FileZilla to do this. Once you are connected, navigate to your public_html folder, or in some hosts, your vars or www folder. It will look like below:

    Open the file, and let’s get to editing it.

    # caching
    
      ExpiresActive On
    
      # Images
      ExpiresByType image/jpeg "access plus 1 year"
      ExpiresByType image/gif "access plus 1 year"
      ExpiresByType image/png "access plus 1 year"
      ExpiresByType image/webp "access plus 1 year"
      ExpiresByType image/svg+xml "access plus 1 year"
      ExpiresByType image/x-icon "access plus 1 year"
    
      # Video
      ExpiresByType video/mp4 "access plus 1 year"
      ExpiresByType video/mpeg "access plus 1 year"
    
      # CSS, JavaScript
      ExpiresByType text/css "access plus 1 month"
      ExpiresByType text/javascript "access plus 1 month"
      ExpiresByType application/javascript "access plus 1 month"
    
      # Others
      ExpiresByType application/pdf "access plus 1 month"
      ExpiresByType application/x-shockwave-flash "access plus 1 month"
    

    The above will enable Gzip compression. Whilst your site will mainly use Brotelli due to Cloudflare, its good to have this enabled as a backup. Make sure that you don’t mess up anything else in your .htaccess, and take a backup before you do this change. Upload it to the server, and make sure you don’t see an error 500.

    functions.php

    We’ll be making a lot of changes in this file, so it’s best you set up the Newspaper child theme. More information on that can be found here.

    First, disable the emojis that WordPress has. AO may have done some of this, but doing this is good to make sure.

    // remove emojis
    add_action( 'init', 'disable_wp_emojicons' );
    function disable_wp_emojicons() {
    	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' );
    }
    

    Newspaper also uses Font Awesome, but we can get rid of the clutter in Font Awesome by adding the following into your functions.php file.

    // load essential font awesome
    add_filter( 'fontawesome_essentials', 'fontawesome_essentials' );
    function fontawesome_essentials() {
    	return true;
    }
    

    WordPress tries to duplicate embed scripts with Newspaper, which supplies one, so we can get rid of that by adding the following.

    // remove wordpress embed script
    function stop_loading_wp_embed() {
    	if (!is_admin()) {
    		wp_deregister_script('wp-embed');
    	}
    }
    add_action('init', 'stop_loading_wp_embed');
    

    If you use Jetpack, we can add the following script to remove the Gravatar script that tries to resize Gravatar images for retina screens, and some of the CSS that is not needed.

    // remove jetpack css
    add_filter( 'jetpack_implode_frontend_css', '__return_false' );
    
    // remove jetpack scripts
    function dequeue_devicepx() {
        wp_dequeue_script( 'devicepx' );
    }
    add_action( 'wp_enqueue_scripts', 'dequeue_devicepx' );
    

    Finally, if you don’t use the multipurpose plugins modules, you can enable the following to remove the scripts loaded for it.

    // remove multi purpose style
    add_action( 'wp_enqueue_scripts', 'remove_multi_purpose', 20 );
    function remove_multi_purpose() {
    	wp_dequeue_style( 'td-plugin-multi-purpose' );
    }

    These functions.php edits will help speed up your site by removing the little things that delay loading.


    Final tips

    Now your Newspaper site will be significantly faster. For Google Analytics, I would highly recommend increasing the sample rate that site speed is reported. You can do this by adding {'site_speed_sample_rate': 100} to your gtag.js tracking.

    You’ll want to do this as this will serve you accurate, real world page load times from your users. Google Analytics also lets you filter by traffic time, so you can see your desktop or mobile load times, and lets you see how many users bounced from your page whilst it was still loading.

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    
    gtag('config', 'UA-XXXXXXXX-X', {'site_speed_sample_rate': 100});
    </script>
    

    This won’t affect site speed as Google is already tracking the users entry to the site.

    Easily view real world load times with a higher sample rate.

    The default sample rate is 1%, so having it higher will increase your stats accuracy as you sample all the users who visit your site.

    Every now and then, run WP-Optimize to clean up your databases, after taking a backup. I delete the plugin when I’m not using it in order to keep the amount of plugins low.

    If you use Disqus for comments (I use it as it means that there is less load on my databases), make sure to use the Disqus Conditional Load plugin. This will let you prevent the loading of count.js, which is render blocking, and will bring your load speed up by a significant amount.

    Make sure you are on the latest PHP version your host offers. This has a noticeable impact on site speed.


    Hopefully this guide helped you get your Newspaper site optimised, and loading a lot quicker. Remember to get a decent host, which will have one of the largest impacts on your site, and keep your site on the latest version of PHP.