Using browser settings for performance
•
0 likes•581 views
The document discusses various browser settings and APIs that can be used for performance optimizations on websites. It covers techniques like using JavaScript to load different video files for mobile vs desktop, detecting mobile browsers, respecting the prefers-reduced-motion media feature, and proposed new media features in CSS5. It also discusses the DonotTrack header, high contrast mode, dark mode, JavaScript modules, the Network Information API, and Client Hints HTTP headers.
Report
Share
Related slideshows
Using browser settings for performance
- 1. USINGBROWSERSETTINGS FORPERFORMANCE WebPerfDays Amsterdam 2018 Walter Ebert @walterebert mastodon.social/@walterebert Image: https://flic.kr/p/79eyNM
- 2. THEBEGINNING: BACKGROUNDVIDEOS <video autoplay loop muted playsinline controls> <source src="video.webm" type='video/webm;codecs="vp9,opus"'> <source src="video.mp4" type="video/mp4"> </video>
- 3. MOBILE <video autoplay loop muted playsinline controls> <source src="vid.mp4" media="(min-width: 1280px)" type="video/mp4"> <img src="screenshot.jpg" alt="Video screenshot"> </video>
- 4. MOBILE Problem: Video media query support has been removed from Google Chrome 34+ <video autoplay loop muted playsinline controls> <source src="vid.mp4" media="(min-width: 1280px)" type="video/mp4"> <img src="screenshot.jpg" alt="Video screenshot"> </video>
- 5. LOADWITHJAVASCRIPT <video id="video" preload="none" loop muted playsinline controls poster="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.o src="small.mp4" </video> <script> var video = document.getElementById('video') if (is_mobile()) { video.setAttribute('poster', 'screenshot.jpg') } else { video.setAttribute('src', 'large.mp4') video.play() } </script>
- 6. ISMOBILE? <script> function is_mobile() { var mobile = true if ( !navigator.userAgent.match(/Mobi/) || window.screen.width > 1599 || window.matchMedia('(min-width: 1280px)').matches ) { mobile = false } return mobile } </script>
- 7. REDUCEDMOTION Safari, Firefox <script> var autoplay = true if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { autoplay = false } </script>
- 9. DONOTTRACK Ignoring DNT is a (potential) GDPR violation HTTP Request Header DNT: 1 <?php if (empty($_SERVER['HTTP_DNT'])) { echo '<script src="trackme.js" async></script>'; }
- 10. HIGHCONTRASTMODE(EDGE) <style> @media screen and (-ms-high-contrast: active) { /* All high contrast styling rules */ } </style> <script> if (window.matchMedia('(-ms-high-contrast: active)').matches) { // High contrast code } </script> https://msdn.microsoft.com/library/Hh771830
- 11. DARKMODE(SAFARI) <style> @media (prefers-color-scheme: dark) { // Dark mode code } </style> <script> if (window.matchMedia('(prefers-color-scheme: dark)').matches) { // Dark mode code } </script>
- 12. JAVASCRIPTMODULES <script type="module" src="main.mjs"></script> <script nomodule src="fallback.js"></script>
- 13. JAVASCRIPTMODULES Or maybe, no JS for old browsers <script type="module" src="main.mjs"></script>
- 14. NETWORKINFORMATIONAPI <script> var connection = navigator.connection || navigator.mozConnection || n if ( connection && ( connection.type === 'ethernet' || connection.type === 'wifi' || connection.type === '4g' ) ) { // Do something } </script>
- 16. CLIENTHINTS HTTP Request Headers Accept: image/webp,image/*,*/*;q=0.8 Accept-CH: DPR, Width Accept-CH: Viewport-Width https://httpwg.org/http-extensions/client-hints.html https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/