Home Newspaper documentation How to make the site faster

How to make the site faster

You can test your pagespeed here . Just add your site url and hit the analyze button.

NOTE: Remove unnecessary plugins and don’t use google ads (adsense) when testing (you can add them after that).

pagespeed

The demo uses the tagDiv speed booster plugin – basically that plugin will make the theme use the compressed javascript file from the theme (instead of the regular one) and it also moves all the stylesheets and javascripts (codes) to the bottom of the page. This may break compatibility with some wordpress plugins (the ones that we recommend when you install the theme are well tested and work perfectly).

The list of speed recommendations:

  • we recommend that you use W3 total cache with just the full page cache module enabled (NO JAVASCIPT MINIFIER !!!).
  • you can also use the APC full page cache if you have a lot of ram on your server

If you have a dedicated server / VPS:

  • make sure that you have APC installed or another ‘op cache’ for php. This will reduce your server response time.We have receive some reports that the accelerator has some problems in some specific configurations with our theme and Nginx.
  • make sure that you have compression enabled on your site for html/js/css but not for images
  • Leverage browser caching https://developers.google.com/speed/docs/insights/LeverageBrowserCaching google page speed requires that you set an expiring cache of 7 days or more

If you are on a shared hosting or a low power VPS, please update to a more powerful server for better speeds.

For any questions go here: http://forum.tagdiv.com/topic/theme-speed/#post-900. Radu will be answer to all the questions about site speed.

Before you make any changes to your site please backup the files on which you intend to apply the modifications. In this case we’re going to modify the .htaccess file so i advise that you save a copy of the file on your hard-drive before you start modifying it, if something goes wrong you can use it to return to the previous state.

1. Enabling Gzip compression

This will compress the html and css and will improve the page loading speed and reduces the bandwidth usage.

The setup is different from one server to another so you may have to look on your host instructions section to see how you can enable it on your site.

The theme demo server is set like this:

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

2. Set the Leverage Browser Caching

By setting this you’ll tell your visitors browsers to remember (caching)  some of your website resources that you don’t change so often (like the logo or the css/js libraries, posted images, etc.) and only refresh them after a defined period of time.

To set it you have to add something like this on your .htaccess file.

NOTE: the setup may differ based on what resources you want to include.

Setup from the theme demo server:

# BEGIN Expire headers
<ifModule mod_expires.c>
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 text/html "access plus 600 seconds"
#ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

3. Optimize images

Images are one of the largest resource on your pages and the larger they are the longer it will take to download slowing the page loading speed.

To reduce their size and increase the page loading speed image compression and optimization is required. There are plenty of guides our there on how you can optimize the images (using software like Photoshop or similar).

NOTE: An alternative would be to use a plugin that can do this for you like WP Smush.itdownload

4. Remove render blocking css/js – using the TagDiv Speed Boosterplugin (Advanced Users)

Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script the parser is also forced to wait for the resource to download.

You can use the tagDiv Speed Booster plugin to move the css and js at the bottom of the page avoiding the page render blocking.

1. First install and activate the plugin.

  • The plugin comes with the theme package downloaded from the Themeforest, you can find it inside the ../Newspaper-tf/plugins folder.

The plugin will move the theme and recommended plugins js and css at the page bottom.

NOTE: If you have other plugins installed you have to modify the Speed Booster plugin file so it will also move those files at end of the page. In the next section you will learn how to accomplish this

2. To get the list of registered css and js add the following code at the end of the functions.php file:

function td_inspect_scripts() {
global $wp_scripts, $wp_styles;
echo 'registered scripts<br>';
foreach ($wp_scripts->queue as $handle) {
echo $handle . ' | ' . $wp_scripts->registered[$handle]->src . '<br>';
}
echo 'registered styles<br>';
foreach ($wp_styles->queue as $handle) {
echo $handle . ' | ' . $wp_styles->registered[$handle]->src . '<br>';
}
}
add_action( 'wp_print_scripts', 'td_inspect_scripts' );

A list with the id for all the css and js will appear on your site (top of the page). Copy and paste the list from your site into a .txt file

Delete the code you added at the end of the functions.php file.

Test your page again HERE and identify the css and js that is blocking the page render process.

Look for the corresponding id for each line inside the .txt file you saved before.

The id is in front of the file location:

Edit the ../wordpress/wp-content/plugins/td-speed-booster/td-speed-booster.php file and target the css and js using the following code:

  • For JS files – $this->move_js_to_footer(‘FILE-ID’);
  • For CSS files – $this->move_style_to_footer(‘FILE-ID’);
$this->move_js_to_footer('FILE-ID');
$this->move_style_to_footer('FILE-ID');

4.3 Run the pagespeed test again and fix the remaining issues (if there are any).

5. Use a cache plugin (W3 Total Cache)

Download, install and activate the W3 Total Cache plugin from here

NOTE: Enable only the page cache.