Skip to content
/ Front-End-Performance-Checklist Public
forked from thedaviddias/Front-End-Performance-Checklist

๐ŸŽฎ The only Front-End Performance Checklist that runs faster than the others

License

MIT license
0 stars 1.2k forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

ErnTrgt/Front-End-Performance-Checklist

BranchesTags
ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

221 Commits
.github
.github
ย 
ย 
images
images
ย 
ย 
.gitignore
.gitignore
ย 
ย 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
ย 
ย 
CONTRIBUTING.md
CONTRIBUTING.md
ย 
ย 
LICENSE
LICENSE
ย 
ย 
README.md
README.md
ย 
ย 

Repository files navigation


Front-End Performance Checklist

ย  Front-End Performans Kontrol Listesi ย 

๐Ÿšจ ลžu anda frontendchecklist.io'nun yeni sรผrรผmรผ รผzerinde รงalฤฑลŸฤฑlฤฑyor
(mevcut performansฤฑ iรงerecektir).
Gรถrmek istediฤŸiniz herhangi bir รถzelliฤŸi belirtmekten lรผtfen รงekinmeyin. DesteฤŸiniz iรงin teลŸekkรผrler!

๐ŸŽฎ DiฤŸerlerinden daha hฤฑzlฤฑ รงalฤฑลŸan tek Front-End Performans Kontrol Listesi

Basit bir kural: "Performansฤฑ gรถz รถnรผnde bulundurarak tasarlayฤฑn ve kodlayฤฑn"

ย  ย ย ย  PRs Welcome ย  ย  ย ย ย  Discord ย  ย  ย  ย ย ย  Licence MIT ย 

ย  Nasฤฑl Kullanฤฑlฤฑr? โ€ข Katkฤฑda Bulunun โ€ข รœrรผn Avฤฑ

๐Ÿ‡จ๐Ÿ‡ณ ๐Ÿ‡ซ๐Ÿ‡ท ๐Ÿ‡ฐ๐Ÿ‡ท ๐Ÿ‡ต๐Ÿ‡น ๐Ÿ‡ท๐Ÿ‡บ ๐Ÿ‡ฏ๐Ÿ‡ต ๐Ÿ‡ฎ๐Ÿ‡ท ๐Ÿ‡น๐Ÿ‡ท

DiฤŸer Kontrol Listeleri:
๐Ÿ—‚ Front-End Kontrol Listesi โ€ข ๐Ÿ’Ž Front-End Dizayn Kontrol Listesi

GiriลŸ

Performans รงok bรผyรผk bir konudur, ancak her zaman bir "back-end" veya "yรถnetici" konusu deฤŸildir, aynฤฑ zamanda bir Front-End sorumluluฤŸudur. Front-End Performans Kontrol Listesi, bir Front-End geliลŸtiricisi olarak kontrol etmeniz veya en azฤฑndan farkฤฑnda olmanฤฑz ve projenize (kiลŸisel veya profesyonel) uygulamanฤฑz gereken unsurlarฤฑn kapsamlฤฑ bir listesidir.

Nasฤฑl Kullanฤฑlฤฑr?

Her kural iรงin, bu kuralฤฑn neden รถnemli olduฤŸunu ve sorunu nasฤฑl dรผzeltebileceฤŸinizi aรงฤฑklayan bir paragrafฤฑnฤฑz olacak. Daha derin bilgi iรงin, kontrol listesini tamamlayabilecek ๐Ÿ›  araรงlara, ๐Ÿ“– makalelere veya ๐Ÿ“น medyalara iลŸaret edecek baฤŸlantฤฑlar bulabilirsiniz.

Front-End Performans Kontrol Listesindeki tรผm รถฤŸeler, en yรผksek performans puanฤฑna ulaลŸmak iรงin gereklidir, ancak kontrol listesindeki bazฤฑ kurallarฤฑn diฤŸerlerine gรถre รถncelik sฤฑralamasฤฑnฤฑ belirttiฤŸimiz bir gรถsterge bulacaksฤฑnฤฑz.3 รถncelik dรผzeyi bulunmaktadฤฑr:

  • Low รถฤŸenin dรผลŸรผk รถnceliฤŸe sahip olduฤŸu anlamฤฑna gelir.
  • Medium รถฤŸenin orta dรผzeyde รถnceliฤŸe sahip olduฤŸu anlamฤฑna gelir. Bu รถฤŸeyi ele almaktan kaรงฤฑnmamalฤฑsฤฑnฤฑz.
  • High รถฤŸenin yรผksek รถnceliฤŸe sahip olduฤŸu anlamฤฑna gelir. Bu kurala uymaktan ve รถnerilen dรผzeltmeleri uygulamaktan kaรงฤฑnamazsฤฑnฤฑz.

