1. SLIDESHARE.NET/DEEPCRAWL
SPEED & PERFORMANCE
OPTIMISATION: HOW TO MEET
USERS’ HIGH EXPECTATIONS
RACHEL COSTELLO // DeepCrawl //
@rachellcostello

2. @rachellcost brightonSEO
WHAT WE’LL COVER
3. The future of web performance and speed.
1. What users expect from websites.
2. User-centric optimisation techniques.
@rachellcostello brightonSEO

3. Site speed is one of these
key factors.
@rachellcostello brightonSEO
SEO success has a lot of
dependencies on aspects
centered around UX.

4. SPEED
SITE
ARCHITECTURE
RELEVANCE
TOINTENT
USER HAPPINESS
UXInformation
Architecture
Site Speed
Content
Relevance
to Intent
@rachellcostello brightonSEO

5. “Speed is something that
does matter quite a bit to
us and it has a big effect on
users, so that’s something
that I, personally, would
take seriously.”
John Mueller, Webmaster Trends Analyst at
Google
@rachellcostello brightonSEO

6. How are the
UK industries
currently
performing?
@rachellcostello brightonSEO

7. Source: Think With Google @rachellcostello brightonSEO
Best practice:
3 seconds

8. Source: Think With Google @rachellcostello brightonSEO
Best practice:
Fewer than 50

9. Source: Think With Google @rachellcostello brightonSEO
Best practice:
Less than 500kb

10. Let’s get started!
Looks like
there’s a lot of
work to be
done...
@rachellcostello brightonSEO

11. WHAT DO
USERS EXPECT
FROM
WEBSITES?
@rachellcostello brightonSEO
BEYOND PAGE LOAD METRICS

12. Source: Think With Google
@rachellcostello brightonSEO

13. Source: Think With Google
@rachellcostello brightonSEO

14. Source: Think With Google
@rachellcostello brightonSEO

15. @rachellcostello brightonSEO

16. WARNING!
We’re going to go through a
painful experience together.
@rachellcostello brightonSEO

17. @rachellcostello brightonSEO

18. For meaningful performance optimisation,
we need to feel empathy for our users.
@rachellcostello brightonSEO

19. Not all devices
have the same
performance
capabilities.
@rachellcostello brightonSEO

20. IPHONE 8 MOTO G4 ALCATEL 1X
@rachellcostello brightonSEO

21. Source: Medium
@rachellcostello brightonSEO

22. High-end
ALCATEL 1X
Median
MOTO G4IPHONE 8
36s13s4s
Low-end
@rachellcostello brightonSEO

23. “Stop taking fast
networks, CPU and
high RAM for granted.”
Addy Osmani, Engineering Manager at Google
@rachellcostello brightonSEO

24. That’s a relief…?
Source: Unbounce
@rachellcostello brightonSEO

25. Stop using
internet
connection as a
scapegoat.
Users deserve
better.
@rachellcostello brightonSEO

26. Take the time to understand your users.
@rachellcostello brightonSEO

27. @rachellcostello brightonSEO
The ’Audience’ tab
in Google Analytics
has some valuable
insights into
browsing
behaviour.

28. @rachellcostello brightonSEO

29. The user’s
perception of
speed is
everything.
@rachellcostello brightonSEO

30. Here’s a real-
world example:
@rachellcostello brightonSEO

31. The Guardian: Above-the-
fold content populated at
1.2s.
The Telegraph: Above-the-
fold content populated at
6.5s, after The Guardian
homepage has finished
loading completely.
@rachellcostello brightonSEO

32. The user doesn’t
know that the entire
Guardian homepage
loaded in 6.4s.
For the user, the
page loaded in 1.2s.
@rachellcostello brightonSEO

33. @rachellcostello brightonSEO
We need to
realign our focus
to concentrate
on what will have
the biggest
impact on the
user.

34. Source: Addy Osmani, Medium @rachellcostello brightonSEO

35. Source: Imagebox
CRITICAL RENDERING PATH
Prioritising above-the-
fold content to load as
quickly as possible.
@rachellcostello brightonSEO

36. @rachellcostello brightonSEO
Bastian Grimm did a great talk on this with some
practical and technical optimisation examples.
https://www.slideshare.net/bastiangrimm/web-performance-madness-brightonseo-2018

37. Throughout your
performance analysis
and optimisation
efforts, keep above-
the-fold, visible
content in mind at all
times.
@rachellcostello brightonSEO

38. SPEED
TESTING
TOOLS TO TRY
@rachellcostello brightonSEO
GETTING THE DATA YOU NEED

39. 1. PAGESPEED INSIGHTS
@rachellcostello brightonSEO

40. Useful features of
PageSpeed Insights:
● Combination of lab data
from Lighthouse and field
data from CrUX report.
● Opportunities listed with
estimated savings in
seconds.
@rachellcostello brightonSEO

41. 2. WEBPAGETEST
@rachellcostello brightonSEO

42. Useful features of
WebPagetest:
● Provides video of a
website loading against
competitors.
● Request map shows
resource load times and
dependencies.
@rachellcostello brightonSEO

43. 3. CHROME DEVTOOLS
@rachellcostello brightonSEO

44. Useful features of
Chrome DevTools:
● Resources and JavaScript
waterfall breakdown.
● Tests rendering on
different devices.
● Shows unused scripts.
@rachellcostello brightonSEO

45. Source: Twitter @rachellcostello brightonSEO

