47% of your website visitors expect your website to load within 2 seconds. 40% of your visitors will leave your website if it doesn't load within 3 seconds. 52% of visitors say that website speed is important to staying loyal to a webshop and a 1 second delay on your site results in a 7% drop in conversion. Not entirely unimportant insights and the pays off so to make and keep your website fast.
There are many ways to make your website faster. Below is a selection of options that we think are worth implementing.
Number 1: load your fonts smartly
If you use web fonts, it may take a while for them to load. Until the font is loaded, the user's screen is white. To show the user something in advance, you can load a fallback font. Suppose your web font is Roboto and you set Arial as a fallback. Arial can be opened for any web browser, so until Roboto has been loaded, all texts are already displayed in Arial. This way, the user can immediately start reading your website and take the so-called perceived performance to. The loading time as a whole does not decrease by this tip, but the site does 'feel' faster to the user.
Number 2: use placeholders
Another thing you can do to improve the perceived speed is to use placeholders. When you place a video on your website, it may take a while before it becomes visible to the user. To improve the perceived performance, you can place an image at the location of the video that will be visible until the video has been loaded. This way the user can already see something and the website will feel faster. Facebook uses something similar. The skeleton of the post is already placed at the location where posts appear. This gives the visitor the idea that something is happening and that the post is almost loading.
Number 3: Use source set (srcset) for images
One of the most important elements in your site that takes the speed out of it are images. Often images are uploaded much too large and used in the website. The speed then decreases rapidly. To prevent this you can work with different formats of an image. In WordPress sites allows you to specify how many sizes of an image should be created when you upload it. With source set you then let the browser calculate which image is most suitable to show to the user.
Suppose you have an image of 1200 x 600 pixels. In your WordPress site, ensure that a size of 600 x 300 pixels is created when uploading. There are now 2 variants of the image, the large (1200 x 600) and the small (600 x 300). If you want to show an image and you use the HTML attribute “srcset” then the browser decides which image is most suitable to display. When you show a picture in a of only 700 pixels wide, the browser will choose the smaller version of the image. The smaller one loads faster which gives a better user experience!
Number 4: minify CSS and HTML
Loading HTML and CSS also takes time. To make this happen as quickly as possible, you can minify it. You then actually put all the characters of your HTML and CSS one after the other, without indents, returns and spaces. Enters, spaces and indents make HTML and CSS easier to read, but are not necessary for a browser to run the code. Minifying allows the browser to go through the code faster, which in turn saves time.
Number 5: upgrade to PHP7
In a lot hosting clubs this has already been arranged, but we still regularly encounter servers that run an outdated PHP version. With an upgrade to PHP7 you ensure that your WordPress website will become faster, especially if you are not using a caching plugin. Keep not only your PHP version up to date, but also the WordPress installation itself. This is not only safe, but you will also benefit from other improvements that you keep website fast.