fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 12:52:10 +00:00
Code Issues Projects Releases Wiki Activity

CLS: Declare original image dimensions in HTML

Browse source 
Reduce Cumulative Layout Shift (CLS) by declaring original image
dimensions in HTML before re-scaling with CSS. This tells browsers the
image's aspect ratio before the image and the stylesheet load, allowing
browsers to block out space accordingly to avoid making elements "jump"
during loading.

More info: https://web.dev/optimize-cls/
This commit is contained in:
rohan kumar 2020-12-15 23:09:45 -08:00
parent af6ece0e10
commit d45926c0f4
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 2 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
content/posts/website-best-practices.md
View file

@ -172,7 +172,7 @@ an example:
<picture>
<source srcset="https://seirdy.one/misc/website_colors.webp" type="image/webp">
<img src="https://seirdy.one/misc/website_colors.png" alt="This page with a grey background, a header with unreadable black/grey text, and unreadable white-on-white code snippets">
<img src="https://seirdy.one/misc/website_colors.png" width="637" height="484" alt="This page with a grey background, a header with unreadable black/grey text, and unreadable white-on-white code snippets">
</picture>
If you do explicitly set colors, please also include a dark theme using a media

1
themes/etch-custom/assets/css/main.css
View file

@ -59,6 +59,7 @@ h3 {
}
img {
height: auto;
margin: 0 auto;
max-width: 100%;
}