pagespeed-insights - URL 被裁剪
问题描述
查看访问日志，我们注意到 Google PageSpeed Insights 将长 URL 裁剪为大约 70 个字符，并附加了一个省略号。这会导致 404。示例：
8.8.8.8 - - [17/Sep/2020:10:32:22 +0200] "GET /wp-content/uploads/2016/06/petey-peeking-through-d%E2%80%A6 HTTP/1.1" 404 4650 "https://example.com/" "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse"
在具有许多长 URL 的网站上，这会导致大量 404，这会对 WordPress 网站产生负面影响，例如它们通过 PHP 处理 404。我认为它也会导致不完整/不正确的测试分析和结果。我似乎无法在网上找到有关此的任何信息。这是预期的行为吗？
其他示例：
66.249.93.34 - - [17/Sep/2020:14:15:20 +0200] "GET /wp-content/uploads/2020/09/test-picture-with-a-very-very-very-long-name-1024x402.jpg HTTP/1.1" 200 17896 "https://wpland.se/" "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse"
66.249.93.34 - - [17/Sep/2020:14:17:33 +0200] "GET /wp-content/uploads/2020/09/test-picture-with-a-very-very%E2%80%A6 HTTP/1.1" 404 4925 "http://wpland.se/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Safari/537.36 Chrome-Lighthouse"
解决方案
我们有同样的问题，这个函数似乎截断了 url：
function getOuterHTMLSnippet(element,ignoreAttrs=[],snippetCharacterLimit=500){const ATTRIBUTE_CHAR_LIMIT=75;try{if(element instanceof ShadowRoot){element=element.host;}
const clone=element.cloneNode();ignoreAttrs.forEach(attribute=>{clone.removeAttribute(attribute);});let charCount=0;for(const attributeName of clone.getAttributeNames()){if(charCount>snippetCharacterLimit){clone.removeAttribute(attributeName);}else{let attributeValue=clone.getAttribute(attributeName);if(attributeValue.length>ATTRIBUTE_CHAR_LIMIT){attributeValue=attributeValue.slice(0,ATTRIBUTE_CHAR_LIMIT-1)+'…';clone.setAttribute(attributeName,attributeValue);}
charCount+=attributeName.length+attributeValue.length;}}
const reOpeningTag=/^[\s\S]*?>/;const[match]=clone.outerHTML.match(reOpeningTag)||[];if(match&&charCount>snippetCharacterLimit){return match.slice(0,match.length-1)+' …>';}
return match||'';}catch(_){return`<${element.localName}>`;}};