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.
Then open font Details and copy its link.
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.
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