Tips & Tricks to deliver high performing secure web pages

List of Do's and Don'ts you should follow to improve performance and security of your website.

Transcript

1. Tips & Tricks to deliver high performing and secure web pages Gaurav Verma, 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 Perception is 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 Useful Tools: •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 the Top • 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. • Two Type : 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. HOW TO STOP IT ? X-XSS-Protection: 0 turns it off.
40. HOW TO STOP IT ? X-XSS-Protection: 1 (Default) will filter out scripts that came from the request - but will still render the page
41. HOW TO 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 • Playing YouTube videos to gain views • Downloading and running a malware • Making users follow someone on Twitter
49. EXAMPLE Hijacking camera/microphone by loading this page in an invisible iframe, and tricking user into altering the security settings of Flash
50. HOW TO 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. HOW TO STOP IT ? • Synchronizer Tokens • Any state changing operation requires a secure random token • Token is unique per user session • Cryptographically secure large random value
61. HOW TO STOP IT? • Double Submit Cookie • SameSite cookie attribute • Require User Interaction
62. THANK YOU