In this session, Jason Nickerson will showcase the current state of SEO and Website Optimization and the issues facing Joomla users. By the end of Jason’s talk you will learn how to optimize your Joomla site from hosting to core.

1. Optimize
Everything!
JoomlaDay Chicago 2019
Jason Nickerson

2. GET SOCIAL
SHARE THE JOOMLA LOVE
#jday19chi

3. PART ONE:
DESIGNING FOR PERFORMANCE
Jason Nickerson
OPTIMIZE EVERYTHING

4. WEB DESIGN IN THE 90’s
Jason Nickerson

5. 5
WEB DESIGN IN THE 2000’s
Jason Nickerson

6. 6
WEB DESIGN 2012+
Jason Nickerson

7. DESIGNING FOR PERFOMANCE: HOSTING
Jason Nickerson
HOSTING

8. Joomla friendly hosting
Shared hosting plans
Dedicated servers
Cloud based servers
Price vs Performance
Cloud Access
Rochen
A2 Hosting
HostPapa
No sharing of resources
Security
Flexibility
Performance
Scaling
Unlimited is a lie
All shared hosts oversell
You are not number one
You don’t matter
You will out grow
Cheap is never the answer
Expensive isn’t better
Research
Know what you need
DESIGNING FOR PERFOMANCE: HOSTING
Jason Nickerson

9. PHP 7
DESIGNING FOR PERFOMANCE: HOSTING
Jason NickersonOptimize Everything
PHP7 IS 2 TIMES FASTER THAN PHP 5

10. DESIGNING FOR PERFORMANCE: IMAGES
Jason Nickerson
IMAGES

11. IMAGES CAN BE RESPONSIBLE
FOR UP TO
70%
OF A WEBSITES LOAD TIME
DESIGNING FOR PERFORMANCE: IMAGES
Jason Nickerson

12. IMAGE COMPRESSION:
Image Compression is
the most common
solution for optimization
of pictures, but there are
other aspects to take
into account before
optimizing your images.
ImageRecycle.com
On the fly image optimization for
Joomla with the ImageRecycle
Joomla Component.
DESIGNING FOR PERFORMANCE: IMAGES
Jason Nickerson

13. DESIGNING FOR PERFORMANCE: IMAGES
Jason Nickerson

14. SIZE
MATTERS
DESIGNING FOR PERFORMANCE: IMAGES
Jason NickersonDesigning for Performance with Joomla

15. BACKGROUND IMAGES
1280 x 863 JPG : 168 KB
DESIGNING FOR PERFORMANCE: IMAGES
Jason NickersonDesigning for Performance with Joomla

16. BACKGROUND SIZE:
COVER
Scale the background
image to be as large as
possible so that the
background area is
completely covered by
the background image.
BACKGROUND SIZE: COVER
DIV {
background: url (demo.jpg);
background-size:cover;
}
DESIGNING FOR PERFORMANCE: IMAGES
Jason NickersonDesigning for Performance with Joomla

17. BACKGROUND SIZE: COVER
211 KB SAVED!
DESIGNING FOR PERFORMANCE: IMAGES
Jason Nickerson

18. THINK
MOBILE
DESIGNING FOR PERFORMANCE: IMAGES
Jason NickersonDesigning for Performance with Joomla

19. HTML5 PICTURE
Using the HTML5 picture
syntax to deliver various
sizes of images per
screen size is a quick
and easy method to
save load time.
USING THE <PICTURE> SYNTAX
<picture>
<source
media="(min-width: 650px)"
srcset="images/kitten-stretching.png">
<source
media="(min-width: 465px)"
srcset="images/kitten-sitting.png">
<img
src="images/kitten-curled.png"
alt="a cute kitten">
</picture>
DESIGNING FOR PERFORMANCE: IMAGES
Jason NickersonDesigning for Performance with Joomla

20. ADAPTIVE IMAGES
Adaptive Images
detects your visitor's
screen size and
automatically creates
caches and delivers
device appropriate re-
scaled versions of your
web page's embedded
HTML images.
DESIGNING FOR PERFORMANCE: IMAGES
SOLUTIONS:
XT Adaptive Images
XT Adaptive Images for Joomla is a port of
adaptive-images.com script for Joomla
Jason Nickerson
Adaptive Images
adaptive-images.com offers a PHP and Javascript
solution for full adaptive images

21. DESIGNING FOR PERFORMANCE: VIDEOS
Jason Nickerson
VIDEOS

22. EMBED CODES CAN BE RESPONSIBLE
FOR UP TO
500KB
OF A WEBSITES LOAD TIME
DESIGNING FOR PERFORMANCE: VIDEOS
Jason Nickerson

23. DESIGNING FOR PERFORMANCE: VIDEOS
Jason Nickerson

24. EMBED ISSUES:
Embed codes allow us
to use videos that we
have on our Video
Channels such as
YouTube and Vimeo,
but what are the
known issues with
Embed codes?
EXTERNAL CALL
Embed codes rely on the Video Providers delivery
PRE-LOADING
Pre-loading the videos have a huge impact of
performance.
NOT RESPONSIVE
Embed codes use a fixed with iframe or source
call that is not responsive by default
DESIGNING FOR PERFORMANCE: VIDEOS
Jason Nickerson

25. PRE-LOADING:
The pre-loading and
responsive issue can be
resolved with HTML5,
CSS, and just a drop of
JavaScript to cancel the
pre-load of the video and
only display the preview
image until clicked.
PRE-LOADING: HTML
<div class="youtube-player"
data-id="VIDEO_ID"></div>
DESIGNING FOR PERFORMANCE: VIDEOS
Jason Nickerson

