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"

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:

öğenin düşük önceliğe sahip olduğu anlamına gelir.
öğenin orta düzeyde önceliğe sahip olduğu anlamına gelir. Bu öğeyi ele almaktan kaçınmamalısınız.
öğ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:

🛠 WebPagetest - Website Performance and Optimization Test
🛠 ☆ Dareboost: Website Speed Test and Website Analysis (WPCDD20 kupon kodunu -20% indirim için kullanabilirsiniz.)
🛠 Treo: Page Speed Monitoring
🛠 GTmetrix | Website Speed and Performance Optimization
🛠 PageSpeed Insights
🛠 Web.dev
🛠 Pingdom Website Speed Test
📖 Make the Web Faster | Google Developers
🛠 Sitespeed.io - Welcome to the wonderful world of Web Performance
🛠 Calibre
🛠 Website Speed Test | Check Web Performance » Dotcom-Tools
🛠 Website and Server Uptime Monitoring - Pingdom (Ücretsiz Kayıt Linki)
🛠 Uptime Robot
🛠 SpeedCurve: Monitor front-end performance
🛠 PWMetrics - CLI tool and lib to gather performance metrics
🛠 Varvy - Page speed optimization
🛠 Lighthouse - Google
🛠 Checkbot browser extension - Checks for web performance best practices
🛠 Yellow Lab Tools | Online test to help speeding up heavy web pages
🛠 Speedrank - Web Performance Monitoring
🛠 DebugBear - Monitor website performance and Lighthouse scores
🛠 packtracker.io - Check your webpack bundle size on every pull request.
🛠 Exthouse - Analyze the impact of a browser extension on web performance
🛠 LogRocket - Measure front-end performance in production apps

Referanslar

HTML

Minimize Edilmiş HTML: 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.
- 🛠 HTML minifier | Minify Code
- 🛠 Online HTML Compressor
- 📖 Experimenting with HTML minifier — Perfection Kills
CSS etiketlerini her zaman JavaScript etiketlerinden önce yerleştirin: CSS'nizin her zaman JavaScript kodundan önce yüklendiğinden emin olun.
```

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


<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.
- 📖 Ordering your styles and scripts for pagespeed
iframe sayısını en aza indirin: 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: 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

Minimizasyon: 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.
- 🛠 cssnano: A modular minifier based on the PostCSS ecosystem. - cssnano
- 🛠 CSS Minfier
- 🛠 @neutrinojs/style-minify - npm
- 🛠 Online CSS Compressor
Birleştirme: CSS files are concatenated in a single file (Not always valid for HTTP/2).
```

<link rel="stylesheet" href="foo.css" />
<link rel="stylesheet" href="bar.css" />


<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.
- 📖 HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)
- 📖 Performance Best Practices in the HTTP/2 Era
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>
```
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: 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.
- 🛠 UnCSS Online
- 🛠 PurifyCSS
- 🛠 PurgeCSS
- 🛠 Chrome DevTools Coverage

CSS Critical: 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: 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)
- 📖 Observe CSS Best Practices: Avoid CSS Inline Styles
Analyse stylesheets complexity: 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.
- 🛠 TestMyCSS | Optimize and Check CSS Performance
- 🛠 CSS Stats
- 🛠 macbre/analyze-css: CSS selectors complexity and performance analyzer
- 🛠 Project Wallace is like CSS Stats but stores stats over time so you can track your changes

⬆ back to top

Fonts

📖 A Book Apart, Webfont Handbook

Webfont formats: You are using WOFF2 on your web project or application.

Why:

According to Google, the WOFF 2.0 Web Font compression format offers 30% average gain over WOFF 1.0. It's then good to use WOFF 2.0, WOFF 1.0 as a fallback and TTF.

How:

Check before buying your new font that the provider gives you the WOFF2 format. If you are using a free font, you can always use Font Squirrel to generate all the formats you need.
Use preconnect to load your fonts faster:
```
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
```
Why:

When you arrived on a website, your device needs to find out where your site lives and which server it needs to connect with. Your browser had to contact a DNS server and wait for the lookup complete before fetching the resource (fonts, CSS files...). Prefetches and preconnects allow the browser to lookup the DNS information and start establishing a TCP connection to the server hosting the font file. This provides a performance boost because by the time the browser gets around to parsing the css file with the font information and discovering it needs to request a font file from the server, it will already have pre-resolved the DNS information and have an open connection to the server ready in its connection pool.

How:

⁃ 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)

📖 Font Bytes - Page Weight

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

⬆ back to top

Images

📖 Image Bytes in 2018
Images optimization: Your images are optimized, compressed without direct impact to the end user.

Why:

Optimized images load faster in your browser and consume less data.

How:

⁃ Try using CSS3 effects when it's possible (instead of a small image)
⁃ When it's possible, use fonts instead of text encoded in your images
⁃ Use SVG
⁃ Use a tool and specify a level compression under 85.
Images format: Choose your image format appropriately.

Why:

To ensure that your images don't slow your website, choose the format that will correspond to your image. If it's a photo, JPEG is most of the time more appropriate than PNG or GIF. But don't forget to look a the nex-gen formats which can reduce the size of your files. Each image format has pros and cons, it's important to know these to make the best choice possible.

How:

⁃ Use Lighthouse to identify which images can eventually use next-gen formats (like JPEG 2000m JPEG XR or WebP)
⁃ Compare different formats, sometimes using PNG8 is better than PNG16, sometimes it's not.

Use vector image vs raster/bitmap: 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.

Images dimensions: Set width and height attributes on <img> if the final rendered image size is known.

Why:

If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).
Avoid using Base64 images: You could eventually convert tiny images to base64 but it's actually not the best practice.
Lazy loading: Offscreen images are loaded lazily (A noscript fallback is always provided).

Why:

It will improve the response time of the current page and then avoid loading unnecessary images that the user may not need.

How:

⁃ Use Lighthouse to identify how many images are offscreen.
⁃ Use a JavaScript plugin like the following to lazyload your images. Make sure you target offscreen images only.
⁃ Also make sure to lazyload alternative images shown at mouseover or upon other user actions.
Responsive images: Ensure to serve images that are close to your display size.

Why:

Small devices don't need images bigger than their viewport. It's recommended to have multiple versions of one image on different sizes.

How:

⁃ Create different image sizes for the devices you want to target.
⁃ Use srcset and picture to deliver multiple variants of each image.
- 📖 Responsive images - Learn web development | MDN

⬆ back to top

JavaScript

JS Minification: 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: (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>.
- 📖 11 Tips to Optimize JavaScript and Improve Website Loading Speeds
Non-blocking JavaScript: JavaScript files are loaded asynchronously using async or deferred using defer attribute.
```

