@mikeherchel
PAGE SPEED MATTERS • Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent (Google) • Amazon found that every additional 100 milliseconds of load time decreased sales by 1 percent!!
@mikeherchel
97%
of
mobile
response
?me
happens
at
the
front
end
h-p://www.webperformancetoday.com/2011/04/20/desktop-‐vs-‐mobile-‐web-‐page-‐load-‐speed/
More so for mobile...
@mikeherchel
Welcome to the Convoluted World of Drupal Caching!
Breakdown
of
Drupal's
Performance
Admin
Cache
pages
for
anonymous
users:
Stores
en?re
HTML
in
cache
db
table
(or
memcached/redis).
Also,
enables
external
caching
(Varnish,
Browser).
Cache
Blocks:
Basic
caching
for
blocks.
Note
that
blocks
created
by
views
must
be
explicitly
enabled
for
caching.
Amount
of
Bme
before
page
cache
is
cleared.
Note!
This
needs
to
be
enabled
for
Block
Cache!
Uses
PHP
library
to
Gzip
html.
KEEP
THESE
CHECKED
DAMNIT!
:)
Only
affects
external
caches
(Varnish,
browers).
Sets
cache-‐control
max-‐age
value.
@mikeherchel
Views Caching Explained
Query
Results
Cache:
Caches
db
results
for
set
?me
period
(does
what
you
think
it
does).
Rendered
Output
Cache:
Does
not
cache
db
query.
This
will
query
the
db
(or
query
results
cache),
and
if
there
is
no
change
it
will
output
rendered
html.
If
there
*is*
a
change,
it
will
regenerate
and
cache
resul?ng
html.
@mikeherchel
Lots of anonymous traffic and using Godaddy or another crappy host?
• Boost
h-p://drupal.org/project/boost
Does
what
Varnish
does
–
but
doesn’t
require
external
service.
This
will
work
on
most
shared
hosts
and
will
drama?cally
speed
up
anonymous
page
requests!
(Plus
it
has
26
essen:al
vitamins
&
minerals!)
@mikeherchel
Lots of authen@cated traffic slowing down your server?
• Authcache
h-p://drupal.org/project/authcache
Aoer
a
page
is
loaded
by
the
browser,
a
second
HTTP
request
may
be
performed
via
Ajax.
This
ini?ates
a
lightweight
DRUPAL_BOOTSTRAP_
SESSION
that
allows
SQL
queries
to
be
executed,
and
returns
any
user-‐customized
data
to
the
page
.
@mikeherchel
Complex data types slowing down your database?
• En?ty
Cache
h-p://drupal.org/project/en?tycache
Useful
ONLY
for
large
site
with
lots
of
fields
and
references
your
en?ty
types.
Mostly
useful
for
scalability.
Good
discussion
at
h-p://groups.drupal.org/node/292348
@mikeherchel
Modules to help troubleshoot Drupal performance issues
• Devel
h-p://drupal.org/project/devel
o Query
Log
o XHProf
support
(must
have
XHProf
installed
on
server)
o Page
Timer
o Memory
Usage
• Performance
Logging
and
Monitoring
h-p://drupal.org/project/performance
o Enables
awesome
performance
logs
o Can
log
directly
to
DB
-‐
only
do
this
on
dev
sites
o On
live
sites
can
log
to
cache
services
(memcache,
apc,
etc)
@mikeherchel
Spread your HTTP requests across mul@ple servers!
• 6
parallel
HTTP
requests
per
server
o Use
Google
CDN
for
Jquery!
Its
free
and
browser
may
already
have
it
cached!
h-ps://github.com/mherchel/bastard/blob/master/template.php
template.php
@mikeherchel
Spread your HTTP requests across mul@ple servers!
Use
a
Content
Delivery
Network!
CDNs
can
spread
assets
across
mul?ple
servers:
sta?c1.yourcdn.com
sta?c2.yourcdn.com
...
Also,
CDNs
can
serve
assets
from
loca?ons
that
are
physically
closer
to
you.
This
is
a
huge
win
in
the
war
against
latency!
THE ASSETS! CDN ALL
@mikeherchel
Efficient HTML Markup!
• Clean
your
HTML,
and
your
CSS
will
follow.
-‐
Lara
Swanson
at
h-p://alistapart.com/ar?cle/improving-‐ux-‐
through-‐front-‐end-‐performance
• Not
so
easy
to
do
in
Drupal!
So,
here's
some
easy
?ps:
o Create
or
use
a
minimal
base
theme.
Don't
get
stuck
with
unnecessary
wrapper
elements
(Looking
at
you
Omega
3.x!).
o Modify
Views
to
output
seman?c
HTML
Elements
o Or
use
the
Fences
Module!
h-p://drupal.org/project/fences
@mikeherchel
Lower your bandwidth!
• Make
sure
your
host
is
gzipping
sta?c
assets!
• Make
sure
sta?c
assets
are
able
to
be
cached
by
your
browser!
• Op?mize
your
images!
(use
that
image
api
op?mizer
module
or
do
it
manually)
• Use
JPGs
instead
of
PNGs
when
you
can
• Don't
use
a
lot
of
images!
• Don't
load
unnecessary
images
in
mobile
css
(progressive
enhancement)
• Use
responsive
image
solu?ons
o Borealis
Responsive
Images
(h-ps://drupal.org/project/borealis)
o Clientside
Adap?ve
Images
(h-ps://drupal.org/project/cs_adap?ve_image)
@mikeherchel
Efficient JavaScript!
• Pay
A-en?on
to
your
JS
performance!
• JS
execu?on
take
approx
10x
longer
on
mobile
devices
(due
to
less
RAM
and
CPU)
• Async
and
deferred
JS
execu?on
-‐
h-p://www.html5rocks.com/
en/tutorials/async/deferred/
and
h-p://peter.sh/experiments/asynchronous
-‐and-‐deferred-‐javascript-‐execu?on-‐explained/
• h-p://jsperf.com
-‐
aims
to
provide
an
easy
way
to
create
and
share
test
cases,
comparing
the
perform-‐
ance
of
different
JS
snippets
by
running
benchmarks.
@mikeherchel
Backend Resources
• Video:
An
Overview
of
Performance
&
Scalability
by
Nate
Haug
(This
is
awesome)h-p://drupalize.me/videos/overview-‐performance-‐scalability
• Every
damned
thing
on
2bits.com
h-p://2bits.com/
• ...including
Xen
vs
Virtuozzo
(Cloud
compu?ng) h-p://2bits.com/ar?cles/common-‐issues-‐and-‐solu?ons-‐dealing-‐cloud-‐
compu?ng-‐and-‐vps-‐performance-‐issues-‐drupal.html
@mikeherchel
Front-‐end Resources
• High
Performance
Web
Sites
Blog
-‐
Steve
Souders
(Lots
of
great
JS
op?miza?on
?ps)h-p://stevesouders.com/
• Presenta?on:
Even
Faster
Websites
(Steve
Souders) h-p://www.slideshare.net/souders/sxsw-‐even-‐faster-‐web-‐sites
• Let’s
Do
Simple
Stuff
to
Make
Our
Websites
Faster
(Chris
Coyier) h-p://css-‐tricks.com/video-‐screencasts/114-‐lets-‐do-‐simple-‐stuff-‐to-‐make-‐our-‐websites-‐faster/
mherchel
codenote
k1low
yutoy
oracle4engineer
mtx2s
yuya4
comucal
mosa_siru
h1kita
kazuhitotakahashi
yoshiitaka
kei_s
keathley
keavy
lara
sachag
jponch
jeffersonlam
andyhume
jonrohan
malarkey
destraynor
lauravandoore
productmarketing