WordPress Greek Community - FOSSCOM 2015 - Website optimisation - Takis Bouyouris

by WordPress Greek Community

Slide 1

Slide 1 text

FOSSCOM 2015 "Website Optimisation" Takis Bouyouris, Nevma

Slide 2

Slide 2 text

Thank you FOSSCOM WordPress Greek Community is proud to be here

Slide 3

Slide 3 text

Who am I? Takis Bouyouris Software Engineer Web Developer Co-founder @ Nevma WordPress Greek Community Hello World!

Slide 4

Slide 4 text

Basically, I build websites and web applications most of them based on WordPress

Slide 5

Slide 5 text

Not impressed? Okay, but building a "good" website is not always such a simple task!

Slide 6

Slide 6 text

A "good" website must: look good function well and be ...faaast

Slide 7

Slide 7 text

Why fast? Why not slow? I'll tell you why!

Slide 8

Slide 8 text

1. Fast is good, saves time, saves resources keeps users happy!

Slide 9

Slide 9 text

2. Fast means more conversions (whatever that means for you be it sales, pageviews, emails etc)

Slide 10

Slide 10 text

http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/

Slide 11

Slide 11 text

3. Google says so Speed is a SEO ranking factor because it is good for the users! Webmaster Central Blog: http://googlewebmastercentral.blogspot.gr/2010/04/using-site-speed-in-web-search-ranking.html

Slide 12

Slide 12 text

Website optimisation... Performance! Wait what is performance?

Slide 13

Slide 13 text

Good performance requires: The completion of a request in a fast -or perceived fast- timeframe, with a reliable and predictable outcome.

Slide 14

Slide 14 text

Websites live on HTTP requests Phases in every HTTP request 1 – Browser 2 – Network 3 – Server 4 – Network 5 – Browser

Slide 15

Slide 15 text

http://chimera.labs.oreilly.com/books/1230000000545/ch11.html

Slide 16

Slide 16 text

A modern web page means lots of files!

Slide 17

Slide 17 text

You forgot the GIFs!

Slide 18

Slide 18 text

In order to optimise a website you need to optimise all three: 1 – Server side 2 – Network layer 3 – Browser side

Slide 19

Slide 19 text

Server Performance Operating System File system Database layer Web server Application layer (more of a system admin's job)

Slide 20

Slide 20 text

Network performance DSL, ADSL, VDSL 2G, 3G, 4G, HSDPA WiFi, Ethernet (cannot do much about that in HTTP)

Slide 21

Slide 21 text

Browser performace, where frontend developers (should) shine! phase-1 : until page has loaded phase-2 : after page has loaded

Slide 22

Slide 22 text

Browser / phase-1 until page has loaded DOMContentLoaded and load Javascript DOM events

Slide 23

Slide 23 text

Browser / phase-2 after page has loaded Animations One-page apps HTML5 games

Slide 24

Slide 24 text

But now let's focus on website performance which means: How to make a website load faster!

Slide 25

Slide 25 text

First, we need a tool to measure website performance All modern browsers have Developer Tools with a Network tab!

Slide 26

Slide 26 text

But the best way is via an online service which - is objective - has stable conditions - provides good metrics

Slide 27

Slide 27 text

Webpagetest.org the best online, free tool out there

Slide 28

Slide 28 text

Why Webpagetest.org - Real machines - Real browsers - Simulated networks - Stable, uniform conditions - Cities, devices, options - Open source

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Gtmetrix.com pretty decent, freeware

Slide 31

Slide 31 text

How to optimise a website's load time (at last!)

Slide 32

Slide 32 text

First keep server side healthy - Secure your OS - Perform regular updates on OS, app server, db server - Keep as less files as possible especially images, even gifs - Database garbage cleanups - Database tables optimisation

Slide 33

Slide 33 text

Also, server side - Allow HTTP keep-alive - Enable GZIP for texts - Avoid 404 requests - Use multiple domains - Avoid redirects

Slide 34

Slide 34 text

WordPress specific tips - Delete old post revisions - Delete auto drafts - Delete spam comments - Delete unused terms - Set revisions not too often - Set number of revisions low - Use few custom image sizes - Cleanup old sticky posts - Delete orphaned post meta - Avoid frequent hooks and filters like "pre_get_posts" - Avoid long taxonomy "not-ins" - Remove unused plugins - Remove unused themes

Slide 35

Slide 35 text

Then keep your codebase clean - Write quality code which is fast and maintainable - Choose quality addons themes, plugins, etc - Test early, test often aaand - WRITE QUALITY CODE!

Slide 36

Slide 36 text

Next: The browser!

Slide 37

Slide 37 text

Help browsers render web pages as fast as possible... Wow, that was deep! (not Depp, get it?)

Slide 38

Slide 38 text

Assuming your web server is not too slow and the network is not holding you back...

Slide 39

Slide 39 text

Rule No 1 Make as few and quick HTTP requests as possible

Slide 40

Slide 40 text

Rule No 1 again Seriously Make as FEW and QUICK HTTP requests as POSSIBLE! GIF on the right is there just to draw your attention Did it?

Slide 41

Slide 41 text

Combine and minify CSS files - Smaller file sizes - Less HTTP requests

Slide 42

Slide 42 text

Put CSS in the HEAD - Is downloaded asynchronously - Helps browsers start rendering page as often as possible * Except for "critical" CSS

Slide 43

Slide 43 text

Combine and minify JS files - Smaller file sizes - Less HTTP requests

Slide 44

Slide 44 text

Put JS before BODY end - Because Javascript is "blocking" - Helps browsers start rendering page as early as possible

Slide 45

Slide 45 text

Everyone will tell you to minify HTML too, but honestly, it won't make much of a difference!

Slide 46

Slide 46 text

Compress images - Think of mobile devices, too - JPEG should be preferred - JPEG sizes can be reduced a lot - PNG sizes can be reduced a lot - WebP, the new kid on the block (Many tools online for this)

Slide 47

Slide 47 text

Use image sprites - Combines many images into one - Smaller file sizes - Less HTTP requests

Slide 48

Slide 48 text

Use SVGs - Scalable vector graphics - One file, one download - Scales at any size But, be careful, too many of them can slow down your browser!

Slide 49

Slide 49 text

Rule No 2 Cache everything for as long as possible

Slide 50

Slide 50 text

Cache on the server - Cache whole requests - Use object cache - Use query cache - HTML fragment caching - Opcode caching

Slide 51

Slide 51 text

Cache on the browser Add expires headers Favicons -almost- never change Font files -almost- never change Styles and scripts rarely change Images also very rarely change HTML might change (but it depends) Be prepared to un-cache (invalidate) content

Slide 52

Slide 52 text

What expires headers do They turn 200-OK into 304-Not-Modified

Slide 53

Slide 53 text

Use a caching server like Varnish and/or a CDN not because it's fast, but because it is distributed

Slide 54

Slide 54 text

"Edgy" hipster stuff - SPDY, HTTP2, HTTPS - Page prefetching - DNS prefetching - Async and defer in SCRIPTs (Google them)

Slide 55

Slide 55 text

Bored to death yet?

Slide 56

Slide 56 text

Just remember this: Try to make as few HTTP requests as possible and cache as much as you can ...and you 'll be half way there!

Slide 57

Slide 57 text

The end – Questions?

Slide 58

Slide 58 text

http://wpgreece.org/ http://www.wpgc.gr/ https://www.facebook.com/groups/WordPressGreekCommunity/ https://twitter.com/wpgreeceorg/ https://www.youtube.com/channel/UCn2JrgFY9lHO85gGTAlfw0A/ https://speakerdeck.com/wpgr/ (or just Google us)