Performans Araรงlarฤฑ

Web sitenizi veya uygulamanฤฑzฤฑ test etmek ya da izlemek iรงin kullanabileceฤŸiniz araรงlarฤฑn listesi:

Referanslar

HTML

html

  • Minimize EdilmiลŸ HTML: medium HTML kodu minimize edilir (kรผรงรผltรผlรผr), yorumlar, beyaz boลŸluklar ve yeni satฤฑrlar รผretim dosyalarฤฑndan kaldฤฑrฤฑlฤฑr.

    Neden:

    Gereksiz tรผm boลŸluklarฤฑ, yorumlarฤฑ ve nitelikleri kaldฤฑrmak HTML'nizin boyutunu azaltacak ve sitenizin sayfa yรผkleme sรผrelerini hฤฑzlandฤฑracak ve tabii ki kullanฤฑcฤฑlarฤฑnฤฑz iรงin indirme iลŸlemini hafifletecektir.

    Nasฤฑl:

    Framework'lerin รงoฤŸu, web sayfalarฤฑnฤฑn kรผรงรผltรผlmesini kolaylaลŸtฤฑrmak iรงin eklentilere sahiptir. Bu iลŸi sizin iรงin otomatik olarak yapabilecek bir grup NPM modรผlรผ kullanabilirsiniz.

  • CSS etiketlerini her zaman JavaScript etiketlerinden รถnce yerleลŸtirin: high CSS'nizin her zaman JavaScript kodundan รถnce yรผklendiฤŸinden emin olun.

    <!-- Tavsiye Edilmeyen -->
<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css" />

<!-- Tavsiye Edilen -->
<link rel="stylesheet" href="foo.css" />
<script src="jquery.js"></script>
<script src="foo.js"></script>

    Neden:

    CSS etiketlerinizin herhangi bir JavaScript'ten รถnce olmasฤฑ, tarayฤฑcฤฑ oluลŸturma sรผresini hฤฑzlandฤฑran daha iyi, paralel indirme saฤŸlar.

    Nasฤฑl:

    โƒ <head> bรถlรผmรผnรผzdeki <link> ve <style> etiketleinin her zaman <script> etiketinden รถnce geldiฤŸinden emin olun.

  • iframe sayฤฑsฤฑnฤฑ en aza indirin: high iframe'leri yalnฤฑzca teknik olarak baลŸka bir imkanฤฑnฤฑz yoksa kullanฤฑn. Mรผmkรผn olduฤŸunca iframe'lerden kaรงฤฑnmaya รงalฤฑลŸฤฑn.

  • Prefetch, dns-prefetch ve prerender ile ร–nyรผkleme Optimizasyonu: low Popรผler tarayฤฑcฤฑlar, belirli URL'leri รถnceden yรผklemek iรงin belirli anahtar kelimelerle birlikte <link> etiketi ve "rel" รถzelliฤŸi รผzerindeki yรถnergeyi kullanabilir.

    Neden:

    Prefetching (รถnceden getirme) iลŸlemi, bir tarayฤฑcฤฑnฤฑn, kullanฤฑcฤฑnฤฑn yakฤฑn gelecekte eriลŸebileceฤŸi iรงeriฤŸi gรถrรผntรผlemek iรงin gereken kaynaklarฤฑ arka planda getirmesini saฤŸlar. Tarayฤฑcฤฑ bu kaynaklarฤฑ รถnbelleฤŸinde saklayabilir ve sayfa kaynaklarฤฑ iรงin farklฤฑ alan adlarฤฑ kullandฤฑklarฤฑnda web sayfalarฤฑnฤฑn yรผklenme sรผrecini hฤฑzlandฤฑrabilir. Bir web sayfasฤฑnฤฑn yรผklenmesi bittiฤŸinde ve etkieลŸimde bulunamama sรผresi geรงtiฤŸinde, tarayฤฑcฤฑ diฤŸer kaynaklarฤฑ da indirmeye baลŸlar. Bir kullanฤฑcฤฑ belirli bir baฤŸlantฤฑya girdiฤŸinde, iรงerik (รถnceden hazฤฑrlanmฤฑลŸ) anฤฑnda sunulacaktฤฑr.

    Nasฤฑl:

    โƒ<link> etiketinin <head> bรถlรผmรผnde olduฤŸundan emin olun.

