V tej objavi je opisana optimizacija, ki jo trenutno izvajamo na naši spletni strani. Objava je tokrat izjemoma v angleščini.

 

Without a doubt, I know we all feel annoyed when waiting for slow web page to load. It dissudes us from staying on it. Despite putting a lot of effort into it, you still may be one of many website owners that are struggling to decrease the speed at which their website is being rendered. Do not feel insecure about changing a bit of code and help yourself with the folowing guidelines to boost the speed of your site. Everything mentioned below is also used by us on our Mozilla Slovenia web page.

BETTER PAGE SPEED = BETTER RANKING

Page speed is gaining importance every day. Google and other search engines introduced it into their search-ranking algorithem, but it has not always been this way. You see, few years ago you could have just thrown in some unique key words, which in most cases were not even close to what the site was really about and  that is how the effect of higher ranked site was easly achieved. Well, this is not the case anymore. Nowadays, speed along with other factors means a reward from Google itself – higher rankig in search engine results. Let me get right to the point, it is a quite simple process and afterwards, the results will be more than noticeable.

TEST YOUR PAGE

The first thing you will probably want to know is how your website handles some tests and how responsive it actually is. For this very purpose, go to Google PageSpeed Insight or/and GTmetrix, to find out the score. Just type the URL of your site and wait for results to show up. The warnings you get on either site is what you want to improve the most. One can simply go step by step trying to eliminate the warnings by himself, though actions taken below will certainly remove most of them. Make sure you write down or simply take a screenshot of the results, because you will need this after all work is done, so that comparison can be made.

1. GZIP

First measure being taken is to enable Gzip. Gzip is a software application, made by Jean-Loup Gailly and Mark Adler and is used for file compression and decompression. When one comes on a website, what happens is that a web browser and a server, which is hosting that site, are continuously in interaction and files, like HTML and CSS, are being sent to the browser, so it can render the page for us. In order to make this as fast as possible, Gzip compresses such files up to 70% of their size, so the communication between them is quicker, enabling the site to load faster.

To enable Gzip on your very own server all you need to do is to paste a code snippet into your .htaccess file and then save it. To find the right snippet for your server, please visit this site.

2. IMAGE OPTIMIZATION

Having a fast web site is about keeping the size of it as low as possible. So it is not a secret that images on it play a huge role. Therefore we have to be aware of their size and resolution, before they are being put on the server. For instance, there is no point in having large sized pictures with very high resolution on your site, if its purpose is mainly to enrich the article. Think ahead before adding one and keep in mind that file size reduction must be carried out almost every time, since that is how the data flow between the web browser and a server is more optimal. In addition, use image optimazing plugin, like Yahoo’s WP smush.it, to achieve even greater results.  If you want to know more about image optimization in depth, please read this article.

3. LEVERAGE BROWSER CACHING

It is important to set up expire headers, also known as browser caching, for every file being used on your site, since this is a great way to reduce the number of requests being made by a browser and speed up loading time. Keep in mind that each file makes a separate request to the server. One can simply picture it like this: when you come on a webpage for the very first time, all its files must be firstly requested and then fetched to you via server. However, with expire headers being enabled, you get a permission to store them locally for limited time, so next time you come along, they are taken from your own computer, consequently there is no need for requests being made and files being sent all over again.

To enable browser caching on your server paste this code snippet taken from HTML5 boilerplate site into your .htaccess file. There is a little tweak being made by me, regarding javascript files, do not worry about this. Find the code here.

If you are still insecure about it, watch “how to video” or read more about it on this web site.

4. CSS IMAGE SPRITES

By now, you probably got the idea behind the interaction of a server and a browser. So what if I told you that instead of having every picture by itself, you can simply combine them into a single one and then just define the boundaries for each. It has been possible for quite some time with CSS Sprites. That means, that instead of requesting for every image itself, only one request is made for all of them at once, finally being cut out into separate images. That is without a doubt a huge improvement, allowing us to cut down HTTP requests and making the site to load faster.

If you are wondering how to introduce it into your site, there are many ways to acomplish this, probably the hardest way being the creation of such image with image editing software and CSS corections made by yourself and the easiest way using online CSS Sprite generator, like SpriteMe. Watch this tutorial, to see how to implement it on your WordPress site.

5. REMOVE BLOCKING JAVASCRIPT AND CSS FILES

It often happens that above mentioned files block the process of rendering the page. For instance, if javascript file loads before the webpage is completely rendered, that very process of site being loaded is halted due to waiting for such javascript file to load first. That means that we have to wait longer, even though in most cases they are not needed yet at that time. What we want is to firstly show up the page and then secondly add the dynamism, which is achieved by using javascript. To do so, slightly more complex coding must be done, so it is probably the easiest way to install plugin called Autoptimaze, then going into its settings and enabling HTML, CSS and JavaScript optimization.

6. COMPRESS CSS ADN JAVASCRIPT FILES

Last, but not least is compression of CSS and JavaScript files used either by your WordPress theme (Apperance -> Editor) or by plugins being used (Plugins -> Editor). Carefully check them up one by one and compress them with YUI Compressor. To do so, copy everything in each uncompressed file (they show up in Google Page Speed test) to this site and then replace the old code with the result you get online. It is recommended to save a copy of each file before you change it, due to your own safety, if something went wrong.

 

 

Difere from others, do not hesitate and put your own site close to the top of search results with this 6 easy steps. When everything is done do not forget to check out the results again to see the progress you just made by being determined enough to make some changes. Follow us on Twitter and Facebook for more information about the Mozilla community in Slovenia.