23
HI! I’M ANDREW

Fast Websites: The What, Why, and How

Embed Size (px)

Citation preview

Page 1: Fast Websites: The What, Why, and How

HI! I’M ANDREW

Page 2: Fast Websites: The What, Why, and How
Page 3: Fast Websites: The What, Why, and How

FAST WEBSITESCINCINNATI WORDPRESS

Page 4: Fast Websites: The What, Why, and How

FAST WEBSITES

OVERVIEW

▸ Why should you care?

▸ Lifecycle of a page request

▸ Measuring performance

▸ Common sources of performance issues

▸ Configuring your server

▸ Quickstart plugins

Page 5: Fast Websites: The What, Why, and How

WHY SHOULD YOU CARE?

▸ Your users won’t wait

▸ Correlation between load time and site abandonment

▸ 40% will give up if site takes longer than 3 seconds to load

▸ It will affect your bottom line

▸ Amazon found every 0.1s of latency resulted in 1% revenue loss

▸ Google found 20% loss in traffic from 0.5s search result delay

Spinner by Kirby Wu from the Noun Project

https://blog.kissmetrics.com/loading-time/

Page 6: Fast Websites: The What, Why, and How

LIFECYCLE OF A PAGE REQUEST

REQUEST / RESPONSE▸ When you hit enter in the address bar,

your browser performs a DNS lookup to translate the URL into an IP address

▸ A web server listens for incoming requests and, upon receiving one, decides how it should be handled

▸ Dynamic content must be created on demand. WordPress code runs to determine the content of the page to be shown.

Page 7: Fast Websites: The What, Why, and How

LIFECYCLE OF A PAGE REQUEST

REQUEST / RESPONSE

Page 8: Fast Websites: The What, Why, and How

MEASURING PERFORMANCE

▸ You can’t know what needs to be improved without first measuring

▸ There’s no single “silver bullet” trick. Measuring guides you to prioritize what’s hurting your site the most.

Page 9: Fast Websites: The What, Why, and How

MEASURING PERFORMANCE

BROWSER DEVELOPER TOOLS

Page 10: Fast Websites: The What, Why, and How

DEMO

Browser Developer Tools

MEASURING PERFORMANCE

Page 11: Fast Websites: The What, Why, and How

(CHROME) DEVTOOLS: STATE OF THE UNION 2017 (GOOGLE I/O)

https://www.youtube.com/watch?v=PjjlwAvV8Jg

MEASURING PERFORMANCE

Page 12: Fast Websites: The What, Why, and How

MEASURING PERFORMANCE

GOOGLE PAGESPEED INSIGHTS

https://developers.google.com/speed/pagespeed/insights/

Page 13: Fast Websites: The What, Why, and How

MEASURING PERFORMANCE

P3 (PLUGIN PERFORMANCE PROFILER)

https://wordpress.org/plugins/p3-profiler/

Page 14: Fast Websites: The What, Why, and How

COMMON SOURCES OF PERFORMANCE ISSUES

▸ Too many plugins

▸ Shared hosting

▸ Unoptimized images

▸ Too many separate assets

▸ Running old versions of server software (PHP, MySQL)

▸ Not caching

Page 15: Fast Websites: The What, Why, and How

CONFIGURING YOUR SERVER

▸ Some web server software is faster than others (choose nginx over Apache in most cases)

▸ Whenever possible, enable GZIP and long cache configurations

▸ Use latest versions of PHP and MySQL

▸ If you want to go the extra mile, consider an additional caching layer like Varnish

SOFTWARE

Page 16: Fast Websites: The What, Why, and How

CONFIGURING YOUR SERVER

APACHE VS. NGINX

https://help.dreamhost.com/hc/en-us/articles/215945987-Web-server-performance-comparison

Page 17: Fast Websites: The What, Why, and How

CONFIGURING YOUR SERVER

PHP VERSIONS

Turbocharging the Web with PHP 7The Zend Performance Team provides insight

into the upcoming impact of PHP 7

We ran performance benchmarks on popular PHP

apps to compare PHP 5.6, PHP 7, and HHVM 3.7

We provide an end-to-end solution for rapid delivery of PHP applications.Our mission is to empower companies to deliver innovation faster.www.zend.com

ZendCon Registration

For details visit zendcon.comConference includes training sessions, best practices on PHP 7, and more!

Learn more about PHP 7 at the Global PHP Conference inLas Vegas: ZendCon 2015

Sign Up Now

Sign up for future updates on PHP 7, includingupcoming PHP 7 Training Courses

