Find the best tips and tricks for creating a high performing secure web pages

1. Tips & Tricks
to deliver high performing and secure web pages
GauravVerma, Harsh Agarwal

2. Why?
• Why do time and
performance matter?
• Why don’t we like to wait?
• Why does faster not always
mean better in the online
world?

3. PERFORMANCE OPTIMIZATION
process of improving the delivery speed of services, feedback or any
other type of response action in order to meet a user’s expectation.

4. Psychological time durations
• 0.1 to 0.2 seconds: range of the
maximum acceptable response time to
simulate instantaneous behavior
• 0.5 to 1 seconds: maximum
response time for immediate behavior
• 2 to 5 seconds: flow or optimal
experience as a state when people
experience concentration, absolute
absorption in an activity
• 5 to 10 seconds: user would still be
focused on their task but would
become easily distracted
10 seconds as the
absolute maximum time
of a user’s attention span

5. 20% RULE
• In 1834, Ernst Heinrich Weber,
postulated a law that defines
“Just Noticeable
Difference” (JND) as the
minimum difference in
stimulation that a person can
detect most of the time.
• Fechner applied the law to
the measurement of
sensations, setting the basis for
the science of psychophysics.

6. 20% RULE
• This work by Weber and
Fechner is known to us as
the Weber-Fechner Law.
• Practical experiments in
psychophysics show that
time intervals are prone to
a JND of between 7% to
18% on average for shorter
periods

7. 20% RULE
• Good rule of thumb is to
simplify the Weber-Fechner
Law into a 20% rule.
• In order for users to barely
see a difference in time
duration, it has to be
changed by a minimum of
20%

8. 5.0 seconds 4.5 seconds

9. 5.0 seconds 4.0 seconds

10. Regression allowance
• Technique also works in the
opposite direction
• If you are developing a feature that
slows down your web page, you
could apply the 20% rule to
determine whether the
performance decrease will be
noticed by users at all.
• Allowing our code to be a bit
slower without harming the user
experience is called regression
allowance.

11. Neutralization
Time neutralization occurs when the time difference between two services is
noticeable but does not influence the user’s preference of one service over another

12. • We cannot decrease the
search response time to 2
seconds.
• If 2 seconds is out of reach,
the next best solution would
be to use the 20%
• Rule of regression allowance
relative to the competitor’s
time: 2 seconds + 20% = 2.4
seconds.
But if we cannot achieve 2 seconds, then 2.4 seconds is probably also
out of reach.

13. • Thankfully, there exists a
“magical” psychological
threshold.
• Time durations longer than
this threshold will be
perceived by the user as
being closer to 5 seconds.
• Time durations shorter
than that threshold will be
perceived as being closer to
2 seconds.
This threshold proved to be predictable and is found at the
geometric mean, instead of an arithmetical one.
√(2 × 5) ≈ 3.2 seconds

14. Performance Perceptionis all about

15. Preemptive start
• dns-prefetch:This is useful for pre-resolving
domain names that are found lower down on
the page.
• preconnect:This hint is used not only to pre-
resolve a domain name, but to initiate a full
connection handshake.
• prefetch:This hint has the lowest priority and is
used to prefetch assets or resources required
for future navigation.
• prerender:This enables background pre-
rendering of an entire page, with all of its assets.

16. SHOWING PROGRESS
is important

17. • Instantaneous (0.1–0.2s): No
need for any activity indicator.
• Immediate (0.5–1s): spinners or
very basic progress indicator
• Optimal experience (1.0-5.0s):
optimal indicator would be a class D
or a simplified class A indicator –
there is no need to draw a user’s
attention to additional information.
• Attention Span (5-10s): we
should show a dynamic indicator of
class A or B where the advance of
the process is clear.

18. FrontEnd Performance
Tips &Tricks

19. Be 20% faster than your fastest competitor.
• Focus on important metrics
other than full-page loading
time.
• First meaningful paint - the
time required for a page to
display its primary content
• Time to interactive - the
time at which a page
appears to be ready
enough that a user can
interact with it
UsefulTools:
•WebpageTest
•Lighthouse by Google
•Pagespeed Insights

20. 100-millisecond response time, 60 frames per second.
• Do your best to provide
feedback in less than 100
milliseconds after initial
input.
• Each frame of animation
should be completed in less
than 16 milliseconds,
thereby achieving 60 frames
per second
• Because the browser needs
time to paint the new
frame to the screen your
code should finish executing
before hitting the 16.6
milliseconds mark.

21. First meaningful paint under 1.25 seconds
• Your ultimate goal should
be a start rendering time
under 1.0 second and a
SpeedIndex value under
1000 (on a fast connection)
• For the first meaningful
paint, count on 1250
milliseconds at most.
• For mobile, a start
rendering time under 3
seconds for 3G on a mobile
device is acceptable.

22. Progressive enhancement
• Keeping progressive
enhancement as the guiding
principle of your front-end
architecture and
deployment is a safe bet
• Design and build the core
experience first, and then
enhance the experience
with advanced features for
capable browsers

23. Accelerated Mobile Page
• You can achieve good
performance without them,
but AMP does provide a
solid performance
framework with a free
content delivery network
(CDN)
• You could build progressive
web AMPs, too.

24. Consider micro-optimization and progressive booting
• Display skeleton screens instead
of loading indicators.
• Look for modules and
techniques to speed up the
initial rendering time
• Use server-side rendering to
get a quick first meaningful
paint.
• Also include some minimal
JavaScript to keep the time-to-
interactive close to the first
meaningful paint.

