Loïc Magnien Street Photography How to make your website faster? 4

How to make your website faster?

There is nothing complicated in setting your own website from scratch. However it can become super overwhelming and not really straight forward as very few web developers have interest in posting proper content on the topic. I will walk you through the things I learnt along the way in terms of setting up a website which loads fast and it’s easy to populate, maintain and share.

Web Hosting Service

this is the company that’s going to host your files (yep, a website is just a bunch of files) and provide you with a domain name like yourname.com. I need to say it straight away, the web hosting provider won’t affect much the loading speed of your website and it’s the trap everyone falls into when looking for “fast website” on google. You will find sponsored content and biased reviews promoting the wonders of some hosting service.

I considered web hosts that were well-established and had a good reputation based on (1) friends opinion and (2) verified online reviews. I ended up using OVH which I believe has its pros and cons. It costs me around £50/Year and is on the cheap side. After 3 years of use I find it hard to have a proper service in terms of help, the hotline/help service is just like the parcel force one when it comes to postal delivery: inexistant. The interface is not very intuitive and subject to massive changes every too often so that the tutorial found on their own website are already outdated. On the pros side, if you have some basic skills in DNS/FTP/MySQL you will adapt quickly to their interface, otherwise you may find it overwhelming and get lost.

Own Code or WordPress? 

When you start with you website you got the choice between going full custom and code it yourself like a ninja or use open source tools like wordpress with their limitations (templates, fonts, etc). That’s up to you, I mix both. I have a gallery setup with my own code and a blog setup using wordpress. Then I linked the blog to my website and vise-versa so both entities are independent, My website is my static portfolio and then there is the dynamic blog and Instagram feed. I managed to set it up this way thanks to Catherine Stolarski‘s experience on the matter.

Code like a Ninja

If you want a totally custom website you will probably need to code it yourself. I personally did it using a text editor and looking at the code of non-wordpress website I liked. You will need to know about HTML/CSS/JavaScript to survive and obtain something nice. You can easily find tutorials on W3Schools and solutions to your problems on StackOverFlow.

The golden rule for speed is: less is more. The less code, the faster. The less images, videos, embeds, the faster. There is no magic, sorry. If you are coding your own HTML/CSS/JavaScript, then take some time and go to this last chapter of your book named “optimisation”. Just do it. Want a book recommendation? Take a free, open-source one. There is your library. Otherwise a friend of mine gave me “Zéro prise de tête” by Steve Krug which was helpful for the conception and Leaning Web Design for some more.

  

Faster WordPress

If you are using wordpress, Go for a simple template, I personally use Fukasawa minimal masonry blog theme for photographers and collectors. Fukasawa is developed by Anders Norén.

Then, uber-important, write this on your wall: “Do I really need this plugin?”. Every plugin you are going to install is going to be a bit of code on your pages. The more code, the slower. I recommend to get yourself a survival kit and avoid to have multiple plugins for galleries, media toolbox, social network, etc. Chose one and keep it. There is my list of plugins:

Plugin Description
Foo Gallery Foo Gallery is the most intuitive and extensible gallery management tool ever created for WordPress

By FooPlugins

FooBox Image Lightbox The best responsive lightbox for WordPress.

By FooPlugins

Instagram Feed

Display beautifully clean, customisable, and responsive Instagram feeds

By Smash Balloon

Re-add text underline and justify

This very simple plugin re-adds the Editor text underline, text justify and rearrange buttons as they were before WordPress 4.7.

By Brice Capobianco

Social Media and Share Icons (Ultimate Social Media)

Easy to use and 100% FREE social media plugin which adds social media icons to your website with tons of customisation features!.

By UltimatelySocial

 

Big beautiful sharp images

There we go, that’s the most important step in my opinion. You need to know a little bit about output resolution and web content formats. just google it and you will find plethora of tutorials which will confuse you, there is the solution: JPEG @ 72 PPI.

most software for image edition and export have very complex features as they are primarily designed to print in the best condition your work. However when it comes to web export, just use JPEG as a format, resolution set at 72 PPI and limit your size to 500Ko. There is my Lightroom preset for export:


There you go, you got all your information. Now just do it.