Page speed optimization

Essential basics for building a website
Image portraying an hourglass as a symbol for page speed optimization

Slow loading website hurts UX and SEO

Optimizing your website for fast loading is not easy. Images, films, real-time updates and animations can really bloat your website.
And you having a fast internet connection doesn’t mean everyone has one. Especially when doing business globally.
But it’s not even just about speed: it’scost as well.

Lower ranking in Google

As Google takes speed into account when ranking your website, your slow loading website will cost you too!

Optimize your website for fast loading

So here is what you can do.

Trim

Most importantly, of course, is to remove all that’s not necessary. Try to adopt a mobile-first approach when building the website. Trying to get your key features on that tiny screen will make you think twice about unnecessary stuff and improve your page loading speed.

Hosting

Get the most out of your hosting — for the price you’re willing to pay. Most hosting services can get you on faster servers and thereby speed up the loading time.

Minify, Compress and cache

Minify your CSS and javascript — remove all unnecessary characters from source code without changing its functionality.

Compress your content on the server, e.g. by using mod_deflate in your .htaccess file.
This will tell your server to compress the files, so they will be the smallest they can be.

Use and control cache to avoid server calls, e.g. by using mod_expires in your .htaccess file.
This will tell the browser of the visitor to save some of the files locally for later. So next time this person will visit your website, he will get those files instantly, without a call to your server.

See this boilerplate collection for even more awesome optimal settings for Apache and other server.

Combine files or use HTTP/2

Each call to the server is delaying other content being downloaded. So combine multiple files as much as possible:

But — when you use HTTP/2 — forget the previous sum-up as it will actually hurt your loading time, since HTTP/2 will load multiple files faster than a larger single file.

image portraying the fonts of this website (Noto Sans and Signika)

Font

Use the best available solution for showing your web fonts to minimize the FOIT (Flash of Invisible Text).
But do compare your proposed solution with the “normal” embed (e.g. link to stylesheet of Google). Google actually sniffs out the browser and will serve the best files without extra bloat (as opposed to serving woff, woff2 and ttf files from your own server). On this website it turned out that the normal embed was more efficient and brings the most minimal FOIT.

Images

Reduce your image size as much as possible:

And optionally you can ‘lazy load’ your images — after rendering the page. Lazy loaded images will be loaded when they enter the viewport of the browser. Take Pinterest for example.
Try one of these ‘lazy load images’ frameworks. But these frameworks are only useful when you use large images or a lot of them.
For example — since the javascript will take up some data as well, it would not be suited for this website, because my images are too small (in bytes) to gain any benefit.

CDN

Use a CDN to deliver your javascript, css and images faster to the browser. Check this awesome explanation on CSS-Tricks.

Wordpress

Choose a Wordpress theme that’s optimized for speed (and get some proof). A lot of themes are beyond bloated and will make your pages way too big and slow.

Test your speed

Always test your website for improvements and the effect of these improvements. Don’t forget to disable caching when testing (e.g. by opening developer tools in your browser and choosing not to cache). And use Google Pagespeed to get good insights.

Visual feedback

And when the optimizations are not enough, use a skeleton screen to let users know content is being loaded. A skeleton screen is an visual representation of the website that will be removed when the real content is loaded.
Nowadays all big players like Facebook and Google are using this at least on mobile.

>

Or when you have large images, show them progressively. For instance with Progressively. This will first load a tiny version of your image, which will look blurry, but will gracefully change to the real image when it is loaded.

What should be the next chapter?

Got an idea what the next step should be? Or maybe I missed one? Please let me know