25. Are HTTP cache headers set properly?
• Double-check that expires,
cache-control, max-age and
other HTTP cache headers
have been set properly.
• If resources are static, they
should be cached
indefinitely - you can just
change their version in the
URL when needed.
• If possible, use Cache-
control: immutable,
designed for fingerprinted
static resources, to avoid
revalidation *
* Support only in Firefox

26. Limit third-party libraries, and load JavaScript asynchronously.
• As developers, we have to
explicitly tell the browser
not to wait and to start
rendering the page.
• The way to do this for
scripts is with the defer and
async attributes in HTML
• In practice, it turns out we
should prefer defer to async
• limit the impact of third-
party libraries and scripts,
especially with social sharing
buttons and <iframe>
embeds

27. Are images properly optimized?
• As far as possible, use
responsive images with
srcset, sizesand the
<picture> element
• mozJPEG improves the
start rendering time by
manipulating scan levels
• Pingo for PNG, Lossy GIF
for GIF and SVGOMG for
SVG.
For background images,
exporting photos from
Photoshop with 0 to 10% quality
can be absolutely acceptable as
well.

28. Are web fonts optimized?
• start rendering text in the fallback right away, and load fonts
asynchronously
• You might be able to get away with locally installed OS fonts as
well.
• If you can’t serve fonts from your server and are relying on
third-party hosts, make sure to use Web Font Loader

29. Push critical CSS quickly
• To ensure that browsers
start rendering your page as
quickly as possible, add
critical CSS inline in the
<head> of the page.
• With HTTP/2, critical CSS
could be stored in a
separate CSS file and
delivered via a server push
without bloating the HTML.

30. 14 Rules for Faster-Loading Web Sites
• Make Fewer HTTP Requests
• Use a Content Delivery
Network
• Add an Expires Header
• Gzip Components
• Put Stylesheets at theTop
• Put Scripts at the Bottom
• Avoid CSS Expressions
• Make JavaScript and CSS
External
• Reduce DNS Lookups
• Minify JavaScript
• Avoid Redirects
• Remove Duplicate Scripts
• Configure ETags
• Make AJAX Cacheable

31. SECURITY

32. CROSS SITE SCRIPTING(XSS)

33. WHAT IS XSS ?
• XSS refers to client-side code injection attack
• Occurs when a web application makes use of
unvalidated or unencoded user input within the
output it generates.
• Most commonly using a script in JS.
• TwoType : Reflected, Persistent

34. HOW XSS WORKS ?
1.The attacker injects a payload in the website’s database by
submitting a vulnerable form with some malicious JavaScript

35. HOW XSS WORKS ?
2.The victim requests the web page from the website.

36. HOW XSS WORKS ?
3.The website serves the victim’s browser the page with the
attacker’s payload as part of the HTML body.

37. HOW XSS WORKS ?
4.The victim’s browser will execute the malicious script inside the
HTML body.

38. HOW XSS WORKS ?
In this case it would send the victim’s cookie to the attacker’s
server, after which the attacker can use the victim’s stolen cookie
for impersonation.

39. HOWTO STOP IT ?
X-XSS-Protection: 0 turns it off.

40. HOWTO STOP IT ?
X-XSS-Protection: 1 (Default) will filter out scripts that came
from the request - but will still render the page

41. HOWTO STOP IT ?
X-XSS-Protection: 1; mode=block (Recommended)
when triggered, will block the whole page

42. CONTENT SECURITY
POLICY(CSP)

43. WHY CSP ?
• CSP gives you a language to define where the
browser can load resources from.
• You can white list origins for scripts, images, fonts,
stylesheets, etc in a very granular manner.

44. EXAMPLE
You can also compare any loaded content against a
hash or signature.

45. HOW ?

46. EXAMPLES

47. X FRAME OPTIONS

48. WHY?
• Clickjacking is a thing
• Eg: Sharing or liking links on Facebook
• PlayingYouTube videos to gain views
• Downloading and running a malware
• Making users follow someone onTwitter

49. EXAMPLE
Hijacking camera/microphone by loading this page in an invisible
iframe, and tricking user into altering the security settings of Flash

50. HOWTO STOP IT?

51. X CONTENT TYPE OPTIONS

52. WHAT DOES IT DO?
• MIME sniffing is browser feature.
• Browsers inspect the contents while ignoring the
content type header.
• This might open XSS vulnerability.
• X-Content-Type-Options overrides the default
browser behaviour.

53. HOW ?

54. COOKIES

55. THE FINE PRINT
• There are three different options for cookies that
you should be aware of.
• secure; will only be served over HTTPS only
• HttpOnly; prevents js from accessing cookies
• SameSite; helps defend against CSRF attacks.

56. THE FINER PRINT
• SameSite cookies are still experimental and not
yet supported by all browsers.
• If you use a cookie only to identify a server-side
session, the HttpOnly flag should be set.

57. CROSS SITE REQUEST
FORGERY (CSRF)

58. CSRF EXAMPLE

59. CSRF EXAMPLE

60. HOWTO STOP IT ?
• SynchronizerTokens
• Any state changing operation requires a secure
random token
• Token is unique per user session
• Cryptographically secure large random value

61. HOWTO STOP IT?
• Double Submit Cookie
• SameSite cookie attribute
• Require User Interaction

62. THANK YOU