Intel’sperformance team

collaborates with Zend on PHP optimization efforts!

It has been faster than most of them for a while and, with 7, the gap grows even bigger.

Wondering how PHP compares to other dynamic languages?

How fast dynamic languages render a Mandelbrot fractal

0.0

0.5

1.0

1.5

2.0

2.5

seco

nds (

lowe

r is b

ette

r)

0.281

0.684

1.128

2.083

PHP 7 Ruby 2.1 Python 2.7.8 Perl 5.18.4

CRM

0

50

100

150

200

250

300

requ

ests

per

seco

nd

127

186

270

SugarCRMPHP 5.6 HHVM 3.7 PHP 7

We also tested how various PHP frameworks perform

under PHP 7SPOILER: Pretty Darn Well!

Frameworks

0

100

200

300

400

500

requ

ests

per

seco

nd

285348

485

250

343

489

Laravel

Laravel Zend FrameworkPHP 5.6 HHVM 3.7 PHP 7 PHP 5.6 HHVM 3.7 PHP 7

Drupal 8 runs 72% faster with PHP 7

CMS

0

50

100

150

200

250

300

350

PHP 5.6 HHVM 3.7 PHP 7 PHP 5.6 HHVM 3.7 PHP 7

requ

ests

per

seco

nd

Drupal 7 Drupal 8 Beta (uncached)

182

300 316

32 44 55

One WordPress request on PHP 5.6 executes just under 100M CPU instructions, while PHP 7

only executes 25M to do the same job.

You’ll need less servers to serve the same amount of users!

WordPress Screams on PHP 7

CMS

requ

ests

per

seco

nd

WordPress 3.6 WordPress 4.1PHP 5.6 HHVM 3.7 PHP 7 PHP 5.6 HHVM 3.7 PHP 70

50

100

150

200

250

300

350

400

96

197 204 191

361 374

With execution time more than twice as fast compared to PHP 5.6 and 30% lower memory consumption - servers running PHP 7 will be able to serve up to 3xas many requests as those running PHP 5.6.

Run up to 3x Magentotransactions on the same hardware

EcommerceMagento 1.9

0

10

20

30

40

50

60

70

80

PHP 5.6 HHVM 3.7 PHP 7 PHP 5.6 HHVM 3.7 PHP 7

requ

ests

per

seco

nd

Homepage Catalogue

41

6469

8 16 17

http://www.zend.com/en/resources/php7_infographic

Page 18: Fast Websites: The What, Why, and How

CONFIGURING YOUR SERVER

▸ If you don’t use revisions, you can limit or disable the number that are stored

WORDPRESS SETTINGS

https://codex.wordpress.org/Revisions

https://wordpress.org/plugins/revision-control/

▸ You can tune JPEG compression to increase or decrease quality

https://wpmudev.org/blog/fix-jpeg-compression

Page 19: Fast Websites: The What, Why, and How

QUICKSTART PLUGINS

▸ Page caching saves the output of a page to reuse on every subsequent request

▸ W3 Total Cache

▸ WP Super Cache

▸ Batcache

▸ Object cache saves raw data (options, posts) in an in-memory data store

▸ Redis Object Cache

Puzzle Piece by Andrejs Kirma from the Noun Project

CACHING

Page 20: Fast Websites: The What, Why, and How

QUICKSTART PLUGINS

▸ “Lossless” image compression shrinks size of images while not losing fidelity

▸ Smush Compression

▸ ImageOptim (Mac Software)

▸ Serve your files from a content delivery network (CDN)

▸ Jetpack Photon

▸ CloudFlare

Puzzle Piece by Andrejs Kirma from the Noun Project

IMAGE OPTIMIZATION

Page 21: Fast Websites: The What, Why, and How

QUICKSTART PLUGINS

▸ Toward a goal of fewer and smaller requests, combine and shrink stylesheets and scripts

▸ Autooptimize

▸ Better WordPress Minify

▸ Merge + Minify + Refresh

▸ Above The Fold Optimization

Puzzle Piece by Andrejs Kirma from the Noun Project

ASSET CONCATENATION

Page 22: Fast Websites: The What, Why, and How

FAST WEBSITES

▸ If you’re not using a plugin, remove it

▸ Disable unused Jetpack modules

▸ Consider “leaner” plugins / themes

▸ Always run up-to-date software

▸ Cache everything

GENERAL TIPS

Page 23: Fast Websites: The What, Why, and How

FAST WEBSITES

THANKS!

Questions?