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 - FeWeb15

How to improve the performance of your website - FeWeb15

More Decks by Thijs Feryn

Other Decks in Technology

Featured

Transcript