46. 4. GTMETRIX
@rachellcostello brightonSEO

47. Useful features of
GTmetrix:
● Customise tests by
browser, location, device
and connection type.
● Speed metric breakdown
shown in a timeline.
@rachellcostello brightonSEO

48. 5. DEEPCRAWL
@rachellcostello brightonSEO

49. Useful features of
DeepCrawl:
● Monitors fetch time and
page file size trends over
time.
● Can extract Chrome
performance timings for
all pages on a site.
@rachellcostello brightonSEO

50. @rachellcost brightonSEO
bit.ly/speed-tools
@rachellcostello brightonSEO
More tools and
further reading:

51. THE FUTURE
OF WEB
PERFORMANCE
@rachellcostello brightonSEO
USER-CENTRIC OPTIMISATION

52. @rachellcostello brightonSEO

53. Device Journey Connection
Personalise performance by...
@rachellcostello brightonSEO

54. Personalising
performance by
device:
Progressive
enhancement.
@rachellcostello brightonSEO

55. PROGRESSIVE ENHANCEMENT
Focuses on the core content
of a page, then progressively
adds more technically
advanced features on top if
the conditions of the client
allow for this.
@rachellcostello brightonSEO

56. @rachellcostello brightonSEO
1 HTML
Clean, accessible content.

57. @rachellcostello brightonSEO
2 CSS
Layout and visual alterations.
1 HTML
Clean, accessible content.

58. @rachellcostello brightonSEO
3 JavaScript
Additional interactivity.
2 CSS
Layout and visual alterations.
1 HTML
Clean, accessible content.

59. ”If your website runs fast on a
slow machine with a poor
screen in a poor browser on a
sub-optimal network, then it
will only run faster on a fast
machine with a good browser
on a decent network.”
Smashing Magazine
@rachellcostello brightonSEO

60. The website or application will
fall back to a less complex
experience if the client is
unable to handle the more
complex features.
GRACEFUL DEGRADATION
@rachellcostello brightonSEO

61. @rachellcostello brightonSEO
1 JavaScript
Additional interactivity.
2 CSS
Layout and visual alterations.
3 HTML
Clean, accessible content.

62. @rachellcostello brightonSEO
2 CSS
Layout and visual alterations.
3 HTML
Clean, accessible content.

63. @rachellcostello brightonSEO
3 HTML
Clean, accessible content.

64. Test how usable
your website is
without JS & CSS
using the Web
Developer browser
plugin.
@rachellcostello brightonSEO

65. “If the BBC site is slowing down
due to load, certain features will
automatically switch off to bring
the speed up again. These will be
low-importance things – such as a
promo box at the bottom of a
page – that are expensive on the
server and few users will miss.”
@rachellcostello brightonSEO

66. Personalising
performance by
journey:
Resource hints.
@rachellcostello brightonSEO

67. RESOURCE HINTS
1. Preload: Specifies the highest priority
resources to be loaded first.
2. Prefetch: Specifies key links and resources
needed next in the journey.
3. Preconnect: Sets up connections with the
server earlier.
@rachellcostello brightonSEO

68. <link rel="preload" href="/example.js">
<link rel="prefetch" href="/example.jpg">
<link href="cdn.example.com" rel="preconnect">
@rachellcostello brightonSEO

69. @rachellcostello brightonSEO

70. @rachellcostello brightonSEO

71. Source: YouTube
@rachellcostello brightonSEO

72. Personalising
performance by
connection:
Network
Information API.
@rachellcostello brightonSEO

73. Provides information
on internet
connection, allowing
you to tailor the
content you serve
around the user’s
connectivity.
NETWORK INFORMATION API
@rachellcostello brightonSEO

74. @rachellcostello brightonSEO
Source: MDN Web Docs
This example code will watch
for changes in the user’s
connection.

75. @rachellcostello brightonSEO
Add instructions to this for
when changes are detected.
Source: YouTube

76. The user won’t know that
there is anything missing
from their experience,
they’ll just be seeing
content. Fast.
@rachellcostello brightonSEO

77. Remember, SEOs can’t
do all of this alone.
Get developer support.
@rachellcostello brightonSEO

78. Learn from the development team about
what is possible for your website.
@rachellcostello brightonSEO

79. Code splitting
Compression
Minification
Asynchronous loading
Concatenation
Dynamic imports
Resource hints
Progressive enhancement
Graceful degradation
Defer loading
Preload
Prefetch
Ask your developers about these terms:
@rachellcostello brightonSEO

80. @rachellcost brightonSEO
KEY TAKEAWAYS
3. Talk to developers to learn about new
performance optimisation methods.
1. Don’t assume everyone is accessing
your site in optimal conditions.
2. Prioritise loading of above-the-fold
content and perceived performance.
@rachellcostello brightonSEO

81. @rachellcost brightonSEO
FURTHER READING
https://www.deepcrawl.com/blog/white-papers/site-speed-performance-guide/
https://developer.chrome.com/devsummit/schedule/speed-essentials
https://developers.google.com/speed/
https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/
https://www.deepcrawl.com/blog/releases/using-crawler-to-collect-chrome-page-speed-metrics/
https://www.keycdn.com/blog/resource-hints
https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
https://github.com/guess-js
@rachellcostello brightonSEO

82. @rachellcostello brightonSEO
THANK YOU!
Any questions? Send me a tweet:
@DeepCrawl www.deepcrawl.com