{"id":630,"date":"2022-12-01T18:03:04","date_gmt":"2022-12-01T16:03:04","guid":{"rendered":"https:\/\/conlumina.com\/?page_id=630"},"modified":"2023-05-17T09:59:24","modified_gmt":"2023-05-17T07:59:24","slug":"pagespeed-check","status":"publish","type":"page","link":"https:\/\/conlumina.com\/de\/pagespeed-check\/","title":{"rendered":"\u00dcberpr\u00fcfung der Seitengeschwindigkeit"},"content":{"rendered":"<div id=\"pageScoreResult\" class=\"entry-content\">\n\t<div id=\"psForm\">\n\t\t<!-- HTML Forms v1.6.4 - https:\/\/wordpress.org\/plugins\/html-forms\/ -->\n<form method=\"post\"  class=\"hf-form hf-form-1384 c-form\" data-id=\"1384\" data-title=\"Performance Check\" data-slug=\"performance-check\" data-message-success=\"Redirecting...\" data-message-invalid-email=\"Sorry, that email address looks invalid.\" data-message-required-field-missing=\"Please fill in the required fields.\" data-message-error=\"Oops. An error occurred.\" data-message-recaptcha-failed=\"reCAPTCHA verification failed. Please try again.\" data-message-recaptcha-low-score=\"Your submission appears to be spam. Please try again.\"><input type=\"hidden\" name=\"_hf_form_id\" value=\"1384\" \/><div style=\"display: none;\"><input type=\"text\" name=\"_hf_h1384\" value=\"\" \/><\/div><div class=\"hf-fields-wrap\"><p class=\"input\">\r\n   <label>Website<\/label>\r\n   <input type=\"url\" name=\"URL\" placeholder=\"https:\/\/www.yourdomain.com\" aria-label=\"Enter the full URL of your website\" required \/>\r\n<\/p>\r\n<!-- <div class=\"cf-turnstile\" style=\"max-width: 200px;overflow: hidden;\" data-sitekey=\"0x4AAAAAAACLWG0YnFzSWoT8\" data-theme=\"light\" data-callback=\"turnstileCallback\"><\/div> -->\r\n<p class=\"submit\">\r\n  <input class=\"c-button -primarySkin\" type=\"submit\" value=\"Go!\" \/>\r\n<\/p><noscript>Damit dieses Formular funktioniert bitte JavaScript aktivieren.<\/noscript><\/div><\/form><!-- \/ HTML Forms -->\n\t<\/div>\n\t<h2 id=\"title\">Analysing\u2026<\/h2>\n\t<div id=\"results\">\n\t\t<div id=\"leftCol\">\n\t\t\t<h3 class=\"title -md\">Performance:<\/h3>\n\t\t\t<div class=\"result\">\n\t\t\t\n<div id=\"thisBar\" aria-valuemax=\"100\" aria-valuemin=\"0\" aria-valuenow=\"0\" aria-valuetext=\"0%\" role=\"progressbar\" data-state=\"loading\" data-value=\"0\" data-max=\"100\" class=\"c-progressbar\">\n\t<div data-state=\"\" data-value=\"0\" data-max=\"100\" class=\"c-progressbar_indicator\" style=\"transform: translateX(-100%);\"><\/div>\n<\/div>\n<style>.c-progressbar {\n    position: relative;\n    overflow: hidden;\n    background: var(--color-background);\n    border-radius: 99999px;\n    width: 300px;\n    height: 25px;\n}\n.c-progressbar_indicator {\n    background-color: var(--color-surface);\n    width: 100%;\n    height: 100%;\n    transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1) 0s;\n}<\/style>\n\t\t\t<span id=\"thisSpan\"><\/span>\n\t\t\t<\/div>\n\t\t\t<h3 class=\"title -md\">We Guarantee:<\/h3>\n\t\t\t<div class=\"result\">\n\t\t\t\n<div id=\"thatBar\" aria-valuemax=\"100\" aria-valuemin=\"0\" aria-valuenow=\"90\" aria-valuetext=\"90%\" role=\"progressbar\" data-state=\"loading\" data-value=\"90\" data-max=\"100\" class=\"c-progressbar\">\n\t<div data-state=\"\" data-value=\"90\" data-max=\"100\" class=\"c-progressbar_indicator\" style=\"transform: translateX(-10%);\"><\/div>\n<\/div>\n<style>.c-progressbar {\n    position: relative;\n    overflow: hidden;\n    background: var(--color-background);\n    border-radius: 99999px;\n    width: 300px;\n    height: 25px;\n}\n.c-progressbar_indicator {\n    background-color: var(--color-surface);\n    width: 100%;\n    height: 100%;\n    transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1) 0s;\n}<\/style>\n\t\t\t<span id=\"thatSpan\">Good<\/span>\n\t\t\t<\/div>\n\t\t\t<div class=\"result overview\">\n\t\t\t\t<div>\n\t\t\t\t<span>0\u201349<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div>\n\t\t\t\t<span>50\u201389<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div>\n\t\t\t\t<span>90\u2013100<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<h4 class=\"title -sm\">Did you know?<\/h4>\n\t\t\t<p>\n\t\t\tGoogle rates page quality in terms of <strong>Performance<\/strong>, <strong>Best Practices<\/strong>, <strong>Accessibility<\/strong>, and <strong>SEO<\/strong>. Our <a href=\"\/pagespeed-guarantee\">PageSpeed Guarantee<\/a> covers all of these categories, ensuring an excellent overall user experience.\n\t\t\t<\/p>\n\t\t\t<p>\n\t\t\t\t\t\t\t\t<a id=\"webdev\" href=\"#\" target=\"_blank\" class=\"c-button -linkSkin\">\n  View full audit\n\t\t<svg aria-hidden=\"true\" focusable=\"false\" width=\"20\" height=\"20\">\n    \t<use xlink:href=\"#svg_arrow-right\"><\/use>\n  \t<\/svg>\n    <\/a>\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div id=\"rightCol\">\n\t\t\t<p id=\"status\">\n\t\t\tPlease wait\u2026\n\t\t\t<\/p>\n\t\t\t<div id=\"roller\" class=\"lds-roller\">\n\t\t\t\t<div><\/div>\n\t\t\t\t<div><\/div>\n\t\t\t\t<div><\/div>\n\t\t\t\t<div><\/div>\n\t\t\t\t<div><\/div>\n\t\t\t\t<div><\/div>\n\t\t\t\t<div><\/div>\n\t\t\t\t<div><\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div><style>.lds-roller {\n  \/*display: inline-block;\n  position: relative;*\/\n  width: 80px;\n  height: 80px;\n  margin: 0 auto;\n}\n.lds-roller div {\n  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  transform-origin: 40px 40px;\n}\n.lds-roller div:after {\n  content: \" \";\n  display: block;\n  position: absolute;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--color-text);\n  margin: -4px 0 0 -4px;\n}\n.lds-roller div:nth-child(1) {\n  animation-delay: -0.036s;\n}\n.lds-roller div:nth-child(1):after {\n  top: 63px;\n  left: 63px;\n}\n.lds-roller div:nth-child(2) {\n  animation-delay: -0.072s;\n}\n.lds-roller div:nth-child(2):after {\n  top: 68px;\n  left: 56px;\n}\n.lds-roller div:nth-child(3) {\n  animation-delay: -0.108s;\n}\n.lds-roller div:nth-child(3):after {\n  top: 71px;\n  left: 48px;\n}\n.lds-roller div:nth-child(4) {\n  animation-delay: -0.144s;\n}\n.lds-roller div:nth-child(4):after {\n  top: 72px;\n  left: 40px;\n}\n.lds-roller div:nth-child(5) {\n  animation-delay: -0.18s;\n}\n.lds-roller div:nth-child(5):after {\n  top: 71px;\n  left: 32px;\n}\n.lds-roller div:nth-child(6) {\n  animation-delay: -0.216s;\n}\n.lds-roller div:nth-child(6):after {\n  top: 68px;\n  left: 24px;\n}\n.lds-roller div:nth-child(7) {\n  animation-delay: -0.252s;\n}\n.lds-roller div:nth-child(7):after {\n  top: 63px;\n  left: 17px;\n}\n.lds-roller div:nth-child(8) {\n  animation-delay: -0.288s;\n}\n.lds-roller div:nth-child(8):after {\n  top: 56px;\n  left: 12px;\n}\n@keyframes lds-roller {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n#thisBar, #thatBar {\n  display: inline-block;\n}\n#thatBar .c-progressbar_indicator {\n  background-color: var(--colors-green10);\n}\n#results {\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: space-between;\n}\n.result {\n  display: flex;\n  align-items: center;\n  column-gap: var(--spacing-sm);\n}\n.result.overview {\n  justify-content: space-between;\n  margin: var(--spacing-md) 0;\n  position: relative;\n  font-size: var(--step--1);\n}\n.result.overview div:before {\n  display:block;\n  content: \"\";\n  position: absolute;\n  top: 0.2rem;\n  width: 1rem;\n  height: 1rem;\n  border-radius: 50%;\n  background-color: var(--colors-amber10);\n}\n.result.overview div:first-child:before {\n  background-color: var(--colors-tomato10);\n}\n.result.overview div:last-child:before {\n  background-color: var(--colors-green10);\n}\n.result.overview div span {\n  padding-left: 1.5rem;\n}\n#rightCol {\n  margin: 0 auto var(--spacing-md);\n  width: 250px;\n  height: 500px;\n  background-color: var(--color-background);\n  text-align: center;\n  border-radius: 1rem;\n}\n#psForm {\n  display: none;\n}\n@media (min-width: 800px) {\n  #results {\n    flex-direction: row;\n  }\n  #rightCol {\n    margin: auto 0 auto auto;\n  }\n  #leftCol,\n  #rightCol {\n    max-width: 50%;\n  }\n}\n#webdev {\n  visibility: hidden;\n  font-family: var(--font-sans);\n}\n<\/style><script>function run() {\n  const url = setUpQuery();\n  fetch(url)\n    .then(response => response.json())\n    .then(json => {\n      showInitialContent(json);\n      \n      return;\n      \n      const lighthouseCategories = {\n        'Performance': lighthouse.categories['performance'].score,\n        \/\/'Best Practices': lighthouse.categories['best-practices'].score,\n        \/\/'Accessibility': lighthouse.categories['accessibility'].score,\n        \/\/'SEO': lighthouse.categories['seo'].score,\n      };\n      showLighthouseCategories(lighthouseCategories);\n      \n      const lighthouseMetrics = {\n        'First Contentful Paint': lighthouse.audits['first-contentful-paint'].displayValue,\n        'Largest Contentful Paint': lighthouse.audits['largest-contentful-paint'].displayValue,\n        'Speed Index': lighthouse.audits['speed-index'].displayValue,\n        'Time To Interactive': lighthouse.audits['interactive'].displayValue,\n        \/\/'First Meaningful Paint': lighthouse.audits['first-meaningful-paint'].displayValue,\n        'Total Blocking Time': lighthouse.audits['total-blocking-time'].displayValue,\n        'Cumulative Layout Shift': lighthouse.audits['cumulative-layout-shift'].displayValue,\n\t      \/\/'First CPU Idle': lighthouse.audits['first-cpu-idle'].displayValue,\n        \/\/'Estimated Input Latency': lighthouse.audits['estimated-input-latency'].displayValue\n      };\n      showLighthouseContent(lighthouseMetrics);\n      \n    });\n}\nfunction setUpQuery() {\n  const api = 'https:\/\/www.googleapis.com\/pagespeedonline\/v5\/runPagespeed';\n  const queryString = window.location.search;\n  const urlParams = new URLSearchParams(queryString);\n  let url = urlParams.get('url');\n  if (!url) {\n    let el = document.getElementById('psForm');\n    el.style.display = 'block';\n    el = document.getElementById('title');\n    el.textContent = '';\n    el = document.getElementById('roller');\n    el.style.display = 'none';\n    el = document.getElementById('status');\n    el.textContent = '';\n    return;\n  }\n  const parameters = {\n    url: encodeURIComponent(url),\n    category: [\"PERFORMANCE\"],\n\t  strategy: [ \"mobile\" ],\n  };\n  let query = `${api}?`;\n  for (key in parameters) {\n    query += `${ key }=${ parameters[key]}&`;\n  }\n  query += 'key=AIzaSyCdvBustXMuAip7_mnNB7_W1bL8oBYoUp8';\n  \n  return query;\n}\nfunction showInitialContent(json) {\n  const lighthouse = json.lighthouseResult;\n  \/\/ Update title\n  let el = document.getElementById('title');\n  el.textContent = json.id;\n  \/\/ Generate the screenshot image\n  el = document.getElementById('rightCol');\n  el.innerHTML = '';\n  const img = document.createElement(\"img\");\n  img.src = lighthouse.audits['final-screenshot']['details']['data'];\n  el.appendChild(img);\n  \/\/ Set the progress bar value, color & text\n  el = document.getElementById('thisBar');\n  const score = lighthouse.categories['performance'].score * 100;\n  el.setAttribute('data-value', score);\n  el = el.getElementsByClassName('c-progressbar_indicator')[0];\n  let color = 'var(--colors-amber10)';\n  let grade = 'Average';\n  if (score >= 90) {\n    color = 'var(--colors-green10)';\n    grade = 'Good'\n  } else if (score <= 50) {\n    color = 'var(--colors-tomato10)';\n    grade = 'Poor';\n  }\n  el.style.backgroundColor = color;\n  el.setAttribute('data-value', score);\n  el.style.transform = \"translateX(-\" + (100 - score) + \"%)\";\n  el = document.getElementById('thisSpan');\n  el.textContent = grade;\n  el = document.getElementById('webdev');\n  el.setAttribute('href', encodeURI(\"https:\/\/pagespeed.web.dev\/analysis?url=\" + json.id))\n  el.style.visibility = 'visible';\n}\nfunction showCruxContent(cruxMetrics) {\n  let el = document.getElementById('pageScoreResult');\n  const cruxHeader = document.createElement('h2');\n  cruxHeader.textContent = \"Chrome User Experience Report Results\";\n  el.appendChild(cruxHeader);\n  for (key in cruxMetrics) {\n    const p = document.createElement('p');\n    p.textContent = `${key}: ${cruxMetrics[key]}`;\n    el.appendChild(p);\n  }\n}\nfunction showLighthouseCategories(lighthouseCategories) {\n  let el = document.getElementById('thisBar');\n  console.log(`${lighthouseCategories}[key]`);\n  el.setAttribute('data-value', `${lighthouseCategories}[key]` * 100);\n  \/*\n  let el = document.getElementById('pageScoreResult');\n  const lighthouseHeader = document.createElement('h2');\n  lighthouseHeader.textContent = \"Performance\";\n  el.appendChild(lighthouseHeader);\n  for (key in lighthouseCategories) {\n    const p = document.createElement('p');\n    p.textContent = `${key}: ${lighthouseCategories[key]}`;\n    el.appendChild(p);\n  }\n  *\/\n}\nfunction showLighthouseContent(lighthouseMetrics) {\n  let el = document.getElementById('pageScoreResult');\n  const lighthouseHeader = document.createElement('h2');\n  lighthouseHeader.textContent = \"Detailed Results\";\n  el.appendChild(lighthouseHeader);\n  for (key in lighthouseMetrics) {\n    const p = document.createElement('p');\n    p.textContent = `${key}: ${lighthouseMetrics[key]}`;\n    el.appendChild(p);\n  }\n}\nrun();<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Wir garantieren Spitzenleistungen sowohl auf dem Handy als auch auf dem Desktop. Wie schneidet Ihre Website ab? Bitte warten Sie, w\u00e4hrend wir bei Google nachfragen.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[],"class_list":["post-630","page","type-page","status-publish","hentry"],"meta_box":{"ticker_image":[],"related_testimonial":"","section_group":[{"section_type":"cta"},{"section_type":"faq","section_title":"Frequently Asked Questions","section_faq_items":[{"section_question":"How do you measure website performance?","section_answer":"Google uses a scoring system called PageSpeed Insights to rate the performance of a webpage on a scale from 0 to 100. A score of 90 or above is considered to be good, while a score of 50 or above is considered to be average. A score below 50 is considered poor.\r\n\r\nHowever, it's important to note that the exact score that a website receives can vary depending on a number of factors, such as the content on the page, the browser and device being used, and the user's internet connection.\r\n\r\nUltimately, the goal should be to create a fast and user-friendly website that provides value to users, rather than focusing on achieving a specific page speed score."},{"section_question":"Why does performance matter in a website?","section_answer":"Performance is important for websites because it directly affects the user experience. A website with poor performance takes longer to load, is less responsive to user input, and generally more frustrating to use.\r\n\r\nThis can lead to increased bounce rates (where users leave the site quickly without engaging with it), reduced conversion rates (where users fail to complete the desired action, such as making a purchase), and a negative perception of the website and the business it represents. In other words, performance matters because it can directly impact the user experience and ultimately the success of the website.\r\n\r\nAdditionally, Google wants to provide the best possible search results to its users, and a slow-loading website would not be considered a high-quality result."},{"section_question":"What is a good page speed score for mobile?","section_answer":"Google recommends that websites aim for a page speed score of at least 90 out of 100 for mobile devices."},{"section_question":"What can you do to improve the performance of a website?","section_answer":"Some common strategies to improve website performance include:\r\n<ol>\r\n \t<li><strong>Optimizing images<\/strong>: Large, high-resolution images can significantly slow down a website. By optimizing images (including resizing and compressing them), you can reduce their file size and improve the speed of your website.<\/li>\r\n \t<li><strong>Minimizing the use of plugins and external scripts<\/strong>: Plugins and external scripts (such as social media buttons or third-party analytics tools) can add extra code to your website and slow it down. Minimizing the use of these can help to improve the performance of your website.<\/li>\r\n \t<li><strong>Enabling caching<\/strong>: Caching allows a website to store static resources (such as images and other media files) in the user's browser, so they don't have to be downloaded each time the user visits the website. This can improve the speed of the website and provide a better user experience.<\/li>\r\n \t<li><strong>Using a content delivery network (CDN)<\/strong>: A CDN is a network of servers that deliver content to users based on their geographic location. By using a CDN, you can reduce the distance that data has to travel, which can improve the speed of your website.<\/li>\r\n \t<li><strong>Optimizing your website's code<\/strong>: Your website's code (including HTML, CSS, and JavaScript) can be optimized to reduce its size and improve its performance. This can include things like minifying code, combining files, and removing unnecessary code.<\/li>\r\n \t<li><strong>Enabling Gzip compression<\/strong>: Gzip compression allows your website to compress files before sending them to the user's browser. This can reduce the amount of data that needs to be transferred, which can improve the speed of your website.<\/li>\r\n<\/ol>\r\nOverall, there are many things that you can do to improve the performance of a website. The specific steps you take will depend on your website and its specific requirements, but the strategies outlined above are commonly used to improve website performance."}]}]},"_links":{"self":[{"href":"https:\/\/conlumina.com\/de\/wp-json\/wp\/v2\/pages\/630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/conlumina.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/conlumina.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/conlumina.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/conlumina.com\/de\/wp-json\/wp\/v2\/comments?post=630"}],"version-history":[{"count":5,"href":"https:\/\/conlumina.com\/de\/wp-json\/wp\/v2\/pages\/630\/revisions"}],"predecessor-version":[{"id":1391,"href":"https:\/\/conlumina.com\/de\/wp-json\/wp\/v2\/pages\/630\/revisions\/1391"}],"wp:attachment":[{"href":"https:\/\/conlumina.com\/de\/wp-json\/wp\/v2\/media?parent=630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/conlumina.com\/de\/wp-json\/wp\/v2\/categories?post=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}