Goals
● Understand the challenges of Web site performance
● Know how to test and diagnose pages
● Accelerate page loading
● Fluidify the user experience
● Implement a performance monitoring policy
contents
Introduction
Performance and Business
● Only a technical problem?
● The display time / turnover ratio
● SEO: Google's vision
● Ergonomics: the perceived performance of the user
The future
● 4G and fiber
● The needs of the sites
Metrics, tools
● Why the total loading time is not enough
● Understanding Time To First Byte, Time To Render, Time To
Interaction, $ .ready ()
● Free diagnostic and monitoring tools
TP
● Clone of local customer sites
● Diagnose with WebPageTest, schedule tests
Backend or Frontend: where does the time go?
● ySlow, PageSpeed and Opquast checklists
● Make client-side profiling on all browsers
● Detect the danger of third-party widgets (Facebook, Google+,
Twitter ...)
● What do your users see with Real User Monitoring
● Use Google Analytics, Boomerang JS, Navigation API
● Business Tools
Feel and understand the limits of HTTP
● The problems of HTTP 1.1 and TCP
● Flow and latency: what influence?
● Change protocol? HTTP2 and SPDY
How does a browser work?
● Which OS / browsers to test?
● Parallelization, Pipelining, Keep-Alive
TP server configuration:
● Keep-Alive
● gzip
The trap of the domain-sharding technique
R & D Tools: Browserscope and Cuzillion
The critical path, the blocking resources
● CSS and JavaScript: what to do?
● TP: actions on CSS and JavaScript files
● TP: basic action on fonts
Master the cache
● TP: activation of the cache
● Common problems or "Empty your cache" syndrome
● Standard invalidation (eTag and other)
● Master the user cache
● TP: Implementing an effective cache system
The ultimate client cache: HTML5 offline
● Principle
● API
● Limits
Server cache solutions
● Server cache solutions
● TP: The server flush technique
● The strategy of the semi dynamic page
● How to cheat with long delays on the server side
● The example of Facebook
Knowing how to load JavaScript
● Loading at the top of the page
● Loading in the middle of the page
● Loading at the bottom of the page
● Native attributes async and defer
● Asynchronous loading, its libraries
● Loading strategies
TP: Loading JS by modules
● Other loading methods (XHR, LocalStorage, lazyevaluate ...)
● The problem of advertisements
Monitor performance
● Example of installing WebPageTest Monitor
● TP: schedule tests
● Open-source complements: Graphite and company
● The typical user connection?
● TP: complex navigation scenarios
Images
● Using CSS3 and unicode characters
● Embed the content of an image in CSS or HTML
● The spriting technique
● Just In Time loading
● Compression (manual and automatic)
● TP: to do without images on mobile. Test the tools of
compression
Third party code
● Understand the jamming impact of Google+, Facebook, Twitter
● The problem of ads, trackers and widget
● The solution: asynchronous
● TP: safely include third-party code
● The tool: SPOF-O-MATIC
Fluid interfaces, slowing down a page
● tool to monitor, symptoms to observe
● experiment with old browsers or modern
● off-DOM manipulation
● setTimeout (0), the unknown savior
● delegation of events
● Client-side profiling tools
Modern techniques with HTML5
● WebSocket and Server Sent Event
● localStorage
● WebWorkers
● Prefetch, prerender, next
The little things that hurt
● CSS @import
● CSS filters
● the dimensions of the images
● favicon
● 404
● redirects
● CSS expressions
● the charset
● .htc scripts
Advanced solutions
● Do I have to pay for a CDN?
● domain sharding: for which situations?
● Content loading strategies
● Organize CSS in modules?
● The influence of iframes
● Build an aggressive cache on mobile
Site analyzes
Conclusion
● Tour participants and critics on training
received
Good to know
● Type of action: Acquisition of knowledge
● Training resources: Face-to-face training - 1 position per trainee - 1 video projector - Course support provided at each
trainee
● Teaching methods: Presentations - Practical cases - Synthesis
● Validation: Validation exercises - Certificate of internships
Organizer
Oxiane
Where does it take place?
20 Rue de l'Industrie
Windhof
Luxembourg
You could like it :
find out about all the networking events and trainings tailored for you!
find out about all the networking events and trainings tailored for you!
