{"id":1774,"date":"2015-08-12T21:25:06","date_gmt":"2015-08-12T20:25:06","guid":{"rendered":"http:\/\/www.jurecuhalev.com\/blog\/?p=1774"},"modified":"2015-08-12T21:26:10","modified_gmt":"2015-08-12T20:26:10","slug":"how-i-sped-up-wordpress-4x-on-mobile","status":"publish","type":"post","link":"https:\/\/www.jurecuhalev.com\/blog\/how-i-sped-up-wordpress-4x-on-mobile\/","title":{"rendered":"How I sped up WordPress 4x on mobile"},"content":{"rendered":"<p>With new Chrome, we got even more\u00a0developer tools. Newest version has a feature &#8220;Capture screenshots&#8221;. It\u00a0will\u00a0record your page load and display how it looks as it&#8217;s downloaded to your browser.<\/p>\n<p>After watching <a href=\"https:\/\/www.youtube.com\/watch?v=tCfF6HI0JKs\">Paul Irish comment on some of the large media sites<\/a>, I started wondering &#8211; how is <a href=\"http:\/\/val202.rtvslo.si\">Val 202<\/a> doing? It&#8217;s getting a decent amount of traffic on mobile\u00a0devices.\u00a0It also has a large amount of traffic through\u00a0Facebook and Twitter, meaning that\u00a0they probably don&#8217;t have our assets cached.<\/p>\n<p>First test &#8211; 3G, no-cache: <strong>9.34 seconds until title is displayed!<\/strong><\/p>\n<p><a href=\"https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1775 size-large\" src=\"https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-1-1024x339.png\" alt=\"slow-1\" width=\"604\" height=\"200\" srcset=\"https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-1-1024x339.png 1024w, https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-1-550x182.png 550w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><\/a>Ok, that&#8217;s clearly bad. It also means that they potential readers will probably abandon page load and go watch kittens that load from a faster domain.<\/p>\n<p>Looking through all the assets that our theme loads, I see a bunch of\u00a0potential problems:<\/p>\n<ul>\n<li>Plugins that\u00a0we&#8217;re starting to deprecated, but they still load resources<\/li>\n<li>External assets and iframes that we don&#8217;t even display on mobile<\/li>\n<li>Disqus for comments, that we could hide<\/li>\n<li>Images that are lower on site, and we could lazy load<\/li>\n<li>We load all our assets from our domain, so we hit the limits of how many resources browser downloads\u00a0in parallel<\/li>\n<\/ul>\n<p>I try to disable as much of above functions, just to see if it&#8217;s worth of development time. Here&#8217;s my second measurement (3G, no-cache): <strong>5.65 seconds until content appears<\/strong>.<\/p>\n<p><a href=\"https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1776\" src=\"https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-2-1024x105.png\" alt=\"slow-2\" width=\"604\" height=\"62\" srcset=\"https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-2-1024x105.png 1024w, https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-2-550x56.png 550w, https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-2.png 2006w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><\/a><\/p>\n<p>I got the page to load in about half the time. Better, but not good enough.<\/p>\n<p>As I\u00a0cut even more things, I try to disable TypeKit and with it,\u00a0time to\u00a0content falls dramatically. Aha!<\/p>\n<p>Reading\u00a0<a href=\"http:\/\/help.typekit.com\/customer\/portal\/articles\/649336-embed-code\">TypeKits&#8217; documentation<\/a>\u00a0reveals that it\u00a0waits 3 seconds by default, to ensure that fonts load and there is not flash of unstyled content.\u00a0But on mobile, we could decide that we&#8217;re ok with the flash as long as we show\u00a0our reader content as soon as possible.<\/p>\n<p>Third measurement (3G, no-cache), with async TypeKit: <strong>2.5 seconds until content appears<\/strong><\/p>\n<p><a href=\"https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1777\" src=\"https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-3-1024x318.png\" alt=\"slow-3\" width=\"604\" height=\"188\" srcset=\"https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-3-1024x318.png 1024w, https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/slow-3-550x171.png 550w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><\/a><\/p>\n<p>Still not the best, but it&#8217;s a <strong>4x\u00a0faster<\/strong> than\u00a0current version.<\/p>\n<p>For now, I&#8217;ll try to load TypeKit in Async mode for devices that have smaller window width:<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/gandalfar\/716da89bc75a8be23634.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/gandalfar\/716da89bc75a8be23634\">Gist<\/a>.<\/noscript><\/div>\n<p>While this approach is not optimal, it\u00a0gives us a quick win, while we work on streamlining the rest of the frontend code.<\/p>\n<h2>Conclusion<\/h2>\n<p>WordPress is great for quickly iterating and running\u00a0content experiments. The problem is supporting this in the long run.<\/p>\n<p>It&#8217;s also easy to forget elements of previous experiments in code &#8211; custom fonts, icons and whole scripts. It&#8217;s good\u00a0to take a step back and reevaluate our code in terms of new usage patterns and best practices.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With new Chrome, we got even more\u00a0developer tools. Newest version has a feature &#8220;Capture screenshots&#8221;. It\u00a0will\u00a0record your page load and display how it looks as it&#8217;s downloaded to your browser. After watching Paul Irish comment on some of the large media sites, I started wondering &#8211; how is Val 202 doing? It&#8217;s getting a decent [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1778,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[14],"tags":[],"class_list":["post-1774","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech"],"acf":[],"jetpack_featured_media_url":"https:\/\/www.jurecuhalev.com\/blog\/wp-content\/uploads\/2015\/08\/2981528249_98e7b16381_b.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/1774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/comments?post=1774"}],"version-history":[{"count":3,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/1774\/revisions"}],"predecessor-version":[{"id":1781,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/1774\/revisions\/1781"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/media\/1778"}],"wp:attachment":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/media?parent=1774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/categories?post=1774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/tags?post=1774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}