Website optimization Part I

This first version is in english, désolé les frenchies mais vous allez voir que c’est facile à piger….

Why ?

The idea is not to be the best in class (although… that’s a good topic for after work drink) As you know when it’s fast you make the client happy and in other hand you make also Google happy.
The urban legend says it’s “very important to load fast for SEO purpose”, from my point of view, it’s a part of pure legend (i can show you good ranked photographer website with a bad loading time) Anyway, that’s not the topic here, i would say we do that for the user and also a bad response time a good symptom to put your site on diet.

When ?

Up to you, it’s never too late. It’s not a day to day job (like SEO daily survey). The task consists in several topics which can be done separately, there is not really a good order. You can proceed on the order you want, but if i were i would start with the photos.

To define the different tasks/topics and how to do it, is globally the subject of this page, Part I.

Worpress

I work with WP for my different websites, i am not skilled to speak about Wix or even Squarespace. Some parts are also relevant: the tools, the general notion about Images, loading time…

The Themes

For a lot of reasons i decided to use dedicated Themes for photographers. I started with Prophoto and since 2016 i moved to Flotheme for 3 websites around wedding and family topics, and finally for the last one, i changed and i choosed UNCODE for my french corporate site

I use PORTO II for:
This site
My Paris Photographer (couple and family)

I use LYRA for Mateoswedding

I use UNCODE for my corporate website

Then, i will give details about FLOTHEME setting.

The tools

Basically we will use 2 different tools:

a) GT Metrix, for the Part I mainly because it’s easy to read, the look and feel is easy for non specialist people (you can also use Webpagetest if you are a rebel or even Pingdom tools)

b) Lighthouse Audit, for the Part II, included in the Chrome dev tools, you can also use the Google dev tools also based upon Lighthouse algorythm, BUT, the results between the both can be different (please, don’t ask me why, i don’t know and nobody knows exactly why…)

Ready to start?

This image is completely out of topic, it’s just here to take a breath, grab a cup of coffee, a Doliprane, make a kiss to your partner or your red fish if you are alone… if you recognize the city you win my consideration.

The Starting point

First point is to make a measure to know what is your starting point and to check your improvement. Then create your account with GTMETRIX and define your user setting. I know there is only one city in Europe: London, the backbone between London and Paris or others cities is very fast, then it’s relevant to set London if you are in France…

i don’t advise to make a test with Lighthouse before to do the others task otherwise you will be scared.
Do a first run and keep the screen shot for late.

I don’t want to change my website, then i used figures from another one…

In a first step don’t really pay attention to the Performance scores, stay focused on Page details:
-165 requests is typical with FLOTHEME (or others functionnaly powerfull theme) this the cost for the easy and rich “look and feel” design
-14,8 MB is a symptom of non optimized picture size and page, then easy to reduce (a good new by the way) maybe also of a non functionnaly optimized home page with too many images
-7,5 sec is the consequence of the previous numbers, it’s too slow, tooooo looonnggg tooo loaaddddd. Even if for the 2nd run the page is in the user cache (you know the famous one in your browser, the risk is to loose your prospect at the first search…

First ideas for improvement

A) To reduce the weight of the Images,
Mainly i focus on individual weight, the number of images you use in your page is your choice (but be careful and keep in mind to check for a phone (remember 60 % of the user)

B) To improve “strictly” the response time
In a first and easy step, we will use a Cache plug in, which is the basic strategy to decrease response time and also, consequently, decrease number of requests using some tricky setting.
The end of B) is the first Part I

C) To reduce the number of requests by optimization
It comes from the complexity of your website, styling, coding, number of plug in and how the plug in are used. More plug in you have and more request you have: minimize the number of plug in as less as possible.
Always balance the function (from a user point of view) of a plug in and the cost for your performance.
This will be Part II and a step beyond in term of analysis

Do you know the Pareto curve (my favorite concept), then here we will do the 80 % of the target but using only 20 % of the time. It will be enough for your client/prospect and for our friend Google, we are photographers.

Then you goal could be to reach 2 sec as a global result, and less than 2 sec if you can…

The tasks

Here we list the different important tasks we will work on. I won’t go deep to explain “what it is”, i assume you know, otherwise dont forget Google is your friends and pleaseeeeee…. don’t ask for basic question you can find the answer by yourself (example dont ask what is “lazy loading“, you will find the answer in 5 sec over the web)

To decrease image weight

