How to speed up your WP website

How to speed up your WP website

20 Dec 2017 9 min read

Not a secret that website speed load means a lot. In a fast-moving world when all people have a lack of time. So much that there is a tendency to show how much time you need to read an article. And such impatience also applies to that seconds while your website is loading.

It’s time becoming shorter a year to year, from 12 seconds in 2000 to 5 seconds in 2017. Another sad fact – search engines also decided to punish slow loading websites by putting them down in search results. That’s why it’s important how Google perceives your site.

So while we care about proper user experience and SEO rankings of a website we have to take care of the time it loads. Just because there is simple outline – slow website cost you money.

And there are some things that can be easily implemented. Just to make sure that you did it all to prevent conversion leaking.

Of course, there are some essential steps should be done, like to choose a good host provider and a proper lightweight framework or theme.

But to dig deeper, first of all, you can try the speed test yourself, here. Maybe you actually don’t need further reading. But if you do.. you’ll see a bit of recommendation to improve the situation.

Let’s see what could be done to improve most common issues.

1. Install a free WordPress Caching Plugin

To solve a problem of Caching you should do 2 actions:

  • Install a Caching Plugin. We can recommend this one – Hyper Cache with default settings.And add a code into .htaccess, which render headers
  • ‘Expires by file type:
<ifModule mod_headers.c>
<FilesMatch "\.(js|css|txt)$">
Header set Cache-Control "max-age=31536000"
</FilesMatch>
<FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
Header set Cache-Control "max-age=31536000"
</FilesMatch>
</IfModule>
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 31536000 seconds"
ExpiresByType image/jpeg "access plus 31536000 seconds"
ExpiresByType image/png "access plus 31536000 seconds"
ExpiresByType image/gif "access plus 31536000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 31536000 seconds"
ExpiresByType text/css "access plus 2592000 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 43200 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

2. Compress Images

Turned out that it pretty easy to reduce the size of the images fast and without compromising on the quality. Service Tinypng completely coping with the functions assigned to it.

3. Use GZIP Compression

Compression will enable faster website loading for your users by reducing your code files. Other words, it just helps make files smaller. And there are some ways to do this. Like  Nginx, Apache, .htaccess and Litespeed web servers. To turn on a compression you need to go to web server configuration. In case you’ll need help with it, look here.

4. ↓JS to the end and CSS to the top↑

Now you need to place CSS on the top. Why should you do this? Because if not, your content will be unstylized because it’ll simply be loading prior CSS. So let the CSS go first. And of course, if CSS happened to be in the end, the browser will have to think longer to put all elements to its places.

To cope with it fast and easy you can install Autoptimize plugin. It will automatically put CSS to the top and will help to reduce all JavaScript, CSS files, and HTML itself.

JS tented to loads the last one because it protects from parallel loading. And exclude slowly loading when content is under the script. To ensure all content can progressively load we need to put the scripts at the end. It can be done by adding some code to functions.php:

function footer_enqueue_scripts(){ remove_action('wp_head','wp_print_scripts'); 
remove_action('wp_head','wp_print_head_scripts'); remove_action('wp_head','wp_enqueue_scripts'); 
add_action('wp_footer','wp_print_scripts');
add_action('wp_footer','wp_enqueue_scripts'); add_action('wp_footer','wp_print_head_scripts');
}
add_action('after_setup_theme','footer_enqueue_scripts');

It’s would be nice to move also all JQuery to the end. As usual, JQuery can be used anywhere in the document. To make it work properly, we propose to use the following bits of advice from Colin Gourlay.

Add this to the head:

<script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);
}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return 
a}else{p(f)}}})(window,document)</script>

And then this to the end:

<?php wp_footer(); ?>: <script>(function($,d){$.each(readyQ,function(i,f){$(f)});
$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script>

5. Don’t load fonts from side server

It considered that Fonts that load from fonts.googleapis.com make your site load slowly. To fix it just move it to your files. It’s pretty easy to do, see below.

Go to Google Fonts page and add a font you need.

google-fonts

Then open font Details and copy its link.

font-family-selected

Open it in a new tab and copy its essential code to your files.

Well, that is actually all we tended to share. Surely here was mentioned not everything that can be made. In a race for a high load speed score, you’ll surely find tonnes of other tips. But we tried to accent the key points that will definitely help, we hope so;) Anyway, you always welcome to ask if there are any questions.

ERP development final cta

Get a Custom Solution with Web Design Sun

At Web Design Sun, we specialize in building web applications for clients in every business and industry.  If you’re interested in custom applications for your business, contact us today.

Contact us today to get started

More From Blog

Mobile-First Design Principles

As web developers, we’ve been ready for the move to mobile-first design. Over the past years, we have shifted our design methodologies and development strategies to take the needs of mobile users into account.
20 May 2021 22 min read

How To Develop Widgets For Gutenberg Using ACF

Gutenberg is a new WordPress editor for posts and pages, built on the principles of builders, allows you to write custom page builder elements. Using the ACF plugin, you can very simply make a widget of any type. And here we'll show how.
1 May 2020 6 min read

Add Push Notifications To Laravel + Vue Project

There are many types of notifications. Here we will consider setting up push notifications in a SPA application written on the laravel + vue bundle.
21 Apr 2021 9 min read