The loading time is my favorite battle horse! What for?
- A site too slow is a source of frustration for
the visitor, especially on mobile.
- 40% of people
leave a site that takes more than 3 seconds to load.
- A too long
loading time can penalize your SEO: It is not a coincidence that Google gives a
lot of importance in amp format to offer even faster pages on mobile ...
- For a professional, the slightest second of
additional loading time may result in a 7% drop in conversions.
You have to optimize the speed of loading your site! But how
to measure it and how to improve it when you are not a web developer? I offer
you very concrete advice to apply right now.
How to test the speed of a site?
Gtmetrix. I advise you to create a free account as
this will allow you to choose the location from which to measure the speed of
your site. Indeed, even if the web is global and you can without problem
consult a site at the other end of the world, the distance affects the loading
time.
Once your account has been created, enter the address of
your blog (with HTTP or HTTPS, with/without www depending on the choice you
made :
Click the "Analyze" button to start the analysis.
You're going to get two scores: Pagespeed, the Google index; YSlow, the Yahoo
index. I advise you to pay special attention to Pagespeed:
- This is the Google
index so it is an element that serves as a yardstick
for Google to decide whether your site is performing or not in terms of loading
time.
- This is a more accessible index for bloggers
Yahoo's YSlow tends to make recommendations often far more technical and
obscure for a blogger (we talk about Alpha Image Loader filter, DOM elements .).
Do not stop at this note on 100 and also take a look at the
loading time indicated in seconds.
Rather, it is necessary to interpret note pagespeed as a
note of "Respect for good practice". A site can have a very good note
pagespeed and still put 10 seconds to load ... But what ultimately counts is
the impression your visitor will have.
This is what can happen to you
When I showed this kind of score to one of my new clients, I
might as well tell you that it aroused a horrified look and a question:
"But in true my page does not really put 9 seconds to load,
though?" Yes, and No.
The number shown is the full load time of the page.
In other words, every time you view a Web page, you will get
a whole bunch of items: the page text, the images it contains, all the files
that allow formatting (style sheets, writing fonts), all the files that bring
special features (scripts).
Some items are stored on your own site, others are located
on external sites (for example, you load a font from the Google site) ... All
this takes time, sometimes a little too much!
This does not mean that the page will remain white for 9
seconds but that it will take 9 seconds for all elements to load.
Ideally, you have to arrive at a loading time of less than 3
seconds.
The real question is "How do I do it?"
The importance of having a good Web hosting you'll have to
get your hands dirty to improve the speed of your site but all your efforts
will come to nothing if your host is not at the height.
If you regularly see your site to train while your PageSpeed
rating is good, there may be a problem at this level. Remember that you are not
married to your webhosting .
Optimizing images This corresponds to the "Optimize
images" and "serve scaled images" lines on GT Metrix.
Resize an image you first need to think about resizing your
image (that is, changing its length and width) before putting it online on your
blog. If you put online a photo that comes out of your camera and that makes
5000 pixels wide, maybe it will show up in small on your blog but the file will
always make the same size and therefore slow your page.
You can use Photoshop (Image menu > image size). If you
want a free tool and more ' lightweight ' to use on a daily basis, I recommend FastStone
Photo Resizer.
What width to use?
It all depends on your blog theme. You can make a screenshot
of your blog, open it with Photoshop or FastStone Photo Resizer and look at
what pixel width makes your text column, it will give you an idea of the
maximum width not to be exceeded. This is often less than 1000 pixels.
Control the weight of the picture is the minute diet of the
day . To make its images lose weight, it must first be remembered that there
are different image formats, some of which are more adapted to the web than
others: one usually uses JPEG for photos and PNG for visuals type infographics,
logos, etc.
When you save your image, beyond the choice of format,
consider deleting the EXIF/metadata information.
The recommended ideal weight is around 100 kb per image. It
is sometimes hard to reach when you post photos in large format and you want to
keep an acceptable quality but it's good to have that figure in mind to get as
close as possible.
Compress images :
you can finally
install on your blog a plugin that will compress the images online, I recommend
ShortPixel on WordPress, which is very powerful.
Do the sort in your plugins a plugin can slow down your blog
for two reasons: it is badly coded: there are 'good practices' in terms of web
development and if they are not met, the plugin can impact the speed of a web
page.
It's a mirror
ball: some plugins boast power almost all do for you except coffee ;)
Sometimes, they are so rich in features that you end up with a thousand options
you don't need, you can not turn off.
Do you really need all these features and more, or some
things are the "gadget"? Do you have two plugins that do the same
thing? This plugin is exclusively for your site or is it linked to another site
(for example, if you display an Instagram stream on your blog, the plugin will
be dependent on instagram to display photos, which will therefore require Additional
Loading time.
When a plugin adds features or change the formatting of your
blog, it corresponds to lines of code and files to load... and they can slow
down your pages. If you notice a problem of slowness, try to remove plugins
that are not essential.
Compress and minify files:
I said you, a web page load often a whole bunch of files.
The aim of the game is to make sure they take the least room possible!
Minifier its files when writing code, we often have a
presentation 'airy' to navigate more easily.
The problem is that all of these spaces weigh down the code.
Moreover, it often ends up having some items that appear in double: for
example, it was noted that the headline uses such police... and a little later,
we specify the subtitle uses it also this font. While one could say at the same
time "the title and subtitle use this font."
The two versions are generally preserved:
the "ventilated" version which is used to work
because it is more comfortable ... and the minified version (which will be
called for example URSTYLE.MIN.CSS) that one will load on its blog because it
is lighter.
We can also, more simply, set up a plugin like WP fastest
cache: it has several options dedicated to the upgrade. This should allow you
to improve your score on the lines "Minify html", "Minify
css" and "minify JavaScript" of GT Metrix without having to put
too much hands in the code.
Using gzip compression to improve loading time :
you can also use
compression: files that make up your Web pages are automatically compressed to
take up less space (and be sent faster to your visitors ' browser!). At the
time of the page's viewing, they are unzipped to be displayed.
Use the power of the cache when a visitor finds your site,
it must Access all the elements that make it up: logo, banner, stylesheet,
content, scripts...
With the cache, we put in memory elements when a page is
visited for the first time so that on the second visit, the user does not have
to load them again.
We can even "pre-load the cache' upstream (the
'Preload' option exists in the plugin WP Fastest Cache) so that any visitor,
even the first to visit a page already has a fast version.
There are several quality outside of WP Fastest Cache cache
plugins: WP Rocket is a reference, WP Super Cache is also considered
The (famous) Leverage browser caching :
you can add the following code at the end of the .htaccess
file at the root of your blog (accessed by using a client like FileZilla or
WinSCP FTP, using the connection information provided by your Web host).
It allows to store some files in a site (images, fonts, etc)
for a term so that repeat visitors reuse them during their next visits (instead
of load them every time).
Specify a cache validator "cache validator"
whereby GT is Metrix reference is a system that checks the existence of a
cached version of the page. In other words, when a visitor asks to visit a
page, before going to download all of the elements that make it up (which takes
some time to load), the validator check if there is already a cached version of
the page, which eliminates the need to reload all the items.
Optimizing your code is the part that requires the most
technical ease when you really want to go away in optimization ... but there
are already things you can do easily on WordPress.
Defer parsing of JavaScript :
so what does this mysterious phrase mean? Already,
JavaScript is a computer language that allows you to add features to a page:
for example, animating items on a page, making it more interactive (creating
pop-ups, etc).
In order for a browser to understand this language and
perform the expected action (for example, displaying a pop-up), the JavaScript
code lives different successive adventures:) It's very technical but to
simplify, it is analyzed and transformed, in several steps, to lead to a code
that the browser can interpret to display the result to your visitors.
Optimize the order of styles and scripts I told you, a web
page appealed to full of items and different files: styles, scripts, etc. You
don't have to load all of these in any order.
It's a bit like when you move: you don't put everything at
the bottom of the truck the bag that contains your key then stack the boxes and
furniture before ;)
With the code, same principle:
there is an order... and in this case,
when your blog appeals to style sheets, it must load them before loading the
JavaScript files.
Here, you really put your hands in the code... and the way
to proceed is specific to each site. The general idea is this: list all
styles/scripts that are loaded on your pages (looking at the code of the page).
Verify that an
element is not loaded twice: sometimes two plugins are using the same file...
and each plugin will load it, so it appears in double... If this is the case,
it must create a dedicated code (being added to the file functions.php for
example) using wp dequeue script (if it is a script) or dequeue wp style (if
it's a style). It removes the script or style from the list of files to load.
Set the order of
loading files:
CSS, and JavaScript files. To do this, we create there also
functions on WordPress, that appeal this time to wp enqueue script and wp
enqueue style.
Here, we are in the pure code and that allows to control
enough finely in what order to load all of your plugins and your theme files
Use a CDN:
the star on the tree, in short, the ultimate in the quest
for performance: the CDN. These three mysterious letters stand for
"Content Delivery Network". OK, you do not more clear.
I told you about at the beginning of the article, the
loading time of a site for a visitor varies according to the distance between
the visitor and the server where the site is stored
The goal of the CDN is to reduce these gaps. It is a system
that will create "copies" of your site on different servers, a little
around the world. Each time a visitor consults your site, it is the server
closest to him who will send him the data. Practical, right?
The most famous CDN is CloudFlare, there is a tutorial on
their site (in English) to use CloudFlare with WordPress. For my part, I have
not yet decided to use a CDN.
I hope in any case that this guide will be useful to you.
It's up to you to take a ride on GT Metrix ... So, verdict?
Did you like this article ? Then share it with your friends by clicking on the buttons below:
No comments: