{"id":292998,"date":"2019-07-18T08:09:00","date_gmt":"2019-07-18T15:09:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=292998"},"modified":"2019-07-18T16:43:41","modified_gmt":"2019-07-18T23:43:41","slug":"get-peak-wordpress-performance-with-jetpack","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/get-peak-wordpress-performance-with-jetpack\/","title":{"rendered":"Get Peak WordPress Performance with Jetpack"},"content":{"rendered":"<p>The irony of web performance is that the <a href=\"https:\/\/httparchive.org\/reports\/page-weight?start=2016_03_15&#038;end=latest&#038;view=list\" rel=\"noopener\">average page weight of a site continues to go up<\/a> year after year, despite us being more aware of the problem and having more tools at our disposal to fight it than ever.<\/p>\n<p>To paraphrase <i>Seinfeld<\/i>, &#8220;we know <em>how<\/em> to fight page weight issues; we just don&#8217;t <em>use<\/em> the tools we have to fight page weight issues.&#8221;<\/p>\n<p><!--more--><\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/A-brgkkjnHc\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>That&#8217;s why <a href=\"https:\/\/jetpack.com\/?aff=8638\" rel=\"noopener\">Jetpack<\/a> provides powerful features for all users at any plan level. They made it so that performance is integrated right into managing content on a WordPress site.<\/p>\n<p>One of those things is <a href=\"https:\/\/jetpack.com\/features\/design\/lazy-loading-images-for-wordpress\/?aff=8638\" rel=\"noopener\">lazy loading images<\/a>. Lazy loading is an <a href=\"https:\/\/css-tricks.com\/the-complete-guide-to-lazy-loading-images\/\">excellent technique to defer loading images<\/a> until they are actually needed. So, an image never loads until the user actually scrolls to where it comes into display. That could potentially save a ton of server requests and precious bytes when waiting for a page to load. Jetpack includes lazy loading, <a href=\"https:\/\/jetpack.com\/pricing\/?aff=8638\" rel=\"noopener\">even on free plans<\/a>, so everyone has access to this performance boost.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/videopress.com\/embed\/jfUbHdv0\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n<script src=\"https:\/\/videopress.com\/videopress-iframe.js\"><\/script><\/p>\n<p>And what&#8217;s the point of lazy loading anything if you don&#8217;t have somewhere to host the files? Well, Jetpack also offers unlimited static file and image hosting for every plan level. No more wondering how much storage is left on your server! You get an unlimited amount of space to store anything you need. That&#8217;s pretty awesome!<\/p>\n<p>It gets even more awesome. That&#8217;s because the <a href=\"https:\/\/jetpack.com\/features\/design\/content-delivery-network\/?aff=8638\" rel=\"noopener\">unlimited storage<\/a> is part of a <abbr title=\"Content Delivery Network\">CDN<\/abbr> that is designed to serve images from high-speed dedicated data centers that make downloads as fast and smooth as possible. Again, that&#8217;s <em>free<\/em> to everyone!<\/p>\n<p>That makes Jetpack a super resource for combatting performance issues on a WordPress site. Hey, <a href=\"https:\/\/css-tricks.com\/jetpack\/\">we use Jetpack here at CSS-Tricks<\/a> and it&#8217;s a linchpin for <a href=\"https:\/\/css-tricks.com\/five-of-my-favorite-features-of-jetpack\/\">so much<\/a> of how this site works and operates. The performance benefits are a nice perk but it&#8217;s worth checking out <a href=\"https:\/\/jetpack.com\/features\/?aff=8638\" rel=\"noopener\">everything it has to offer<\/a> because there&#8217;s likely so much more you can leverage.<\/p>\n<p><a class=\"button\" href=\"https:\/\/jetpack.com\/?aff=8638\" rel=\"noopener\">Get Jetpack<\/a><\/p>\n<p class=\"explanation\">Hey it doesn&#8217;t hurt there is a 20% discount right now with DISCOUNT20 until July 31st, 2019<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The irony of web performance is that the average page weight of a site continues to go up year after year, despite us being more aware of the problem and having more tools at our disposal to fight it than ever. To paraphrase Seinfeld, &#8220;we know how to fight page weight issues; we just don&#8217;t [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":272798,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Get Peak WordPress Performance with Jetpack","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[508],"tags":[633,1196,908,592],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/jetpack-images.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":272663,"url":"https:\/\/css-tricks.com\/the-four-big-ways-jetpack-helps-with-image-performance\/","url_meta":{"origin":292998,"position":0},"title":"The Four Big Ways Jetpack Helps with Image Performance","date":"June 19, 2018","format":false,"excerpt":"We've been working with Jetpack around here as a sponsor. It's a great match because as someone with a bunch of self-hosted WordPress sites, Jetpack is one of those no-brainer plugins for me. Jetpack can do a ton of good things for any site in a variety of very different\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/jetpack-images.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":287807,"url":"https:\/\/css-tricks.com\/using-jetpack-to-accelerate-wordpress-development\/","url_meta":{"origin":292998,"position":1},"title":"Using Jetpack to Accelerate WordPress Development","date":"May 16, 2019","format":false,"excerpt":"[Geoff:] I've built a fair number of WordPress sites in my day. It's been my go-to since the 2.x-ish days because it works for any site, big or small. That's the sort of solution and flexibility you like to have as a freelancer. Boy, I wish I had Jetpack available\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/jetpack-featured.png?fit=1200%2C659&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":341296,"url":"https:\/\/css-tricks.com\/jetpack-boost-handles-critical-css-for-you\/","url_meta":{"origin":292998,"position":2},"title":"Jetpack Boost Handles Critical CSS For You","date":"June 1, 2021","format":false,"excerpt":"Critical CSS is one of those things I see in my performance reports but always seem to ignore. I know what it means. It means to put only the CSS required to render things immediately visible in a <style> tag in the <head> so it comes across in the first\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/jetpack-boost-featured-image.png?fit=1200%2C657&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":275613,"url":"https:\/\/css-tricks.com\/a-native-lazy-load-for-the-web-platform\/","url_meta":{"origin":292998,"position":3},"title":"A Native Lazy Load for the Web","date":"August 27, 2018","format":false,"excerpt":"A new Chrome feature dubbed \"Blink LazyLoad\" is designed to dramatically improve performance by deferring the load of below-the-fold images and third-party s. The goals of this bold experiment are to improve the overall render speed of content that appears within a user\u2019s viewport (also known as above-the-fold), as well\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/lazyload.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":260267,"url":"https:\/\/css-tricks.com\/lozad-js-performant-lazy-loading-images\/","url_meta":{"origin":292998,"position":4},"title":"Lozad.js: Performant Lazy Loading of Images","date":"September 26, 2017","format":false,"excerpt":"There are a few different \"traditional\" ways of lazy loading of images. They all require JavaScript needing to figure out if an image is currently visible within the browser's viewport or not. Traditional approaches might be: Listening to scroll and resize events on the window Using a timer like setInterval\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/09\/s_29E8C45E02B8336138FF9D42F6FED1CE28964941DD8BFD3FD5E751E96FE0C633_1504810907674_lozad-banner.png?fit=1200%2C457&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350644,"url":"https:\/\/css-tricks.com\/frameworks-helping-image-usage\/","url_meta":{"origin":292998,"position":5},"title":"Frameworks Helping Image Usage","date":"September 9, 2021","format":false,"excerpt":"I recently blogged about how images are hard and it ended up being a big ol' checklist of things that you could\/should think about and implement when placing images on websites. I think it's encouraging to see frameworks\u2009\u2014\u2009these beloved tools that we leverage to help us build websites\u2009\u2014\u2009offering additional tools\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/09\/flexible-images.jpg?fit=800%2C566&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/jetpack-images.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292998"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=292998"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292998\/revisions"}],"predecessor-version":[{"id":293074,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292998\/revisions\/293074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/272798"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=292998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=292998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=292998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}