{"id":345162,"date":"2021-07-23T14:50:48","date_gmt":"2021-07-23T21:50:48","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=345162"},"modified":"2021-07-23T14:50:50","modified_gmt":"2021-07-23T21:50:50","slug":"207-performance-testing-css-tricks-with-webpagetest","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/207-performance-testing-css-tricks-with-webpagetest\/","title":{"rendered":"#207: Performance Testing CSS-Tricks with WebPageTest"},"content":{"rendered":"\n<p>I get a hands-on performance review with <a href=\"https:\/\/timkadlec.com\/\" rel=\"noopener\">Tim Kadlec<\/a> of <a href=\"https:\/\/webpagetest.org\/\" rel=\"noopener\">WebPageTest<\/a>! This is a real honor as Tim is a real performance guru who knows WebPageTest in and out. I&#8217;m all about <s>getting a little free consulting<\/s> helping y&#8217;all learn the tool as well. Tim is hosting a <a href=\"https:\/\/www.twitch.tv\/webpagetest\" rel=\"noopener\">Twitch Channel for WebPageTest<\/a>, so that&#8217;s where this video originated. Make sure to subscribe over there. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I get a hands-on performance review with Tim Kadlec of WebPageTest! This is a real honor as Tim is a real performance guru who knows WebPageTest in and out. I&#8217;m all about getting a little free consulting helping y&#8217;all learn the tool as well. Tim is hosting a Twitch Channel for WebPageTest, so that&#8217;s where [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":345164,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":164823,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-rendering\/","url_meta":{"origin":345162,"position":0},"title":"text-rendering","date":"March 5, 2014","format":false,"excerpt":"The text-rendering property in CSS allows you to choose quality of text over speed (or vice versa) allowing you to fine tune optimization by suggesting to the browser as to how it should render text on the screen. Said another way in MDN: The text-rendering CSS property provides information to\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":342681,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/content-visibility\/","url_meta":{"origin":345162,"position":1},"title":"content-visibility","date":"June 21, 2021","format":false,"excerpt":"The content-visibility property in CSS indicates to the browser whether or not an element\u2019s contents should be rendered at initial load time. So, as the browser starts loading content and is playing it on the screen, this property allows us to step in and tell the browser not to load\u2026","rel":"","context":"In \"content-visibility\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/visibility-nope.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":197380,"url":"https:\/\/css-tricks.com\/almanac\/properties\/w\/will-change\/","url_meta":{"origin":345162,"position":2},"title":"will-change","date":"March 5, 2015","format":false,"excerpt":"The will-change property in CSS optimizes animations by letting the browser know which properties and elements are just about to be manipulated, potentially increasing the performance of that particular operation. Syntax will-change: <animateable-feature> = scroll-position | contents | <custom-ident> Initial value: autoApplies to: all elementsInherited: noPercentages: n\/aComputed value: specific valuedAnimation\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":169899,"url":"https:\/\/css-tricks.com\/video-screencasts\/133-figuring-responsive-images\/","url_meta":{"origin":345162,"position":3},"title":"#133: Figuring Out Responsive Images","date":"May 16, 2014","format":false,"excerpt":"I'm probably a bit rare in that I rather enjoyed trying to keep up on the responsive images thing. It's an interesting problem that bred lots of interesting solutions. The whole thing is starting to wrap up now though, now that the official solutions are: and friends with srcset and\u2026","rel":"","context":"With 49 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":187264,"url":"https:\/\/css-tricks.com\/lodge\/svg\/27-animating-svg-javascript\/","url_meta":{"origin":345162,"position":4},"title":"27: Animating SVG with JavaScript","date":"November 1, 2014","format":false,"excerpt":"JavaScript is the last of the ways we'll cover on animating SVG. We looked at CSS, which is great and pretty comfortable, but it can't do a number of SVG properties that you might want to animate. Then we looked at SMIL, which is a declarative syntax right in the\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":187280,"url":"https:\/\/css-tricks.com\/guest-writing-for-css-tricks\/","url_meta":{"origin":345162,"position":5},"title":"Guest Writing for CSS-Tricks","date":"October 29, 2014","format":false,"excerpt":"Interesting in guest writing on CSS-Tricks? It can be a great thing for everyone: you, our readers, and the site itself. Read up on what our expectations are, what you can expect, and what the workflow is like.","rel":"","context":"In \"writing\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/345162"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=345162"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/345162\/revisions"}],"predecessor-version":[{"id":345166,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/345162\/revisions\/345166"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/345164"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=345162"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=345162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}