{"id":49153,"date":"2019-08-06T07:00:27","date_gmt":"2019-08-06T14:00:27","guid":{"rendered":"https:\/\/eigene-homepage-erstellen.net\/?p=49153"},"modified":"2024-09-04T21:42:42","modified_gmt":"2024-09-05T04:42:42","slug":"page-speed-optimization-hierarchy","status":"publish","type":"post","link":"https:\/\/eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm","title":{"rendered":"The Page Speed Optimization Hierarchy"},"content":{"rendered":"\n

At this point, nobody will disagree that page speed matters<\/a>; it’s a key component of optimizing a user’s experience on your site. There are lots of tools available to analyze page speed and offer best practices in both performance and SEO. But they fall short when it comes to prioritizing those results.<\/p>\n

Sometimes they overload recommendations or lack clarity on next steps. Over the years, I have analyzed hundreds of sites and have come up with a two-tiered ranking system for optimizations:<\/p>\n

Tier I: Deal-Breakers<\/h2>\n

The deal-breaker tier. If a site doesn’t have these, performance will continue to suffer no matter what else you do.<\/p>\n

Browser Caching \/ Expires Headers \/ Cache Static Content<\/h3>\n

Site-wide assets that have to be re-downloaded on every page load kills performance. It’s basically loading a site for the first time… every time<\/em>. If you’re lucky to get return visitors and browser caching is not in place for images, they are all downloaded and processed again. If you’re getting poor scores from assets out of your control, analyze the 3rd party scripts being included on your site and eliminate any unnecessary.<\/p>\n

Image Compression and Optimization \/ Page Size<\/h3>\n

The larger the size of the download, the longer it takes. A no-brainer. Optimize and compress your images.<\/p>\n

Time to First Byte (TTFB) \/ Page Caching<\/h3>\n

The vast majority of websites have some kind of server-side processing. The time it takes for your server to handle the request and display something meaningful is very important to users. Several factors can contribute to this best practice (load balancing, CDNs, etc.), but ultimately, server-side page caching will improve this dramatically. Instead of having to process the request, compile the code, and build the HTML output, page caching allows for servers to just process the request and return cached HTML. That’s much faster for your users. It also reduces the load on your server(s), which saves energy. And trees. ???<\/p>\n

Here’s a more in-depth guide to improving server response time<\/a>.<\/span><\/p>\n

Tier II: Upgrades<\/h2>\n

Tier II topics help take site performance to the next level — pretty much the highest level. When combined with Tier I and other Tier II items, the sites built from the ground-up with render-blocking resource handling position themselves to maximize performance scores.<\/p>\n

Render-blocking Resources \/ Critical CSS \/ Async CSS & JS<\/h3>\n

This is a borderline Tier I best practice. The reason I push it down into Tier II is that it is a relatively “newer” best practice and because we’ve achieved sub-one-second page load times<\/a> before this was ever implemented. If you follow all Tier I and most Tier II best practices, you may get great performance without this upgrade. Eliminating render-blocking resources with a critical CSS and asynchronous CSS & JS loading setup takes it to the next level. Ninetieth percentile.<\/p>\n

JavaScript Execution Time \/ 3rd Party Scripts<\/h3>\n

As JavaScript continues to get more popular, managing it has become that much more important. Create an environment where the assets served are only what is needed<\/em> or as close as possible. Additionally, create check-ins with your analytics team and remove any 3rd party scripts no longer in use or needed. While Google Tag Manager is a very useful tool, it is easy to set and forget various tracking\/analytics scripts that place a burden on site performance.<\/p>\n

Unused CSS & JS (Code Coverage)<\/h3>\n

This goes along with page size in Tier I, but often overlooked as a consequence of the entire web application. Generally speaking, global CSS and JavaScript files are created for an entire site or theme, including all styles and functionality for every template. These files are then referenced on every page of the site. This methodology inherently creates bloat. There’s no reason to include style and validation logic for a form on pages where the form does not exist.<\/p>\n

Minification<\/h3>\n

Make your assets smaller, so download times are faster. It’s as simple as that.<\/p>\n

CDN<\/h3>\n

This is such an easy win; there is little to no reason why any site should not be utilizing a global content delivery network (CDN). Downloadable assets routed through servers geographically closer to each user is logical.<\/p>\n

HTTP2<\/h3>\n

Newer technology that has improved upon an old standard is readily available. Use it and appreciate it. And don’t forget to optimize<\/a> for it.<\/p>\n

Caveats<\/h2>\n

While you may see significant gains from implementing one or two of the critical recommendations, others left unimplemented may continue to bog down your site. For example, great improvements can be made by optimizing and compressing images, but a site will still suffer in performance if it’s not caching static content and\/or implementing some kind of page caching.<\/p>\n

It is very important to understand that outstanding site performance is attained from a large combination of best practices. For a more in-depth look at page speed, check out our Ultimate Guide to Page Speed<\/a>. If you haven’t learned about what Core Web Vitals are<\/a>, we recommend reading our article as site speed optimization is very closely relevant to what CWV measures.<\/span><\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"

At this point, nobody will disagree that page speed matters; it’s a key component of optimizing a user’s experience on your site. There are lots of tools available to analyze page speed and offer best practices in both performance and SEO. But they fall short when it comes to prioritizing those results. Sometimes they overload […]<\/p>\n","protected":false},"author":136,"featured_media":49441,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[12],"tags":[630],"coauthors":[],"class_list":["post-49153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-dev","tag-site-performance"],"acf":[],"yoast_head":"\nThe Page Speed Optimization Hierarchy - Portent<\/title>\n<meta name=\"description\" content=\"Over the years, we've found these are the most important page speed optimizations you can make, and how to prioritize them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Page Speed Optimization Hierarchy\" \/>\n<meta property=\"og:description\" content=\"Over the years, we've found these are the most important page speed optimizations you can make, and how to prioritize them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm\" \/>\n<meta property=\"og:site_name\" content=\"Portent\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/portent.marketing\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-06T14:00:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-05T04:42:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.eigene-homepage-erstellen.net\/wp-content\/uploads\/2019\/09\/PageSpeedRecommendationTiers-1024x774.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"774\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andy Schaff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"The Page Speed Optimization Hierarchy\" \/>\n<meta name=\"twitter:creator\" content=\"@portent\" \/>\n<meta name=\"twitter:site\" content=\"@portent\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy Schaff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Page Speed Optimization Hierarchy - Portent","description":"Over the years, we've found these are the most important page speed optimizations you can make, and how to prioritize them.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm","og_locale":"en_US","og_type":"article","og_title":"The Page Speed Optimization Hierarchy","og_description":"Over the years, we've found these are the most important page speed optimizations you can make, and how to prioritize them.","og_url":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm","og_site_name":"Portent","article_publisher":"https:\/\/www.facebook.com\/portent.marketing","article_published_time":"2019-08-06T14:00:27+00:00","article_modified_time":"2024-09-05T04:42:42+00:00","og_image":[{"width":1024,"height":774,"url":"https:\/\/www.eigene-homepage-erstellen.net\/wp-content\/uploads\/2019\/09\/PageSpeedRecommendationTiers-1024x774.png","type":"image\/png"}],"author":"Andy Schaff","twitter_card":"summary_large_image","twitter_title":"The Page Speed Optimization Hierarchy","twitter_creator":"@portent","twitter_site":"@portent","twitter_misc":{"Written by":"Andy Schaff","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm#article","isPartOf":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm"},"author":{"name":"Andy Schaff","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/person\/27fcba2a68147f5e49c85e099cb85d3f"},"headline":"The Page Speed Optimization Hierarchy","datePublished":"2019-08-06T14:00:27+00:00","dateModified":"2024-09-05T04:42:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm"},"wordCount":849,"commentCount":2,"publisher":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#organization"},"image":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm#primaryimage"},"thumbnailUrl":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2019\/09\/PageSpeedRecommendationTiers.png","keywords":["Site Performance"],"articleSection":["Design & Dev"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm","url":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm","name":"The Page Speed Optimization Hierarchy - Portent","isPartOf":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm#primaryimage"},"image":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm#primaryimage"},"thumbnailUrl":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2019\/09\/PageSpeedRecommendationTiers.png","datePublished":"2019-08-06T14:00:27+00:00","dateModified":"2024-09-05T04:42:42+00:00","description":"Over the years, we've found these are the most important page speed optimizations you can make, and how to prioritize them.","breadcrumb":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm#primaryimage","url":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2019\/09\/PageSpeedRecommendationTiers.png","contentUrl":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2019\/09\/PageSpeedRecommendationTiers.png","width":6254,"height":4730,"caption":"Graphic illustration of a pyramid showing Tier 1 page speed recommendations on the bottom and Tier 2 recommendations on the top"},{"@type":"BreadcrumbList","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/page-speed-optimization-hierarchy.htm#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eigene-homepage-erstellen.net\/"},{"@type":"ListItem","position":2,"name":"The Page Speed Optimization Hierarchy"}]},{"@type":"WebSite","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#website","url":"https:\/\/www.eigene-homepage-erstellen.net\/","name":"Portent","description":"Digital Marketing Agency - Seattle, WA","publisher":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.eigene-homepage-erstellen.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#organization","name":"Portent","url":"https:\/\/www.eigene-homepage-erstellen.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/logo\/image\/","url":"https:\/\/portent.wpenginepowered.com\/images\/2018\/08\/logo-indigo.svg","contentUrl":"https:\/\/portent.wpenginepowered.com\/images\/2018\/08\/logo-indigo.svg","width":182,"height":40,"caption":"Portent"},"image":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/portent.marketing","https:\/\/x.com\/portent","https:\/\/www.linkedin.com\/company\/portent\/"]},{"@type":"Person","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/person\/27fcba2a68147f5e49c85e099cb85d3f","name":"Andy Schaff","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/person\/image\/ce25e35bc815a66cbed51b3ba7cccb14","url":"https:\/\/secure.gravatar.com\/avatar\/a358a8574cd50140c428fcbae648ab4f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a358a8574cd50140c428fcbae648ab4f?s=96&d=mm&r=g","caption":"Andy Schaff"},"description":"With more than a decade of experience, Andy is a highly-motivated developer who will take on any technology thrown at him. A proponent of well-formed and documented code, page speed techniques, and high attention to detail, Andy is the full-stack implementation specialist and development architect at Portent.","sameAs":["https:\/\/www.linkedin.com\/in\/andyschaff"],"url":"https:\/\/eigene-homepage-erstellen.net\/blog\/author\/aschaff"}]}},"author_meta":{"display_name":"Andy Schaff","author_link":"https:\/\/eigene-homepage-erstellen.net\/blog\/author\/aschaff"},"featured_img":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2019\/09\/PageSpeedRecommendationTiers-300x227.png","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2019\/09\/PageSpeedRecommendationTiers.png","tax_additional":{"categories":{"linked":["<a href=\"https:\/\/eigene-homepage-erstellen.net\/blog\/design-dev\" class=\"advgb-post-tax-term\">Design & Dev<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Design & Dev<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/eigene-homepage-erstellen.net\/blog\/design-dev\" class=\"advgb-post-tax-term\">Site Performance<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Site Performance<\/span>"]}},"comment_count":"2","relative_dates":{"created":"Posted 5 years ago","modified":"Updated 2 months ago"},"absolute_dates":{"created":"Posted on August 6, 2019","modified":"Updated on September 4, 2024"},"absolute_dates_time":{"created":"Posted on August 6, 2019 7:00 am","modified":"Updated on September 4, 2024 9:42 pm"},"featured_img_caption":"","series_order":"","category_info":[{"taxonomy":"category","name":"Design & Dev","slug":"design-dev","permalink":"https:\/\/eigene-homepage-erstellen.net\/blog\/design-dev","icon":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2021\/08\/Dev-category-icon.png","theme":"creative"}],"author_info":{"first":"Andy","last":"Schaff","url":"https:\/\/eigene-homepage-erstellen.net\/blog\/author\/aschaff"},"_links":{"self":[{"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/posts\/49153"}],"collection":[{"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/comments?post=49153"}],"version-history":[{"count":0,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/posts\/49153\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/media\/49441"}],"wp:attachment":[{"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/media?parent=49153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/categories?post=49153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/tags?post=49153"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/coauthors?post=49153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}