HTML • CSS • Fonts • Images • JavaScript • Server • SEO & Services • Contributing
-
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"ortype="text/css"are not required anymore and should be removed.<!-- 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
- Meta Title / Description Available: Check page titles / descriptions
- Social Tags Present: Test Facebook sharing. Provide og-tags if needed
-
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
relattribute with thepreloadvalue and addas="style"on the<link>element. -
Unused CSS:
Remove unused CSS selectors.
-
Webfont formats:
You are using WOFF2 on your web project or application. -
Use
preconnectto load your fonts faster:<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 -
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>).Ensure that all your files are loaded using
asyncordeferand decide wisely the code that you will need to inject in your<head>. -
Non-blocking JavaScript:
JavaScript files are loaded asynchronously using asyncor deferred usingdeferattribute.<!-- 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) ordefer(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.
- GZIP / Brotli compression is enabled: Use a compression method such as Gzip or Brotli to reduce the size of your JavaScript files. With a smaller sizes file, users will be able to download the asset faster, resulting in improved performance.
- Content Security: Content Security Policy 101
- Robots.txt: Verify robots.txt is present and allow's all robots
- Sitemap: ensure that a sitemap is present and if the content is dynamic, proper functionality is there to auto update it
- Analytics: Verify Tag Manager / Analytics have been correctly set up
- Set CloudFlare and do that necessary configurations
- Crypto Tab:
- SSL => Flexible
- Always use HTTPS => YES
- Automatic HTTPS Rewrites => YES
- Firewall Tab:
- Security Level => Essentially Off
- Crypto Tab:
- Submit all www/non-www http/https variations
- Set up one non-www/www https as the preferred domain
- Crawl > Fetch as Google > Submit to index to kickstart index
- Server: Are Server backups enabled?
- Database: Are Amazon S3 backups enabled for database?
- Branches Cleanup: Remove
developbranch or other stale branches - Write a solid README: How to write a README that rocks
- Finally, let the world know...
Open an issue or a pull request to suggest changes or additions.
All icons are provided by Icons8
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent