This document provides tips for optimizing website performance in order to improve loading speeds. It recommends using tools to analyze site speeds and calculate an optimization budget. Key optimizations include image optimization by choosing the right size and format, optimizing HTML, reducing HTTP requests by inlining JavaScript and combining files, minifying CSS and JavaScript, using a CDN, reducing time to first byte, avoiding redirects and errors, implementing caching, prefetching and preconnecting, optimizing web fonts, using GZIP compression, choosing a fast infrastructure, adopting HTTP/2, implementing hotlink protection, and serving scaled images. The document stresses that website speed is crucial because visitors have little patience and will leave slow sites.

1. OptimizingWebsite Performance
It’s all about speed!

2. Website performanceis crucial.Website visitors
become moredemanding and less patient
everyday. Iftheyvisit yourwebsite and it isn’t fast
enoughthey’ll leave…forever! And,they’ll tell
their friends about it.
Accordingto the Aberdeen Group 1 second delay
inpage load time results in:
11%fewer page views
16%decrease in customer satisfaction
7%loss in conversions.*
2
*Source: The AberdeenGroup

3. 3
Before youstart youneed to do the following things:
• Use a website speed tool such as KeyCDN Speed Test, Google PageSpeed Insights, Pingdom or
GTmetrixto analyzethe overall speed of yourwebsite.
• Load your site to see what might be causing problems. Tools like blitz, Load Impact, Loader,
BlazeMeter and Wonder Networkwill help youdo this.
• Calculate yourWebsite Performance Optimization budget.
Once, you’vedone the above you can proceed to optimizing yourwebsite.

4. 4
1
Image Optimization

5. 5
A 2016 HTTP Archive* report found that on average 64% of a website’s page weight is made up of
images.
Obviously larger images result on longer load times. Hence, you need to choose the right size and
format for theimages you’reusing.
Moreover, youhave to makesureyou’reresizing images directly instead of usingHTML scaling.
*Source: HTTP Archive

6. 6
2
Optimize your HTML

7. 7
• Don’t copy/ paste from other apps since they can generate lots of complex HTML that will slow
down yoursite’s loading times.
• Use simple structures in yourHTML and remain standards compliant.
• While whitespace is good for readability, bare inmind that it adds to the overall size of yourpage.

8. 8
3
ReduceHTTP Requests

9. 9
Yourbrowser uses HTTPto bring data from a server and this generates requests & responses between a
client and a host. Themore HTTPrequests your website makesthe slower the load time will be. Youcan
resort to the following solutions inorder to reducethe numberof requests:
• Inlineyour Javascript
• UseCSSsprites
• Reduce assets such as third-party plugins
• Utilize features suchas async and defer
• Combine CSSand JSfiles.

10. 10
4
Minify CSS &Javascript

11. 11
Removeunnecessarycharacters from yourHTML, JavaScript &CSSsuchas:
• White space characters
• New linecharacters
• Comments
• Block delimiters
• Unusedcode
This will speed up yourload times since it reducestheamount of code that has to berequested from the
server.
Some useful onlineresources to use arethe following:
 Clean CSS: CSSformatter and optimizer
 JSCompress: Online Javascript compression tool
 YUICompressor: TheYahoo! Javascript and CSScompressor.

12. 12
5
Use of a CND to Reduce
Latency

13. 13
Content Delivery Networks (CDNs) are effective for serving upstatic content, includingimages, multimedia
and file downloads. Theyprovide high availability and performance. Consequently, theyspeed up delivery of
yourassets around the globe and dramatically decrease yourlatency.

14. 14
6
Time To First Byte

15. 15
Time To First Byte (TTFB) is the measurement of the response time of your website, that is the time it
takes for yourbrowser to start receiving information after it has requested it fromthe server.
HTTPrequesttime
Processrequest
time
HTTPresponsetime
TTFB
Theuse of CDN, a fast web host and reliable DNS dramatically reduces yourTTFB.

16. 16
7
Avoid Redirects &
Bad Requests

17. 17
Check for 301 redirects and HTTP 404 errors (Page Not Found). These generate additional Round Trip
Times (RTTs) and hence double the time required to load the initial HTML document before the
document even starts loading other assets.

18. 18
8
Caching

19. 19
Browser caching
Leveraging yourbrowser cacheis crucial
for assets that rarely change.It is
recommendedto havea maximum of
seven days in such cases.
Servercaching
This usually done on highertraffic sites.
Varnishcache offers a verypowerful
solution whencombined with a caching
plugin and CDN.

20. 20
9
Prefetch
&
Preconnect

21. 21
• Domain name prefetching is a good solution resolving domain names before a user actually follows
a link.
• Preconnecting allows the browser to set up early connections before an HTTP request is sent to the
server.
Connections such as: DNS Look up, TCP Handshake & TLS Negotiation can be initiated beforehand,
eliminating roundtrip latency and saving time for users.

22. 22
10
Web FontPerformance

23. 23
60% of websites are using custom fonts. The disadvantage of web fonts is that they add extra HTTP
requests to external resources and renderblocking.Tips for better font performance:
1
2
3
4
5
Prioritizebased on browser support
Choose only the styles youneed
Host fonts locally or prefetch
Store in local storage with Base 64encoding
Keep charactersets down to a minimum

24. 24
11
GZIP Compression

25. 25
Use GZIP compression to decrease the size of page content. GZIP compresses web pages, CSS and
Javascript at server level before sending them to the browser. In fact it can save from 50% to 80%
bandwidth and will significantly increasethe website’s loading speed.

26. 26
12
Infrastructure

27. 27
A fast web host is the backbone of your website. You can opt for a VPS such as Digital Ocean or Linode;
or for a managed host if you’re using Wordpress or Drupal such as WPHostingSpot, Kinsta, Pantheon or
Rochen.

28. 28
13
14
15
HTTP/2
Adopt it across the board with hugeperformance benefits. You’llneed a SSL certificate &a server that
supports HTTP/2.
Hotlink Protection
Restrict HTTPreferrersin order to prevent others from embedding yourassets on other sites.
ServeScaled Images
Always upload yourimages at scale and don’t relyon CSSto sizethem down.

29. 29
Optimizing your website is a tricky and ongoing business since it is your virtual image towards the
outside world. Many elements need to be taken into consideration and treated carefully. What you need
to rememberis: it’s all about speed. Andone major detail: no one is going to wait more than
1 second
for your website to load and oncetheyleave theywont be coming back!
Good luckand don’t hesitate to contact us if youneed help!
To Conclude

30. 30
Wetake ourclients by thehand and turnthem to successful solution owners.
Weoffer digital transformation, web and nativeapp design and development, machinelearning,
analytics and data miningservices for full end-to-endmobile solutions ina varietyof industries.
Weinvite our clients to share their business with a mobile world.
Specialties: Digital Strategy and Transformation,User Experience Design, Digital Project Management,
Software Engineering, App Development, Cloud Services, Data Sciences &MachineLearning, and
AugmentedReality.
Visit us at www.publisto.com