<script defer src="foo.js"></script>


<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.
- 📖 Remove Render-Blocking JavaScript
- 📖 Defer loading JavaScript
Optimized and updated JS libraries: 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.
- 📖 You may not need jQuery
- 📖 Vanilla JavaScript for building powerful web applications

Check dependencies size limit: Ensure to use wisely external libraries, most of the time, you can use a lighter library for a same functionality.

Why:

You may be tempted to use one of the 745 000 packages you can find on npm, but you need to choose the best package for your needs. For example, MomentJS is an awesome library but with a lot of methods you may never use, that's why Day.js was created. It's just 2kB vs 16.4kB gz for Moment.

How:

Always compare and choose the best and lighter library for your needs. You can also use tools like npm trends to compare NPM package downloads counts or Bundlephobia to know the size of your dependencies.
JavaScript Profiling: Check for performance problems in your JavaScript files (and CSS too).

Why:

JavaScript complexity can slow down runtime performance. Identifying these possible issues are essential to offer the smoothest user experience.

How:

Use the Timeline tool in the Chrome Developer Tool to evaluate scripts events and found the one that may take too much time.
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.

⬆ back to top

Server

Your website is using HTTPS:

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

Page weight < 1500 KB (ideally < 500 KB): Reduce the size of your page + resources as much as you can.

Why:

Ideally you should try to target < 500 KB but the state of web shows that the median of Kilobytes is around 1500 KB (even on mobile). Depending on your target users, network connection, devices, it's important to reduce as much as possible your total Kilobytes to have the best user experience possible.

How:

⁃ All the rules inside the Front-End Performance Checklist will help you to reduce as much as possible your resources and your code.
- 📖 Page Weight
- 🛠 What Does My Site Cost?
- 🛠 web - Measure full page size in Chrome DevTools - Stack Overflow
Page load times < 3 seconds: Reduce as much as possible your page load times to quickly deliver your content to your users.

Why:

Faster your website or app is, less you have probability of bounce increases, in other terms you have less chances to lose your user or future client. Enough researches on the subject prove that point.

How:

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.

Cookie size: If you are using cookies, be sure each cookie doesn't exceed 4096 bytes and your domain name doesn't have more than 20 cookies.

Why:

Cookies are exchanged in the HTTP headers between web servers and browsers. It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.

How:

Eliminate unnecessary cookies.

Minimizing HTTP requests: Always ensure that every file requested are essential for your website or application.

📖 Combine external CSS
📖 Combine external JavaScript

Use a CDN to deliver your assets: Use a CDN to deliver faster your content over the world.

Serve files from the same protocol: 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: Avoid requesting unreachable files (404).

📖 How to avoid bad requests

Set HTTP cache headers properly: Set HTTP headers to avoid expensive number of roundtrips between your browser and the server.

📖 Using cache-control for browser caching

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.

⬆ back to top