โฌ† Yukarฤฑ Dรถn

CSS

css

  • Minimizasyon: high Tรผm CSS dosyalarฤฑ minmize edilir (kรผรงรผltรผlรผr), yorumlar, beyaz boลŸluklar (white-spaces) ve yeni satฤฑrlar ilgili dosyalarฤฑndan kaldฤฑrฤฑlฤฑr.

    Neden:

    CSS dosyalarฤฑ kรผรงรผltรผldรผฤŸรผnde iรงerik daha hฤฑzlฤฑ yรผklenir ve istemciye daha az veri gรถnderilir. GeliลŸtirme sรผrecinde CSS dosyalarฤฑnฤฑ kรผรงรผltmek her zaman รถnemlidir. Bant geniลŸliฤŸi maliyetlerini dรผลŸรผrmek ve kaynak kullanฤฑmฤฑnฤฑ azaltmak isteyen her iลŸletme iรงin olduฤŸu gibi kullanฤฑcฤฑ iรงin de faydalฤฑdฤฑr.

    Nasฤฑl:

    โƒ Derleme ya da yayฤฑnlama รถncesinde veya sฤฑrasฤฑnda dosyalarฤฑnฤฑzฤฑ otomatik olarak kรผรงรผltmek iรงin araรงlar kullanฤฑn.

  • BirleลŸtirme: medium 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" />

    Why:

    If you are still using HTTP/1, you may need to still concatenate your files, it's less true if your server use HTTP/2 (tests should be made).

    How:

    โƒ Use online tool or any plugin before or during your build or your deployment to concatenate your files.
    โƒ Ensure, of course, that concatenation does not break your project.

  • Non-blocking: high 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>

    Why:

    CSS files can block the page load and delay the rendering of your page. Using preload can actually load the CSS files before the browser starts showing the content of the page.

    How:

    โƒ You need to add the rel attribute with the preload value and add as="style" on the <link> element.

  • Unused CSS: medium Remove unused CSS selectors.

    Why:

    Removing unused CSS selectors can reduce the size of your files and then speed up the load of your assets.

    How:

    โƒ โš ๏ธ Always check if the framework CSS you want to use don't already has a reset / normalize code included. Sometimes you may not need everything that is inside your reset / normalize file.

  • CSS Critical: high The CSS critical (or "above the fold") collects all the CSS used to render the visible portion of the page. It is embedded before your principal CSS call and between <style></style> in a single line (minified if possible).

    *Why:*
> Inlining critical CSS help to speed up the rendering of the web pages reducing the number of requests to the server.

*How:*
> Generate the CSS critical with online tools or using a plugin like the one that Addy Osmani developed.

* ๐Ÿ“– [Understanding Critical CSS](https://www.smashingmagazine.com/2015/08/understanding-critical-css/)
* ๐Ÿ›  [Critical by Addy Osmani on GitHub](https://github.com/addyosmani/critical) automates this.
* ๐Ÿ“– [Inlining critical CSS for better web performance | Go Make Things](https://gomakethings.com/inlining-critical-css-for-better-web-performance/)
 * ๐Ÿ›  [Critical Path CSS Generator - Prioritize above the fold content :: SiteLocity](https://www.sitelocity.com/critical-path-css-generator)
 * ๐Ÿ“– [Reduce the size of the above-the-fold content

    ](https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent)

  • Embedded or inline CSS: high Avoid using embed or inline CSS inside your <body> (Not valid for HTTP/2)

    Why:

    One of the first reason it's because it's a good practice to separate content from design. It also helps you have a more maintainable code and keep your site accessible. But regarding performance, it's simply because it decreases the file-size of your HTML pages and the load time.

    How:

    Always use external stylesheets or embed CSS in your <head> (and follow the others CSS performance rules)

  • Analyse stylesheets complexity: high Analyzing your stylesheets can help you to flag issues, redundancies and duplicate CSS selectors.

    Why:

    Sometimes you may have redundancies or validation errors in your CSS, analysing your CSS files and removed these complexities can help you to speed up your CSS files (because your browser will read them faster)

    How:

    Your CSS should be organized, using a CSS preprocessor can help you with that. Some online tools listed below can also help you analysing and correct your code.

โฌ† back to top

Fonts

fonts

  • Prevent Flash or Invisible Text: medium Avoid transparent text until the Webfont is loaded

โฌ† back to top

Images

images

  • Use vector image vs raster/bitmap: medium Prefer using vector image rather than bitmap images (when possible).

    Why:

    Vector images (SVG) tend to be smaller than images and SVG's are responsive and scale perfectly. These images can be animated and modified by CSS.

โฌ† back to top

JavaScript

javascript

  • JS Minification: high All JavaScript files are minified, comments, white spaces and new lines are removed from production files (still valid if using HTTP/2).

    Why:

    Removing all unnecessary spaces, comments and break will reduce the size of your JavaScript files and speed up your site's page load times and obviously lighten the download for your user.

    How:

    โƒ Use the tools suggested below to minify your files automatically before or during your build or your deployment.

  • No JavaScript inside: medium (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>).

    Why:

    Placing JavaScript embedded code directly in your <body> can slow down your page because it loads while the DOM is being built. The best option is to use external files with async or defer to avoid blocking the DOM. Another option is to place some scripts inside your <head>. Most of the time analytics code or small script that need to load before the DOM gets to main processing.

    How:

    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>.

  • Non-blocking JavaScript: high 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>

    Why:

    JavaScript blocks the normal parsing of the HTML document, so when the parser reaches a <script> tag (particularly is inside the <head>), it stops to fetch and run it. Adding async or defer are highly recommended if your scripts are placed in the top of your page but less valuable if just before your </body> tag. But it's a good practice to always use these attributes to avoid any performance issue.

    How:

    โƒ 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.

  • Optimized and updated JS libraries: medium All JavaScript libraries used in your project are necessary (prefer Vanilla JavaScript for simple functionalities), updated to their latest version and don't overwhelm your JavaScript with unnecessary methods.

    Why:

    Most of the time, new versions come with optimization and security fix. You should use the most optimized code to speed up your project and ensure that you'll not slow down your website or app without outdated plugin.

    How:

    If your project use NPM packages, npm-check is a pretty interesting library to upgrade / update your libraries. Greenkeeper can automatically look for your dependencies and suggest an update every time a new version is out.

โฌ† back to top

Server

server-side

  • Your website is using HTTPS: high

    Why:

    HTTPS is not only for ecommerce websites, but for all websites that are exchanging data. Data shared by a user or data shared to an external entity. Modern browsers today limit functionalities for sites that are not secure. For example: geolocation, push notifications and service workers don't work if your instance is not using HTTPS. And today is much more easy to setup a project with an SSL certificate than it was before (and for free, thanks to Let's Encrypt).

  • Minimizing HTTP requests: high Always ensure that every file requested are essential for your website or application.
  • Use a CDN to deliver your assets: medium Use a CDN to deliver faster your content over the world.

  • Serve files from the same protocol: high Avoid having your website serving files coming from source using HTTP on your website which is using HTTPS for example. If your website is using HTTPS, external files should come from the same protocol.

  • Serve reachable files: high Avoid requesting unreachable files (404).

  • Set HTTP cache headers properly: high Set HTTP headers to avoid expensive number of roundtrips between your browser and the server.
  • GZIP / Brotli compression is enabled: high 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.

โฌ† back to top

Performances and JS Frameworks

Angular

React

Vue

Performances and CMS

WordPress

Articles

Plugins recommended

Translations

The Front-End Performance Checklist wants to also be available in other languages! Don't hesitate to submit your contribution!

Contributing

Open an issue or a pull request to suggest changes or additions.

Support

If you have any question or suggestion, don't hesitate to use Discord or Twitter:

Author

**Build with โค๏ธ by David Dias

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! ๐Ÿ™ [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

MIT

All icons are provided by Icons8

โฌ† back to top

About

๐ŸŽฎ The only Front-End Performance Checklist that runs faster than the others

Resources

Readme

License

MIT license

Code of conduct

Code of conduct
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published