自动摘要 正在生成中……
正在生成中……
逛Github时看到的，一位印度老哥的repo，我觉得挺好，应该作为网站开发者常识的存在。
Minified HTML: The HTML code is minified, comments, white spaces and new lines are removed from production files.
Remove unnecessary comments: Ensure that comments are removed from your pages.
Remove unnecessary attributes: Type attributes like type="text/javascript" or type="text/css" are not required anymore and should be removed.
type="text/javascript"
type="text/css"
<!-- Before HTML5 --> <script type="text/javascript"> // JavaScript code </script> <!-- Today --> <script> // JavaScript code </script>
Favicon present: Does Favicon load? Pin the tab in Safari to check pinned icon
⬆ back to top
Minification: All CSS files are minified, comments, white spaces and new lines are removed from production files.
Concatenation: CSS files are concatenated in a single file (Not always valid for HTTP/2).
<!-- Not recommended --> <link rel="stylesheet" href="foo.css"/> <link rel="stylesheet" href="bar.css"/> <!-- Recommended --> <link rel="stylesheet" href="foobar.css"/>
Non-blocking: CSS files need to be non-blocking to prevent the DOM from taking time to load.
<link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="global.min.css"></noscript>
⁃ You need to add the rel attribute with the preload value and add as="style" on the <link> element.
rel
preload
as="style"
<link>
Unused CSS: Remove unused CSS selectors.
Webfont formats: You are using WOFF2 on your web project or application.
Use preconnect to load your fonts faster:
preconnect
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
⁃ Before prefetching your webfonts, use webpagetest to evaluate your website⁃ Look for teal colored DNS lookups and note the host that are being requested⁃ Prefetch your webfonts in your <head> and add eventually these hostnames that you should prefetch too
<head>
Webfont size: Webfont sizes don't exceed 300kb (all variants included)
JS Minification: All JavaScript files are minified, comments, white spaces and new lines are removed from production files (still valid if using HTTP/2).
No JavaScript inside: (Only valid for website) Avoid having multiple JavaScript codes embedded in the middle of your body. Regroup your JavaScript code inside external files or eventually in the <head> or at the end of your page (before </body>).
</body>
Ensure that all your files are loaded using async or defer and decide wisely the code that you will need to inject in your <head>.
async
defer
Non-blocking JavaScript: JavaScript files are loaded asynchronously using async or deferred using defer attribute.
<!-- Defer Attribute --> <script defer src="foo.js"></script> <!-- Async Attribute --> <script async src="foo.js"></script>
⁃ Add async (if the script don't rely on other scripts) or defer (if the script relies upon or relied upon by an async script) as an attribute to your script tag.⁃ If you have small scripts, maybe use inline script place above async scripts.
Check dependencies size limit: Ensure to use wisely external libraries, most of the time, you can use a lighter library for a same functionality.
JavaScript Profiling: Check for performance problems in your JavaScript files (and CSS too).
Use of Service Workers: You are using Service Workers in your PWA to cache data or execute possible heavy tasks without impacting the user experience of your application.
Your website is using HTTPS:
Page weight < 1500 KB (ideally < 500 KB): Reduce the size of your page + resources as much as you can.
Page load times < 3 seconds: Reduce as much as possible your page load times to quickly deliver your content to your users.
Use online tools like Page Speed Insight or WebPageTest to analyze what could be slowing you down and use the Front-End Performance Checklist to improve your load times.
Time To First Byte < 1.3 seconds: Reduce as much as you can the time your browser waits before receiving data.
Minimizing HTTP requests: Always ensure that every file requested are essential for your website or application.
Use a CDN to deliver your assets: Use a CDN to deliver faster your content over the world.
Set HTTP cache headers properly: Set HTTP headers to avoid expensive number of roundtrips between your browser and the server.
develop
参考资料： https://github.com/meSingh/product-launch-checklist
Common sense is not that common. 知道的越多，不知道的就更多。