thedaviddias / front-end-performance-checklist Goto Github PK

It seems that https://frontendchecklist.io is fully online.

Thank you in advance.

I just saw this little problem i want to help fix.

https://github.com/thedaviddias/Front-End-Performance-Checklist/blame/master/README.md#L374

Why:
> To ensure that your images don't slow your website, choose the format that will

Hi David,

This is the Chinese Version of Front-End-Performance-Checklist

Even though Pingdom Uptime monitoring tool is not built for this but it does keep a record of all historical TTFB timings (Refer to screenshot). Should we include it in TTFB tooling section or would that confuse people?

In the Vietnamese translation, this icon is not the national flag of Vietnam 🇻🇮. I think it's the flag of the Virgin Islands.
This is the correct Vietnam flag: 🇻🇳
An image correct Vietnam flag: https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Vietnam.svg/1200px-Flag_of_Vietnam.svg.png

Hi,

thank you for creating the list I’ve always wanted to create and for mentioning my LazyLoad script.

it’s very important to mention that LazyLoad should be used only for images that are offscreen, and the first N above the fold images should be loaded normally.

This allows browsers to fetch the first images as soon as possible, way before JavaScript is downloaded, parsed and executed, and optimize performance.

Google recommends that the above the fold content (including HTML markup, Images, CSS, JS) should not weight more than 14.6KB (compressed) because of the first TCP packet size limit. Refer to these resources -

• https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
• https://books.google.com/books?id=FOYPDQAAQBAJ&pg=PT297&dq=14.6kB+html+size+performance

Should we add this information in the checklist?

Can I open PR for making the images (logo or low, medium, ...) non-clickable?

ex)

<img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/master/images/logo-front-end-performance-checklist.jpg" alt="Front-End Performance Checklist" width="170">

to

<a href="#"><img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/master/images/logo-front-end-performance-checklist.jpg" alt="Front-End Performance Checklist" width="170"></a>

According to the talk FaCSSt—CSS and Performance @ 39:35 about loading CSS and JS,

Example from the talk:

<link rel="stylesheet" href="…">
<script>
  var script = document.createElement('script')
  script.src = '…'
  document.getElementByTagNames('head')[0].appendChild(script)
</script>

Since a <script> may alter the CSSOM of the previous <link> tag, the browser will not execute the <script> tag until all stylesheets declared beforehand finished loading.

#138

There are still ScaleYourCode links. See TTFB section.

Hi, is it possible to add the following tool in the 'Performance tools' section?

KeeperApp.io - Periodically test your website for Performance, SEO, Accessibility, Web Core Vitals and more

I currently working on Persian translation.

https://github.com/ms-fadaei/Front-End-Performance-Checklist

Checklist recommend using HTTP2, but also recommend to not use HTTPS. However HTTP2 works only over TLS: https://caniuse.com/#search=http2 Thus HTTPS2 is recommended way: https://www.troyhunt.com/i-wanna-go-fast-https-massive-speed-advantage/

DNS preanalyze is a way to reduce DNS analyze time:

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://www.baidu.com" />

It would be nice to add functionality of custom check lists based on the main list of checks.

Out

Hi,

i'd like to submit a translation for this.
What would be the best way of doing so? i created branch on my forked repo however i've seen translations added to a specific folder at the master branch on similar projects...

What would suit this project's case better?

Free online earning

Maybe worth adding?

Every link pointing towards https://scaleyourcode.com are dead, the server doesn't seem to respond.

The website is not shown in search results so might be down since some time

currently the project description says

The only Front-End Performance Checklist that runs faster than the others https://frontendchecklist.io(soon on)

But https://frontendchecklist.io/ is already online, so "soon on" should be removed :)

Hi,
Can I help with the Japanese translation?

https://github.com/GameWith/Front-End-Performance-Checklist

• Introduction
• HTML
• CSS
• Fonts
• Images
• JavaScript
• Server (in progress)
• JS Frameworks (in progress)

@thedaviddias

Since in html5 the closing slash on void tags, such as in:

<img src="my-image.jpg" alt="cat picture"/>

is not mandatory, wouldn't it be better to remove it from the examples and actually add it as a low priority reccomendation in the same way it's reccomended to remove unnecessary attributes?

Hey
Would be important also to know about APIs. If consuming, how to connect to them or if serving, how to deliver them?
Any real world language would almost always have to deal with APIs. That itself contributes to the point "TOO many HTTP requests"

In Server, we can also talk about important performance enhancive techiniques like caching - page and db, load balancers, etc.

Would be also nice to know of ways to do it yourself, for eg, instead of saying pay to CDN which can get costly overtime, how can we do it on your own if starting with a small project, like having a different subdomains(cookie-free) to serve static content.

I translated the checklist into Korean:
https://github.com/ParkSB/Front-End-Performance-Checklist

I'm working on it with https://github.com/EsTharian/Front-End-Performance-Checklist

I translated your version to Vietnamese.
This is my repository, https://github.com/idist-hn/Front-End-Performance-Checklist
I very glad when contributing to this project.
Thank you very much.

Hi, referring to #128 PR, here: https://github.com/mbiesiad/Front-End-Performance-Checklist

is a Polish translation 🔥

@thedaviddias
Best wishes

Hello,

The references section mentions:
* 📖 [Front-End Performance Checklist 2018 [PDF, Apple Pages]](https://www.smashingmagazine.com/2018/01/front-end-performance-checklist-2018-pdf-pages/)

This reference is updated yearly, with the latest link being: https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/

I did not want to open a pull request if it was a reference cite or anything like that.

Thanks.

I really like this project and I decided to contribute with the Italian translation.
I started today https://github.com/marbio/Front-End-Performance-Checklist 😊