This document discusses improving website performance. It notes that speed is important for user experience, with many users expecting pages to load within 2 seconds on mobile. Various tools can measure performance metrics like first contentful paint and time to interactive. The document recommends optimizing images, using a content delivery network and cache plugins, lazy loading images, and only loading necessary plugins. It shows an example WordPress site that improved from over 6 seconds to under 4 seconds loading time with these optimizations.

2. Deep Dive into WordPress Performance
WEBSITE
HTML
CSS
JAVASCRIPT
DNS
HTTP
PHP
CDN
300ms700ms
パフォーマンス

3. Hello! こんにちは
Better and faster web
that works for everyone!
Mike Rynart
@mikerynart

4. Why
Speed Matters
What
Improve & Optimize
How
Measure Speed

5. 第一印象
First impression...

6. 速い
Fast!

7. Akamai Technologies, “Consumer Web Performance Expectations Survey”, 2014
1 out of 2 people
expect a page to load in
less than 2 seconds

8. Source: DoubleClick - The need for mobile speed, September 2016
53%of visits are
abandoned if a mobile
site takes more than
3 seconds to load

9. 速度
Speed!

10. Source: Google How important is speed to users? (Speed Matters, Vol. 3)

11. https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

12. https://wpostats.com/

13. 時間=お金
Time = Money

14. How are we doing?

15. We suck!

16. Source: Google Research - Webpagetest.org, January 2018

17. http://www.evolutionoftheweb.com/

18. Source: DoubleClick - The need for mobile speed, September 2016
s e n iz
ma r!

19. The web is
DOOM
2.3 MB
https://www.wired.com/2016/04/average-webpage-now-size-original-doom/

20. ユーザー体験
User Experience

26. 2018
Google Using page speed in
mobile search ranking
2011
Google introduces
Page Speed Online
2010
Google first announces that
“site speed” is a ranking factor
2006
Google's Marissa Mayer:
Speed wins

27. https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

28. どのくらい速いのか?
How Fast?

29. 開始?
Start?

31. 旅...
Journey...

32. Web Performance tools
https://developers.google.com/web/fundamentals/performance/speed-tools/
PageSpeed Insights GT Metrix Pingdom
LighthouseChrome Developer ToolsWebPageTest

35. https://webpagetest.org/easy - Moto G4 - Chrome - 4G

36. 早く感じる？
Feels fast?

37. 楽しい時間
Fun times!

38. 待っている
Waiting...

39. Source: Ericsson ConsumerLab, Neurons Inc.
感知
Perception

40. FCP: https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint

41. 面白い
Interesting

42. TTI: https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive

43. 準備完了
Feel ready?

44. ややこしい
Complex

45. https://www.w3.org/blog/2012/09/performance-timing-information/

46. https://www.w3.org/blog/2012/09/performance-timing-information/
BACKEND
FRONTEND

47. https://www.w3.org/blog/2012/09/performance-timing-information/
BACKEND
FRONTEND

48. Sen w hi s
OPTIMIZATION 3 RULES

49. Sen m r in
Sen w hi s
OPTIMIZATION 3 RULES

50. Sen m r in
Sen w hi s
Sen h s e f i n y
OPTIMIZATION 3 RULES

51. 行くぞ
Let’s go!

52. https://miamitouristguide.com

53. https://developers.google.com/web/tools/lighthouse/

54. 6.5 seconds.

55. https://developer.chrome.com/devtools

56. Laz d
im
Abo h
fo

57. 3.9 seconds

58. Mobile first

60. Cloud Hosting

65. Images
Addy Osmani: https://images.guide/

66. Imagify
https://wordpress.org/plugins/imagify/
Image
Optimizer

67. Cache
https://wordpress.org/plugins/w3-total-cache/
W3 Total
Cache

68. https://wordpress.org/plugins/wp-super-cache/
Cache and Compress
WP Super Cache

69. https://wordpress.org/plugins/autoptimize/
Merge and Minify
Autoptimize

70. https://wordpress.org/plugins/a3-lazy-load/
Lazy loading
A3 Lazy Load

71. https://wordpress.org/plugins/plugin-load-filter/
Plugin
Load Filter

72. 3.8 seconds 3G

73. 驚くばかり
Awesome!

74. 速度
Speed Matters!

75. 質問? Questions?
Let’s connect @mikerynart and mikerynart.com
Start your journey
@mikerynart
https://mikerynart.com/fasterweb/