26. PRE-LOADING: JS
document.addEventListener("DO
MContentLoaded",
function() {
var div, n,
v =
document.getElementsByClassNa
me("youtube-player");
for (n = 0; n <
v.length; n++) {
div =
document.createElement("div")
;
PRE-LOADING:
The pre-loading and
responsive issue can be
resolved with HTML5,
CSS, and just a drop of
JavaScript to cancel the
pre-load of the video and
only display the preview
image until clicked.
DESIGNING FOR PERFORMANCE: VIDEOS
Jason Nickerson

27. PRE-LOADING: CSS
.youtube-player {
position: relative;
padding-bottom: 56.23%;
/* Use 75% for 4:3 videos
*/
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}
.youtube-player iframe {
PRE-LOADING:
The pre-loading and
responsive issue can be
resolved with HTML5,
CSS, and just a drop of
JavaScript to cancel the
pre-load of the video and
only display the preview
image until clicked.
DESIGNING FOR PERFORMANCE: VIDEOS
Jason Nickerson

28. DOWNLOAD THE FREE PLUGIN
Quick YouTube
DESIGNING FOR PERFORMANCE: VIDEOS
PRE-LOADING:
The pre-loading and
responsive issue can be
resolved with HTML5,
CSS, and just a drop of
JavaScript to cancel the
pre-load of the video
and only display the
preview image until
clicked.
Jason Nickerson
YOUTUBE LITE JS
http://www.labnol.org/
internet/light-youtube-
embeds/27941/

29. HTML5 PRE LOAD:
HTML5 allow us to use a
simple syntax to display
MP4 videos. Using the
pre-load ’none’ option
with a poster image will
give better performance.
PRE-LOADING: HTML
<video class="responsive"
controls preload="none"
width="640" height="264"
poster="http://video-
js.zencoder.com/oceans-clip.png">
<source src="http://video-
js.zencoder.com/oceans-clip.mp4"
type="video/mp4" />
</video>
DESIGNING FOR PERFORMANCE: VIDEOS
Jason Nickerson

30. DESIGNING FOR PERFORMANCE: CSS3
@MEDIA USEAGE:
Breakpoints are most
used for devices and by
calling the device CSS
for the desktop view is
only bloating your load.
The solution is as easy
as creating a separate
breakpoint.css and
using a @media to call it
only when needed!
BREAKPOINT.CSS CALL
<link rel='stylesheet'
media='(max-width: 1200px)'
href='css/responsive.css' />
Jason Nickerson

31. DESIGNING FOR PERFORMANCE: EXTERNAL CALLS
Jason Nickerson
EXTERNAL CALLS

32. EXTERNAL CALLS:
External Calls from
your site can be a huge
issue when it comes to
website performance.
You should always
remove any un-
needed 3rd party and
duplicate JavaScript
calls.
DESIGNING FOR PERFORMANCE: EXTERNAL CALLS
WIDGETS
Widgets from other sites can make a huge impact
DUPLICATE JAVASCRIPT CALLS
Make sure there are not multiple calls to the same
JavaScript library.
3RD PARTY CALLS
3rd party codes that make external calls
Jason Nickerson

33. DESIGNING FOR PERFORMANCE
PART TWO:
Making the lower case god happy
Jason Nickerson

34. jayjoomler jnickersontampaJason Nickerson
https://developers.google.com/speed/pagespeed/insights/
Jason Nickerson

35. Jason Nickerson

36. Optimization Score
• Good: The page applies most performance
best practices and there is little headroom
for further optimization. The page scores 80
or above.
• Medium: The page is missing some
common performance optimizations and
there is medium headroom for
optimization. The page scores between 60
and 79.
• Low: The page is not optimized and there is
fairly large headroom for optimization. The
page scores between 0 and 59.
Jason Nickerson
GOOGLE PAGE SPEED

37. • Avoid landing page redirects
• Enable compression
• Improve server response time
• Leverage browser caching
• Minify resources
• Optimize images
• Optimize CSS Delivery
• Prioritize visible content
• Remove render-blocking JavaScript
GOOGLE PAGE SPEED
Jason Nickerson
What google wants

38. Avoid redirects
• example.com → m.example.com/home -
multi-roundtrip penalty for mobile users.
• example.com → www.example.com →
m.example.com - very slow mobile
experience.
Jason Nickerson
GOOGLE PAGE SPEED

39. Enable Compression
Joomla Global Configuration Settings
Jason Nickerson
GOOGLE PAGE SPEED

40. Minify Code
Jason Nickerson
GOOGLE PAGE SPEED

41. Enable Cache
Joomla Global Configuration Settings
Jason Nickerson
GOOGLE PAGE SPEED

42. Enable Cache
Server side cache with cPanel
Jason Nickerson
GOOGLE PAGE SPEED

43. Image optimization
Jason Nickerson
GOOGLE PAGE SPEED

44. Deferred Stylesheets
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="small.css"/>
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
</body>
</html>
Jason Nickerson
GOOGLE PAGE SPEED

45. Javascript async
By default JavaScript blocks DOM construction and thus
delays the time to first render. To prevent JavaScript from
blocking the parser we recommend using the HTML async
attribute on external scripts.
<script async src=“my.js">
Jason Nickerson
GOOGLE PAGE SPEED

46. Beware of CDN loads
Jason Nickerson
GOOGLE PAGE SPEED

47. Optimization Extensions
Jason Nickerson

48. Optimization Extensions
Jason Nickerson

49. Jason Nickerson

50. THANK YOU
jayjoomler jnickersontampaJason Nickerson

51. jayjoomler jayblaqtampaJason Nickerson
QUESTIONS
?
jayjoomler jnickersontampaJason Nickerson