How to improve the performance of your website - FeWeb15

By Thijs Feryn How to improve the performance of your
website

Hi, I’m Thijs

I’m @ThijsFeryn on Twitter

I’m an Evangelist At

I’m a at board member

Web performance is an essential part of the user experience

Infrastructure

Browser rendering

User location

Down Slowdown ~ downtime

Focus on the foundation first

Fast servers

Performance != Scalability

Performance: speed

Scalability: constant speed with increasing load

Add servers to maintain performance

Stability

Code efficiently

Identify slowest part

Optimize database

Optimize runtime

After a while you hit the limits

Don’t recompute if the data hasn’t changed

Memcached Redis APC

Optimize database Optimize runtime A void A void

Don’t recompute if the data hasn’t changed

Varnish

Normally User Server

With Varnish User Varnish Server

Caching in your architecture

Respect HTTP

Cache-control: public, maxage=3600, s-maxage=7200 Cache-control: no-cache, no- store VS

Cookies?

Edge Side Includes

Don’t cache header

Cache footer until 31/12/2015 23:59:59

Cache for a day

Cache for an hour

<!DOCTYPE html> <html> <head> <title>The Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/bootstrap-theme.min.css"> <script src=“/js/jquery-2.1.4.min.js"></script> <script src="/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <esi:include src=“http://mysite.dev/nav" /> </nav> <div class="jumbotron"> <esi:include src="http://mysite.dev/jumbotron" /> </div> <div class="container"> {% block content %}{% endblock %} <hr> <footer> <esi:include src="http://mysite.dev/footer" /> </footer> </div> </body> </html> ESI tags

Hit rate

Browser rendering

✓Concurrency limitations ✓Slowband, bad mobile connection ✓First byte time ✓Rendering
time ✓Limit resource size ✓Limit resource amount ✓Re-use TCP connections

Compress images, JS & CSS

Combine multiple JS & CSS into one file

Right image size for the right device

Non- blocking Javascript

Google PageSpeed Insights & Web Page Performance Test

User location

Caching in the edge

Content Delivery Network

Faster responses per request

Don’t saturate your own network

How to improve the performance of your website ...

How to improve the performance of your website - FeWeb15

More Decks by Thijs Feryn

Other Decks in Technology

Featured

Transcript