Web Performance in Action: speed up your websites

Why should you care
about web
performance?
Save 42% off Web
Performance in
Action with code
sswagner at
manning.com.

What is web performance?
You’ve probably heard about performance as it relates to websites,
but what is it and why should you and I care about it?
Web performance refers primarily to the speed at which a website
loads. This is important because shorter load times improve the user
experience for your site on all internet connections.

Why is web performance important?
A faster website means that the user is more likely to see what your
website has to offer. This helps you achieve goals as simple as
getting more users to visit and read your website’s content, or as
lofty as getting users to take action.
Slow websites test users’ patience and might result in them
abandoning your website before they ever see what it has to offer.

If your website is a major source of revenue, it literally pays to take
stock of your site’s performance. If you have an e-commerce site or a
content portal that depends on advertising revenue, a slow site
affects your bottom line.
Web Performance in Action teaches you all about web performance,
basic performance-boosting techniques, and ways to apply them in
order to optimize a client’s single-page website.

People more likely to interact with content that loads quickly. By
making your site faster, you improve the user experience by
speeding up the delivery of content.
In addition, the performance of your website impacts not only your
users, but also your website’s position in Google search results.

Slow websites also have a measurable effect on user engagement.
On e-commerce sites in particular, nearly half of users expect a
website to load within 2 seconds. And 40% of users will exit if it
takes more than 3 seconds to load. A 1-second delay in page
response can mean a 7% reduction in users taking action
(https://blog.kissmetrics.com/loading-time).
This means not only a loss of traffic, but a loss of revenue.

Understanding web performance issues.
To understand why web optimization is necessary, you need to know
where the problem lies, and that’s in the basic nature of the way web
browsers and web servers communicate. When it’s said that web
performance focuses on making websites load faster, the primary
focus is on reducing load time.
Load time is the time it takes from when a user requests a website
and the moment it appears on their screen.

The mechanism driving load times is the time it takes for the server’s
response to reach the user after the user requests content.

There are several steps involved when a user requests a website and
each one incurs latency, i.e. the amount of time spent waiting for
requests to go from A to B and back to A.
One of the primary aims of web performance is to reduce latency
wherever possible. The amount of latency for a single request is
trivial, but loading practically any website involves more than a single
request for content.

Identifying areas of improvement.
To optimize a website, you need to identify areas where it could be
improved.
Chrome’s network tools can come in handy for analyzing the number
of requests on a page, the amount of data the page contains, and
the amount of time it takes for the page to load.
You can see a waterfall chart of a potential client’s website on the
next slide.

The kind of devices your users are using must also be taken into
account.

Optimizing a website.
Our goal is simple: reduce the amount of data transferred.
Having less data flying back and forth reduces latency, which means
faster load times. This reduction in data can be accomplished in a
number of ways.
Let’s take a look!

Optimizing a website – minifying assets.
Minifying assets is basically what it sounds like – making things
smaller. Minifying is a process by which all whitespace and
unnecessary characters are stripped from a text-based asset without
affecting the way that asset functions.
Whitespaces, line breaks, and other characters are there to help
people read code, but web browsers don’t need them.

Here is a
minification of a
CSS rule.

The CSS,
JavaScipt, and
HTML of a website
can all be
minified.
The chart on the
right shows load
times, pre and
post minification.

Optimizing a website – using server compression.
Server compression works the same as when you compress files (e.g.
for easier emailing). Web servers can accept and decompress content
on the user’s behalf.
This is useful because much downloaded content from website is
text, which compresses well.

By employing
server compression
you can reduce the
“weight” of your
page and the
amount of data
getting transferred.
This leads to faster
load times.

Optimizing a website – image optimization.
Image optimization has come a long way and today’s algorithms are
really good at reducing image size without losing image quality.
You can save a lot of space by optimizing images and there are a
whole host of tools available to help you reduce image size and
minimize undesirable side effects.

Here is an example of an image, pre and post
optimization.

We can save a lot
of space by
optimizing images,
and the result
looks basically the
same – as you can
see from the
previous slide.
Our load times are
getting faster!

Optimizing a website – the final “weigh in.”
Let’s pretend that we have been applying the methods we have
discussed to a theoretical client’s website.
Here is what we would have accomplished:

We have
significantly
reduced the size of
the website and
latency.
As you can see,
Load times
improved by
approximately 70%
for all visitors on

Your optimization efforts have improved load times for the client’s
website by nearly 70% for all users, regardless of which device they
may be using to visit the site.
As you can see, even basic performance-tuning techniques can be
effective and can improve the user experience in a measurable way.
The best part is, we’ve only scratched the surface.
You can download the first chapter of Web Performance in Action
here, for free!

Make your website
fast as it can be!
Save 42% off Web
Performance in Action with
code sswagner at
manning.com.
Also see:

Web Performance in Action: speed up your websites

Recomendados

Recomendados

Más contenido relacionado

Más de Manning Publications

Más de Manning Publications (20)

Último

Último (20)

Web Performance in Action: speed up your websites