You can start here, it’s a good point. There is not a strict good value, it depends on your design, if you use 100% wide pic or if you limit in any case (like me). Just take in consideration 60 % of the people see your website from a phone (at least the first time or the second time)

How much: as light as possible…
The next 2 tricks are not so tricky, i am quite sure you know yet

Trick 1: design your file the exact size you will use, i use 900 pixel wide for the blog and image in general… i could use 1200, i decided for 900 !
from Photoshop compression at 9 is good, 7 is possible…
from Lightroom, compression at 7 is good
no strict rule, as i said it depends on your design, make a test first to be sure!

Trick 2: use a soft or plug in like Jpeg mini, Tiny Jpeg, Imagify and so on to reduce what is feasible, i use Jpeg mini since a few years yet…i am happy with it.

Trick 3: the real trick is this one transform your jpeg in WebP using a plug in (like WebP Express) you will see the weight decreasing a step beyond
The plug in manage the browser not able to use WebP format (Safari for example) and display Jpeg in that case.
you can save at least 30 % (minimum) against a jpeg
Webp Express allow to transform in bulk and explain also how to check it works well.

To implement Wep Express is not difficult…. keep in standard setting and just proceed to the 2 verifications:

Check you have at least one module allowing to transform the files:

Check your redirection rules:

The next upload will converted in WebP. For the existing files yet uploaded you can start a Bulk convert: you click on it and you let process..

Check Alter option:

TO USE A CACHE PLUG IN

You know that, that’s not a surprise. In a first step i speak about the cache at your website level, in a second step i will speak about the cache at the server level.

We can list several one:
–Total cache
–Super cache
–Wp rocket

You can check also the Flotheme advise for caching.

i have used the 2 first one for several years on different websites, 2 years ago i choosed to continue with WP Rocket, ok it’s not free, but if you consider you can pay for Adobe, i think you can give something for a every efficient software, helping to grab happy clients, isn’t it ? (for frenchies: moreover, WP ROCKET is a french team. The support is fast and efficient)

WP Rocket

I assume you did the installation and it’s activ.
starting from the beginning:

enable for mobile device a not for you as admin in order to see the you change immediately.

here a very important point: Minification and Combination for CSS or javascript. It’s depending on the theme BUT it’s possible it doesn’t work and it breaks your page. Don’t be scared if it’s the case, just remove the option and clear the cache using the menu at the top

Same with CSS delivery which allow to defer the CSS loading and to unblock the rendering, but it’s possible the result is not very good.

Then the trick: check only for minification and not for combination in a first step. You will come back at this step at the very end if you need to save more time

Don’t use this Add on because it introduces some issue in Analytics for a good tracking, at least for me, then i remove it. If you check it, please have a check into Analytics to be sure.

I don’t speak about Varnish, you can use it at the server level if you have a lot of users per day, otherwise keep if OFF

That’s it for the tricky part, remember you can do your own rules, just about the check of caching.

To check if WP Rocket works well, close your session. Open Chrome and press ALT + Right click. here comes a good opportunity to be more familiar with the Chrome Dev tools, we can use for plenty or purpose..

Use the TAB “Sources”, at the very end you should see a comment about Rocket.

At the end of your setting, i advise to:
-clear the cache
-preload the cache
-regenerate the critical path if you set Optimize CSS delivery to ON
use the menu in your Admin bar at the top of your screen
Go in a private Chrome window (to avoid the Chrome plug in) and check everything displays well

Stop and check with GTMetrix

It’s time to make a stop and to check the result with GT Metrix

As i said, don’t be focus on the score, it’s nice if you have A/A, but you can have B/B and a good response time and that’s ok.

You can see the number of request decreased drastically because now the pages are served not from the database through several requests but from the Static cache.

To go further, the first important TAB is Waterfall, you can click on the different items and to develop to check what is is, you can also check if you displayed the Webp version, only checking the weight of the image, you can see it…

END OF THE FIRST PART

We did the first part, let summarize:

-we reduce the size of the image
-we reduce the weight using good compression and the right software
-we use the magic Webp format
-we set the cache with the right setting (you can continue to play with it but be careful)

BE CAREFUL: i am quite sure you arrive here with caution and you obtain good result.
Advise 1: let your website to take a breath a few days
Advise 2: be careful, the typical behavior is to become confident and to start to take risk and to break something, remember “the best is the enemy of good”

The second part

This second part will be a second step in a different page including:

-to remove the non necessary files (CSS, JS, and everything around some such plug in) using a magical plug in (to use carefully)
-to check the result with Dev Google tool