Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Optimize Everything with Jason Nickerson

264 Aufrufe

Veröffentlicht am

Presented at JoomlaDay Chicago 2019.
In this session, Jason Nickerson will showcase the current state of SEO and Website Optimization and the issues facing Joomla users.

By the end of Jason’s talk you will learn how to optimize your Joomla site from hosting to core.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Optimize Everything with Jason Nickerson

  1. 1. Optimize Everything! JoomlaDay Chicago 2019 Jason Nickerson
  2. 2. GET SOCIAL SHARE THE JOOMLA LOVE #jday19chi
  3. 3. PART ONE: DESIGNING FOR PERFORMANCE Jason Nickerson OPTIMIZE EVERYTHING
  4. 4. WEB DESIGN IN THE 90’s Jason Nickerson
  5. 5. 5 WEB DESIGN IN THE 2000’s Jason Nickerson
  6. 6. 6 WEB DESIGN 2012+ Jason Nickerson
  7. 7. DESIGNING FOR PERFOMANCE: HOSTING Jason Nickerson HOSTING
  8. 8. Joomla friendly hosting Shared hosting plans Dedicated servers Cloud based servers Price vs Performance Cloud Access Rochen A2 Hosting HostPapa No sharing of resources Security Flexibility Performance Scaling Unlimited is a lie All shared hosts oversell You are not number one You don’t matter You will out grow Cheap is never the answer Expensive isn’t better Research Know what you need DESIGNING FOR PERFOMANCE: HOSTING Jason Nickerson
  9. 9. PHP 7 DESIGNING FOR PERFOMANCE: HOSTING Jason NickersonOptimize Everything PHP7 IS 2 TIMES FASTER THAN PHP 5
  10. 10. DESIGNING FOR PERFORMANCE: IMAGES Jason Nickerson IMAGES
  11. 11. IMAGES CAN BE RESPONSIBLE FOR UP TO 70% OF A WEBSITES LOAD TIME DESIGNING FOR PERFORMANCE: IMAGES Jason Nickerson
  12. 12. IMAGE COMPRESSION: Image Compression is the most common solution for optimization of pictures, but there are other aspects to take into account before optimizing your images. ImageRecycle.com On the fly image optimization for Joomla with the ImageRecycle Joomla Component. DESIGNING FOR PERFORMANCE: IMAGES Jason Nickerson
  13. 13. DESIGNING FOR PERFORMANCE: IMAGES Jason Nickerson
  14. 14. SIZE MATTERS DESIGNING FOR PERFORMANCE: IMAGES Jason NickersonDesigning for Performance with Joomla
  15. 15. BACKGROUND IMAGES 1280 x 863 JPG : 168 KB DESIGNING FOR PERFORMANCE: IMAGES Jason NickersonDesigning for Performance with Joomla
  16. 16. BACKGROUND SIZE: COVER Scale the background image to be as large as possible so that the background area is completely covered by the background image. BACKGROUND SIZE: COVER DIV { background: url (demo.jpg); background-size:cover; } DESIGNING FOR PERFORMANCE: IMAGES Jason NickersonDesigning for Performance with Joomla
  17. 17. BACKGROUND SIZE: COVER 211 KB SAVED! DESIGNING FOR PERFORMANCE: IMAGES Jason Nickerson
  18. 18. THINK MOBILE DESIGNING FOR PERFORMANCE: IMAGES Jason NickersonDesigning for Performance with Joomla
  19. 19. HTML5 PICTURE Using the HTML5 picture syntax to deliver various sizes of images per screen size is a quick and easy method to save load time. USING THE <PICTURE> SYNTAX <picture> <source media="(min-width: 650px)" srcset="images/kitten-stretching.png"> <source media="(min-width: 465px)" srcset="images/kitten-sitting.png"> <img src="images/kitten-curled.png" alt="a cute kitten"> </picture> DESIGNING FOR PERFORMANCE: IMAGES Jason NickersonDesigning for Performance with Joomla
  20. 20. ADAPTIVE IMAGES Adaptive Images detects your visitor's screen size and automatically creates caches and delivers device appropriate re- scaled versions of your web page's embedded HTML images. DESIGNING FOR PERFORMANCE: IMAGES SOLUTIONS: XT Adaptive Images XT Adaptive Images for Joomla is a port of adaptive-images.com script for Joomla Jason Nickerson Adaptive Images adaptive-images.com offers a PHP and Javascript solution for full adaptive images
  21. 21. DESIGNING FOR PERFORMANCE: VIDEOS Jason Nickerson VIDEOS
  22. 22. EMBED CODES CAN BE RESPONSIBLE FOR UP TO 500KB OF A WEBSITES LOAD TIME DESIGNING FOR PERFORMANCE: VIDEOS Jason Nickerson
  23. 23. DESIGNING FOR PERFORMANCE: VIDEOS Jason Nickerson
  24. 24. EMBED ISSUES: Embed codes allow us to use videos that we have on our Video Channels such as YouTube and Vimeo, but what are the known issues with Embed codes? EXTERNAL CALL Embed codes rely on the Video Providers delivery PRE-LOADING Pre-loading the videos have a huge impact of performance. NOT RESPONSIVE Embed codes use a fixed with iframe or source call that is not responsive by default DESIGNING FOR PERFORMANCE: VIDEOS Jason Nickerson
  25. 25. PRE-LOADING: The pre-loading and responsive issue can be resolved with HTML5, CSS, and just a drop of JavaScript to cancel the pre-load of the video and only display the preview image until clicked. PRE-LOADING: HTML <div class="youtube-player" data-id="VIDEO_ID"></div> DESIGNING FOR PERFORMANCE: VIDEOS Jason Nickerson
  26. 26. PRE-LOADING: JS document.addEventListener("DO MContentLoaded", function() { var div, n, v = document.getElementsByClassNa me("youtube-player"); for (n = 0; n < v.length; n++) { div = document.createElement("div") ; PRE-LOADING: The pre-loading and responsive issue can be resolved with HTML5, CSS, and just a drop of JavaScript to cancel the pre-load of the video and only display the preview image until clicked. DESIGNING FOR PERFORMANCE: VIDEOS Jason Nickerson
  27. 27. PRE-LOADING: CSS .youtube-player { position: relative; padding-bottom: 56.23%; /* Use 75% for 4:3 videos */ height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; } .youtube-player iframe { PRE-LOADING: The pre-loading and responsive issue can be resolved with HTML5, CSS, and just a drop of JavaScript to cancel the pre-load of the video and only display the preview image until clicked. DESIGNING FOR PERFORMANCE: VIDEOS Jason Nickerson
  28. 28. DOWNLOAD THE FREE PLUGIN Quick YouTube DESIGNING FOR PERFORMANCE: VIDEOS PRE-LOADING: The pre-loading and responsive issue can be resolved with HTML5, CSS, and just a drop of JavaScript to cancel the pre-load of the video and only display the preview image until clicked. Jason Nickerson YOUTUBE LITE JS http://www.labnol.org/ internet/light-youtube- embeds/27941/
  29. 29. HTML5 PRE LOAD: HTML5 allow us to use a simple syntax to display MP4 videos. Using the pre-load ’none’ option with a poster image will give better performance. PRE-LOADING: HTML <video class="responsive" controls preload="none" width="640" height="264" poster="http://video- js.zencoder.com/oceans-clip.png"> <source src="http://video- js.zencoder.com/oceans-clip.mp4" type="video/mp4" /> </video> DESIGNING FOR PERFORMANCE: VIDEOS Jason Nickerson
  30. 30. DESIGNING FOR PERFORMANCE: CSS3 @MEDIA USEAGE: Breakpoints are most used for devices and by calling the device CSS for the desktop view is only bloating your load. The solution is as easy as creating a separate breakpoint.css and using a @media to call it only when needed! BREAKPOINT.CSS CALL <link rel='stylesheet' media='(max-width: 1200px)' href='css/responsive.css' /> Jason Nickerson
  31. 31. DESIGNING FOR PERFORMANCE: EXTERNAL CALLS Jason Nickerson EXTERNAL CALLS
  32. 32. EXTERNAL CALLS: External Calls from your site can be a huge issue when it comes to website performance. You should always remove any un- needed 3rd party and duplicate JavaScript calls. DESIGNING FOR PERFORMANCE: EXTERNAL CALLS WIDGETS Widgets from other sites can make a huge impact DUPLICATE JAVASCRIPT CALLS Make sure there are not multiple calls to the same JavaScript library. 3RD PARTY CALLS 3rd party codes that make external calls Jason Nickerson
  33. 33. DESIGNING FOR PERFORMANCE PART TWO: Making the lower case god happy Jason Nickerson
  34. 34. jayjoomler jnickersontampaJason Nickerson https://developers.google.com/speed/pagespeed/insights/ Jason Nickerson
  35. 35. Jason Nickerson
  36. 36. Optimization Score • Good: The page applies most performance best practices and there is little headroom for further optimization. The page scores 80 or above. • Medium: The page is missing some common performance optimizations and there is medium headroom for optimization. The page scores between 60 and 79. • Low: The page is not optimized and there is fairly large headroom for optimization. The page scores between 0 and 59. Jason Nickerson GOOGLE PAGE SPEED
  37. 37. • Avoid landing page redirects • Enable compression • Improve server response time • Leverage browser caching • Minify resources • Optimize images • Optimize CSS Delivery • Prioritize visible content • Remove render-blocking JavaScript GOOGLE PAGE SPEED Jason Nickerson What google wants
  38. 38. Avoid redirects • example.com → m.example.com/home - multi-roundtrip penalty for mobile users. • example.com → www.example.com → m.example.com - very slow mobile experience. Jason Nickerson GOOGLE PAGE SPEED
  39. 39. Enable Compression Joomla Global Configuration Settings Jason Nickerson GOOGLE PAGE SPEED
  40. 40. Minify Code Jason Nickerson GOOGLE PAGE SPEED
  41. 41. Enable Cache Joomla Global Configuration Settings Jason Nickerson GOOGLE PAGE SPEED
  42. 42. Enable Cache Server side cache with cPanel Jason Nickerson GOOGLE PAGE SPEED
  43. 43. Image optimization Jason Nickerson GOOGLE PAGE SPEED
  44. 44. Deferred Stylesheets <html>   <head>     <style>       .blue{color:blue;}     </style>     </head>   <body>     <div class="blue">       Hello, world!     </div>     <noscript id="deferred-styles">       <link rel="stylesheet" type="text/css" href="small.css"/>     </noscript>     <script>       var loadDeferredStyles = function() {         var addStylesNode = document.getElementById("deferred-styles");         var replacement = document.createElement("div");         replacement.innerHTML = addStylesNode.textContent;         document.body.appendChild(replacement)         addStylesNode.parentElement.removeChild(addStylesNode);       };       var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||           window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;       if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });       else window.addEventListener('load', loadDeferredStyles);     </script>   </body> </html> Jason Nickerson GOOGLE PAGE SPEED
  45. 45. Javascript async By default JavaScript blocks DOM construction and thus delays the time to first render. To prevent JavaScript from blocking the parser we recommend using the HTML async attribute on external scripts. <script async src=“my.js"> Jason Nickerson GOOGLE PAGE SPEED
  46. 46. Beware of CDN loads Jason Nickerson GOOGLE PAGE SPEED
  47. 47. Optimization Extensions Jason Nickerson
  48. 48. Optimization Extensions Jason Nickerson
  49. 49. Jason Nickerson
  50. 50. THANK YOU jayjoomler jnickersontampaJason Nickerson
  51. 51. jayjoomler jayblaqtampaJason Nickerson QUESTIONS ? jayjoomler jnickersontampaJason Nickerson

×