{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: Ramesh Elaiyavalli","description":"The latest articles on DEV Community by Ramesh Elaiyavalli (@ramesh).","link":"https:\/\/dev.to\/ramesh","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F408832%2F2544e2dd-91f6-4a2b-84ec-3cac55bcfc72.png","title":"DEV Community: Ramesh Elaiyavalli","link":"https:\/\/dev.to\/ramesh"},"language":"en","item":{"title":"Perfecting PageSpeed \u26a1\ufe0f\ud83d\ude80","pubDate":"Sun, 02 Aug 2020 02:28:03 +0000","link":"https:\/\/dev.to\/srclogix\/perfecting-pagespeed-1in1","guid":"https:\/\/dev.to\/srclogix\/perfecting-pagespeed-1in1","description":"<p>PSI - pounds per square inch? You are thinking about tire pressure, aren't you?\ud800\udccf\ud83d\ude00 We all know how important that is for running your vehicle.<\/p>\n\n<p>There is another kind of <strong>PSI<\/strong>. Google's Page Speed Insights. <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\">https:\/\/developers.google.com\/speed\/pagespeed\/insights<\/a><\/p>\n\n<p>Pagespeed Insights gives you valuable observations on your site's performance, across desktop and mobile devices. <\/p>\n\n<p>Google's PSI <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">tool<\/a> internally leverages <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse?hl=en-US\">Google LightHouse API.<\/a><\/p>\n\n<p><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--aPxxNGCp--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/srclogix.tk\/blog\/perfectpagespeed\/images\/google-lighthouse.webp\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--aPxxNGCp--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/srclogix.tk\/blog\/perfectpagespeed\/images\/google-lighthouse.webp\" alt=\"alt text\"><\/a><\/p>\n\n<h1>\n  \n  \n  <strong>Pagespeed drives:<\/strong>\n<\/h1>\n\n<ul>\n<li>Excellent user experience.<\/li>\n<li>Reduced bounce rates.<\/li>\n<li>Improved SEO.<\/li>\n<\/ul>\n\n<h1>\n  \n  \n  <strong>Improving PageSpeed<\/strong>\n<\/h1>\n\n<p><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--vCk9Fsq1--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/media-exp1.licdn.com\/dms\/image\/C561BAQE1LwRh-GBnTw\/company-background_10000\/0%3Fe%3D1596420000%26v%3Dbeta%26t%3DF4iJiEZaD6Fbwlmf5PLrstHU_LglS81sTApY2y5T0jI\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--vCk9Fsq1--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/media-exp1.licdn.com\/dms\/image\/C561BAQE1LwRh-GBnTw\/company-background_10000\/0%3Fe%3D1596420000%26v%3Dbeta%26t%3DF4iJiEZaD6Fbwlmf5PLrstHU_LglS81sTApY2y5T0jI\" alt=\"alt text\"><\/a><\/p>\n\n<p>Upping speed is time-consuming &amp; frustrating, even for the smartest devs. <\/p>\n\n<p><a href=\"https:\/\/srclogix.com\/\">SourceLogix<\/a> <em>got a perfect score<\/em>. \ud83d\ude80\ud83c\udf7e\ud83c\udf89\ud83c\udf8a\ud83c\udf88<\/p>\n\n<ul>\n<li>Performance - 100\/100<\/li>\n<li>Accessibility - 100\/100<\/li>\n<li>Best Practices - 100\/100<\/li>\n<li>SEO - 100\/100<\/li>\n<li>Progressive Web App - 100\/100<\/li>\n<\/ul>\n\n<p><strong>Hard to believe?<\/strong> Run Google LightHouse from Dev Tools. <\/p>\n\n<p>***Disclaimer: <em>Mileage may vary depending on network conditions, browser extensions and several other factors.<\/em><\/p>\n\n<h1>\n  \n  \n  <strong>Ten tips to boost PageSpeed:<\/strong>\n<\/h1>\n\n<h2>\n  \n  \n  <strong>1. Serve WebP<\/strong>\ud83c\udfd9\ud83c\udf05\n<\/h2>\n\n<p>WebP is a fantastic image format for high-quality images, on a diet. Serve WebP with fallback to JPG format, for browsers that do not support WebP (come on Safari!).<\/p>\n\n<h2>\n  \n  \n  <strong>2. Use SVG<\/strong> \ud83c\udfce\n<\/h2>\n\n<p>Whenever you can! SVGs have excellent processing speed, work on all browsers, and so beautiful to look at without pixelation.<\/p>\n\n<h2>\n  \n  \n  <strong>3. Minify<\/strong> \ud83c\udf81\n<\/h2>\n\n<p>Minify everything - as much as you can. HTML\/ CSS\/ JS\/ SVG - everything. Tightly packed code is a good thing.<\/p>\n\n<h2>\n  \n  \n  <strong>4. View ViewPort<\/strong>\ud83d\udcfa\n<\/h2>\n\n<p>First impressions matter the most. The viewport is the first visible area - the original content that gets loaded in the top-fold of the page. Be minimalistic. Less is more - both for page speed and for users to get a clear understanding of your product's position &amp; pitch. Remember - you say more with whitespace than with words!<\/p>\n\n<h2>\n  \n  \n  <strong>5. Get started on PWA.<\/strong> \ud83d\udcf1\n<\/h2>\n\n<p>Progressive web apps (PWA) are the best thing that happened after sliced, apps! Use service workers \u2699\ufe0f \u2699\ufe0f. You can cache most of your content &amp; load pages <strong>blazingly fast<\/strong>. It even works even in offline mode, enables push notifications\u2014tons of coolness.<\/p>\n\n<h2>\n  \n  \n  <strong>6. Use async &amp; defer.<\/strong> \ud83d\ude34\n<\/h2>\n\n<p>Procrastination is a good thing - for a change \ud83d\ude00. Make Async and Defer as your best buddies. Understand their similarities and differences. Use these JS constructs effectively.<\/p>\n\n<h2>\n  \n  \n  <strong>7. Use Static-Site-Generator.<\/strong>\n<\/h2>\n\n<p>Fall in \ud83d\udc97 with <a href=\"https:\/\/www.11ty.dev\/\">Eleventy<\/a> or 11ty. <em>Funny name, serious site<\/em>. We found this open-source static file generator to be the <strong>most intuitive and fast<\/strong>. Heck, even Google's page <a href=\"https:\/\/web.dev\/\">web.dev<\/a> is built on 11ty. \ud83d\udc4d<\/p>\n\n<h2>\n  \n  \n  <strong>8. Play hard.<\/strong>\ud83e\udd3d\u200d\u2640\ufe0f\ud83e\udd3e\u200d\u2642\ufe0f\n<\/h2>\n\n<p>Conduct tons of tests, but <strong>DON'T PLAY IN PRODUCTION<\/strong>\ud83d\uded1. Make a copy of your site &amp; stage them on another domain. We like  <a href=\"http:\/\/www.freenom.com\/en\/freeandpaiddomains.html\">FreeNom.<\/a> Get a .tk domain for free for your dev\/ test instance. Make sure you do not have sitemaps and SEO related things on dev. Call us, and we can share more strategies to bypass Pixel Trackers.<\/p>\n\n<h2>\n  \n  \n  <strong>9. Learn.<\/strong> \ud83d\udcda\ud83e\udd13\n<\/h2>\n\n<p>Learn from CoreWebVitals, PSI &amp; LightHouse recommendations. Check out GTMetrix, WebPageTest.org. They all tell you what's slowing you down &amp; why. Most importantly, <strong>how to fix it<\/strong>. Do not obsess over the score, obsess on their feedback. Follow #webperf engineers in Google. They hang out on Twitter or busy YouTubing with teleprompter-talks &amp; awkward laughs. All in all, they are the geekiest and best engineers!\ud83e\udd17\ud83d\udc4d<\/p>\n\n<h2>\n  \n  \n  <strong>10. Hosting &amp; CDN.<\/strong> \ud83d\udda5\ud83d\udc68\u200d\ud83d\udcbb\n<\/h2>\n\n<p>Last but not least. Stay as far away from possible from GoDaddy and WordPress. They are notoriously slow and have tons of security issues. In 2020 - you must be crazy to pay \ud83d\udcb5 for hosting. Our top free picks are Google FireBase, Netlify, AWS LightSail, or AWS S3. Cloudflare is the best with CDN. Oh yes - make sure your site uses Brotli compression.<\/p>\n\n<p>Achieving perfection takes time, needs creativity &amp; pushes patience. Want a faster track? Call us \ud83e\udd19. We will be happy to give you free advice &amp; build beautiful and blazingly fast web apps.<\/p>\n\n<p>\ud83d\ude4f\ud83c\udffe \ud83d\ude4c \ud83d\udc4b\ud83c\udfff<\/p>\n\n","category":["javascript","webperf","webdev"]}}}