This presentation was originally given at State of Search 2020.
Video Transcript:
hello there my name is joe hall and this is optimizing for performance and seo and speed i want to thank the organizers of state of search for allowing me the opportunity to speak with you today and i hope you learn a lot from this presentation uh so when we talk about ph performance aren’t we just talking about speed well that’s true but speed is the primary indicator of performance uh performance drives business needs better performing web pages mean higher conversions revenue and profit and so performance should really be at the forefront of everything we do otherwise we’re just leaving money on the table and wasting time and effort at mark with marketing so does performance or speed influence rankings um yes it does but page speed is a secondary ranking factor uh so that means that it’s important but the fundamentals of seo need to be fixed first and i say this because i meet a lot of business owners and new clients that are focused heavily on page speed optimization but you’re ignoring fundamental seo issues and really you’re not just going to succeed without those being taken care of so you should address those first uh increased speeds can help other aspects of seo such as crawling and indexing so we can think about page speed affecting seo in two ways one way it could be a ranking factor which is baked into the algorithm but another way is that it can increase um crawling and indexing because if your pages load faster it means that google uh can crawl them quicker and index the content on them uh so that in itself uh will help with ranking as well um now the priority at which you make these changes or that you optimize for speed uh for each site should be determined based on the scope of test results um and may require an investment to improve um and so let me let me give you an example of what i mean by that uh so this is my website hallanalysis.com and if we pump it through uh the page speed insights tool uh that google provides we can see that it gets a uh out of for mobile and a out of for desktop um you know is not bad either is not bad would i like it to be uh yes definitely but the way i see it is i know there are other things that i need to focus on for seo um and so i’m gonna put my time into focusing on those other aspects of seo uh then trying to get a perfect score um also when i started out uh with optimizing my site i think i was around or . uh and so you can see i’ve already made a lot of improvement uh since the beginning and that’s really what matters uh so really you should prioritize these efforts um in a way that is a good balance between uh the uh required investment and then really where you’re at with the with the testing results uh so the practice that we are going to utilize uh to optimize for page speed and performance is called web performance optimization and wikipedia tells us that the wpo is or website acquisition is the field of knowledge about increasing web performance it’s important to underscore field of knowledge here because what you need to understand about wpo is that it is a specialized field of work that requires a skill set outside of the typical web developer uh so many developers uh don’t truly understand the value of wpo and i understand that i can hear a lot of developers watching this right now uh rolling their eyes um you know the truth is is that uh developers that have worked alongside seos or developers that have worked alongside digital marketing professionals they may understand wpo but web performance optimization is not part of the normal paradigm of building websites oftentimes when you are building a product your primary goal is to get it done and get working correctly however wpo takes the web development process a step further and says that that the process needs to be uh optimized and performance is at the forefront of everything that’s done and so some of these wpo professionals can specialize in content management systems uh so for example wpo for wordpress joomla drugla um they can specialize in business type so uh some wpos will look at uh e-commerce lead generation uh or non-profits um can’t some can be even be specialized in technology so uh there’s a lot of different things that can be done with different javascript libraries like react or angular or even some will focus uh their specialties into like server-side caching uh the likes uh so you know one thing that nietzsche understood also about wpo is that it can and should influence other areas of digital marketing other than just seo um and so a big thing that it touches on is conversion rate optimization many conversion rate tools such as a b testing heat maps and conversion tracking can slow a site down dramatically um this is because they usually carry a lot of javascript and other code to track conversions and attract different testing things uh social media marketers uh like to add tracking pixels uh that can slow down the site dramatically and social networks are notorious for having things like uh the facebook tracking pixel and and twitter’s uh ad pixels uh those can slow things down uh significantly ad sales uh this is both if you are a publisher and you have ads on uh the site um if you’re utilizing an ad network most of those uh javascript assets that run your ad network uh is going to be external um and they oftentimes are very slow to load uh but also if you are buying ads um oftentimes the network will provide you some sort of tracking pixel uh to track the uh conversions of those ads or not um and then also design and content developers need to be brought into the fold as well uh because oftentimes they’re the ones who are creating new content and adding new media to the site and if they understand the importance of wpo it’ll make the future growth of the website uh more sustainable uh for performance um you know one thing to take away from this slide is that there are all sorts of different uh folks uh and stakeholders that will be touched by the performance optimization process and so it’s really important to try to get them all at the same table uh and have this discussion together so that they understand uh the meaningful you know the reasons that we’re doing this uh why this is important and significant and that they can help contribute to the uh web performance optimization process um in their own way uh so sometimes uh web performance optimization can expose uh both technical and operational uh deficiencies and so a lot of times you know um i i find that sites that are having really slow websites also have a lot of technical debt and also have a lot of operational deficiencies and i’ll give you a good example um i had a client once that was utilizing a crm system uh for their lead generation uh through their website and it was also utilized for other uh sales processes within the company um and i i you know i work with them a lot to try to optimize that crm that was integrated into the website but it just wouldn’t get any faster and so my my last recommendation of them was to get rid of the crm or to uh figure out another way to pipe uh the leads from the website into the crm um both of which they were unable to do because the crm they were using was a legacy system and it ran it pretty much ran their entire back end uh business operations um and also that that crm tied into their legacy accounting software um and really did not provide much room for flexibility and so because of that we were not able to make big changes on the website because they were so indebted into this back-end system that was really hamstringing a lot of the w wpo efforts um and so sometimes when you’re developing these solutions you can over uncover operational deficiencies uh such as broken workflows but need to be fixed before wpo can be successful um and this is a hard conversation to have uh with clients to basically say okay you can’t really fix your website until you fix your back-end business operations um but you just it’s just the reality of it and in some cases the best uh solution is to start from scratch and to build a whole new website that is fast and utilizes uh fast technology um and and can make uh the site rank uh the way it needs to um so how exactly do we get started how do we know uh if the page is if the site is fast or if it’s slow and and which direction we go in well most uh most wpo professionals will utilize uh some page uh speed testing tools uh to look at uh the different um uh factors that would that would you know um contribute to fast or slow um the all of these pretty much do the same thing they all have kind of similar um uh metrics uh but the most uh widely used and and probably the most controversial would be the google’s page speed insights tool um we’ll take a look at that uh for the rest of the the talk here um i have a mixed opinion on uh this tool um but we’ll go through some of the tips on using php insights uh so my first tip is to do not obsessed about the score uh use it as an indicator of progress so for example this out of you know it could be better but really what’s more meaningful uh are the scores down here and the information in the rest of the report so don’t focus too much on the score use it as kind of a an indicator of progress if the score goes up well that’s a good thing um just make sure you don’t focus too much on the score itself uh you should begin addressing the issues at a high level versus going granular from the start so a lot of times uh web developers or seos will pop in a url into this tool and then they will immediately scroll down and start you know combing through all of these opportunities and diagnostics and you know not really have a real game plan or understanding of what’s happening at a higher level um but if you take a more higher level approach uh it goes a lot quicker and you will uh fix a lot of these issues um all at once and a good example of this is is to uh look within the opportunities and diagnostics uh for recurring themes so what does that mean um in the opportunity system area here we have serve images in next-gen formats eliminate run your blocking resources properly size images remove unused css this first one certain images in neptune formats and properly sized images both of these can be done at the same time so what you should do is uh find a method and i’ll show you some some tools to use later but find a method that can uh convert into a next-gen format and properly size the image all at once uh the same can be applied for eliminate render blocking resources and remove on the css eliminate render blocking resources a lot of these are going to be css so while we are removing some of the unused css one will be removing some uh then are render blocking and then also uh some of the methods that we utilize to make this css uh non render blocking will also you will also remove some of the unused css so it’s important to view these uh recommendations at a high level look for general themes and try to attack them uh from the perspective of okay you know what of the general themes images and css and the opportunities to have here uh and then uh if available focus more on field data than lab data so for example up here at the top we have field data and we have lab data and the field data is coming from uh the chrome user experience report and this is a composite index of data that comes from millions of users across the web that visit your website now this type of data is not always available for websites but the lab data always is the lab data is coming directly from google servers and it’s just a reflection of how google servers uh interface with your website the field data is a reflection of how the general public is utilizing your website so the field data is probably closer to reality um and it helps you understand how your users are actually utilizing the site so it’s a good idea to use field data more than the lab data uh now i mentioned you know it’s a good idea to stay at a high level and google has made this really easy for us because uh they’ve given us um three high-level metrics that they call the core web vitals and the core web vitals are the largest contentful paint and they want that to be under . seconds uh the first input delay they would like that to be uh under milliseconds and the cumulative layout shift which is uh . now you’re probably wondering what are these uh let’s go through each what is the largest content we’ll paint while the largest content will paint uh reports the render time of the largest image or text block visible uh within the viewport so the underlying goal of this metric is to measure uh how long it takes for the main sections of the content to load and so what they look at are the image tags or img tags here they look at the image tags that are found within uh svg tags they look at the video element tags they look at um elements with a background image loaded through css and then they look at block level elements that contain text nodes or other inline text elements or children so the idea here is they’re looking for the main content of the page how long that main content takes to load um and that can either be an image a video or text um then after the large content will paint they’re looking at the first input delay and now first input delay is a little hard to understand uh but essentially what this is is that the time from when a user first interacts with a page to the time when the browsers actually begin processing uh event handlers in response to that interaction and so this is actually seen a lot of times on uh mobile browsing if you’ve ever been on your mobile device you’re browsing a web page and the page loads and then you try to click something on the page and nothing happens it’s because there is a long uh first input delay and what that means is it means that uh the web browser uh is having a hard time processing all of the uh javascript and all of the uh associated assets that are dependent on uh making the page interactive and so if you remember on a web page and you uh click a link or you click uh uh the uh something javascript or you even try to scroll and nothing happens it’s because the page is not completely loaded and the browser is not ready yet to support um interaction from the user and so to fix this issue uh you need to speed up any external javascript resources or you need to make sure that none of the javascript is conflicting with each other sometimes you can have multiple pieces of javascript on a page that uh conflict with each other um or you might be overusing javascript event handlers which is essentially um uh indicators within the javascript that says hey if the user clicks here do this or the user scrolls do this if too many of those are happening on the page it can take uh a long time for the the browser uh to load uh content before the page is um and then interactive last thing we can look at is a cumulative layout shift and cls measures with sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page so what is an unexpected layout shift um basically you might have um opened up a webpage before and you may have been uh reading an article or looking at the main part of the content and then all of a sudden the the layout of the page changes or ships uh because maybe um an ad loaded or an image that was at the top of the page loaded and it pushed all the content down this happens a lot on publishers they use ad networks and sometimes the ads will load uh on a delay and those ads will push the content down or sometimes there’s an image at the top of the page uh and that image will will take a long time to load and after it loads it pushes the image the content down um basically you want to make sure that that doesn’t occur because every time that occurs it adds to the cumulative layout shift you want to make sure that the p the page’s content does not shift or change after it’s loaded there are two tips to improve this is to avoid delayed or timed events that changed the layout um and this can even include like those little hello bars that a lot of people like to use uh to add like a little banner bar at the top of their page um if you use one of those just make sure it doesn’t come out you know after the page is loaded it’s loaded with the page um and then if you are going to use things like ads on the page then elements like ads or images should be blocked out within the html and have its own uh dimensions that are loaded in line with the html so that there is no layout shift once those ads load that way there will be a box for the ad to load into um and the content can load around it and the content will not be shifted or changed while the user is reading uh the content um so you know i i want to stay on this theme of taking a high level overview of of of these fixes and and and really focus on it at a high level and so i’ve developed a framework uh that i call joe’s three-point solution and of course this is not gonna work for everybody uh you know you really have to focus on um you know utilizing uh your own approach and really focusing on uh what needs to be done but really if you take a higher a higher overview approach and focus at the top and kind of work your way down um you can get better results and i start off my three-point solution by minimizing the number of requests um you want to minimize the number of uh files that are having to be called and loaded through the browser you want to cache everything and you want to optimize media and i’m going to show you what each one of these three things are um really quickly so when we talk about minimize the number of requests uh we can do this by doing things like consolidating css into one file so a lot of times web pages will be utilizing more than one uh css style sheet but if you can combine those into one file that makes just one request for css you can do the same thing with javascript combine all the javascript into one file make sure that the order in which the javascript is is placed in that file is the same order in which it is called on the page on the html um and what else you can do is you can eliminate all these extra requests entirely by using inline css and inline javascript what exactly does that mean because we hear that a lot with uh page uh speed and i put together a code sample here um now we can see this first link tag right here it calls an external style sheet so if we use this then that counts as one extra request that’s being called however we can take the content out of this uh style sheet and paste it inside uh the style tag uh block um and this makes the style sheet inline so this brings inline css uh so that it’s no longer external and take that out and now when the html loads uh the css will load right along with it and there will be no extra extra call for css uh this isn’t really uh helpful because uh cs uh html typically loads before any other assets uh and so including an inline css uh helps uh with page speed significantly uh this will also help uh with uh render blocking assets if you are moving the css into inline then that eliminates the render blocking asset error the same is true for uh javascript so we can have um an external uh call to javascript which is an external file um or we can just take all the javascript out of this file at myscript.js and place it within the script tags here and put this whole thing with the script tags um inside the page uh for inline javascript and so this can also be done uh to uh remove uh this request entirely and so let’s say you were gonna do both of those now we’ve taken three requests for this page and we’ve just taken it down to one because we’ve eliminated the css sheet we’ve eliminated the javascript sheet all the css all the javascripts are found now inside the html and the html now is the only request that is being made and that will eliminate a lot of unneeded um time that it takes for the page to load so that’s why we should always minimize the number of requests um and to do that we can utilize uh some wordpress plugins um so all of these do that but i want to point out perk matters because perf matters uh is cool because it uh it can uh basically eliminate uh javascript and cs on a page by page basers so for example if you use woocommerce uh utilizes its own uh css and it will put that css on every page of your wordpress site whether or not you are you know using a shopping cart on on every page or not um and if you use perk matters which is a few clicks uh it removes all of that unneeded css and united javascript that would be used for woocommerce it takes it off of all the pages that woocommerce is not using and so this is a really handy tool uh plugin that you can use to basically uh focus uh css and javascript only on the pages that are using them and not have those uh javascript and css being utilized on every page um these other plugins do some similar things uh they all combine css uh like i showed you before and you can also um inline css and javascript uh like i show you in the code example uh with these plugins um the second uh point uh to my three-point solution is to cache everything uh this means server-side caching this means browser caching and this means content delivery uh network caching and so let’s take a look at some tools here uh the first two is for cloudflare and aws they both provide their own type of uh content delivery caching um and you should utilize that it’s a great feature um it helps uh it helps um access uh the cache immediately after a dns call uh if you’re using like cloudflare or or aws for a dns provider um then you know as soon as it gets to the dns server it pulls cache right from uh its own delivery network so there’s no reason to even hit your own server if you’re utilizing cloudflare or aws uh wide speed uh or uh wp rocket or unoptimized um they use uh server side caching uh so light speed is a server-side caching uh system uh that is specifically designed for things like wordpress magento um uh woocommerce uh drupal joomla all uh basically content management systems that are written in php um the light speed is utilized on the server um to utilize light speed uh there is a plugin for wordpress but that plugin has to tie in with uh lightspeed that’s installed on your uh server your hosting environment and so a lot of hosting providers utilize like speed uh because it works so well and it’s it’s fully integrated into the uh system architecture uh wp rocket is another great option uh you do not need a special hosting package to utilize wp rocket it comes with its own server-side uh caching system that works as a plug-in um the same exact caching system that wp rocket uses is utilized by wp engine it’s the same exact thing in fact if you use wp rocket on wp engine you’ll notice that the caching uh does not work um because it doesn’t need to it uses uh the wp engines caching instead but the other functions on wp rocket when utilized in wp engine uh work just fine um and then finally optimize is another awesome tool it’s a free uh tool that is utilized it can it also has its own uh server-side level caching um and also utilizes a bunch of other features as well um so next up is uh the last point in my three-point solution is optimizing media so you should always compress images and videos um upgrade to the latest image formats so there are numerous ones ones for um uh animation the uh w uh wdp uh p images um there are other uh jp jpeg uh those are all uh kind of advanced and future uh driven uh uh file formats that are you know designed for speed um and uh downloading images quickly and then also you should definitely lazy load all images and iframes whenever i mention lazy loading iframes people are like gosh who uses iframes anymore well actually every uh media host uh utilizes an iframe uh for embedding media so if you’re gonna embed a youtube video or you’re gonna embed uh pretty much anything uh iframes are still utilized for that and so if you lazy load uh the image of the images and the iframes um that drastically cuts down on um on page load speeds uh you can utilize other options for optimizing media ads so uh image api is very good uh for converting images file formats and compressing them um i also really like smudge pro uh smudge pro uh is great because it can do all of your images all at once it’s another wordpress plugin um and it works off of a credit system i think where you buy so many credits and and you know you can optimize some of the images based on that uh so if you’re approaching this where you need to optimize like to images uh smudge pro is a great choice for that uh the other uh plug-ins lightspeed uh wp rocket and auto optimized they all integrate with third-party services they can do this through their plugin uh so you’ll have to pay an extra fee for that third-party service in order to um implement uh those image optimizations uh so that brings me towards the end of my presentation and i have top three takeaways and those are that performance and speed optimization influences all parts of the business and so therefore you should try to include uh all the different stakeholders that that are involved and also understand that it may influence business operations as well uh wpo is a specialized practice that takes time planning and investment so this is not just a check mark item on your seo checklist this is not something that you can get done in a week or two weeks and it is not something that you might be able to do with your current developer it may require a specialist um and then it’s important to focus on high level reporting uh such as the core web uh the webcore vitals uh you know focusing on these high level ideas and high level reporting it’s gonna help you not only save time but really make sense of what matters um i thank you so much for watching this presentation my name is joe hall if you have more questions uh you can i guess ask them now or or maybe later if you have more uh feel free to reach out my website is hallanalysis.com cloud .com or you can reach me on twitter at joe hall thank you so much
