Danův blog

Cyklistika, programování, společnost, kultura

Strana 6 z 43

Kate Bush ‎“ The Kiсk Insidе “ Full Album

Customizable WordPress Gallery Plugin – Modula Image Gallery

Customizable WordPress Gallery Plugin – Modula Image Gallery

Super Link Preview

Super Link Preview

Lightbox & Modal Popup WordPress Plugin – FooBox

Lightbox & Modal Popup WordPress Plugin – FooBox

Best WordPress Gallery Plugin – FooGallery

FooGallery – Responsive Photo Gallery, Image Viewer, Justified, Masonry & Carousel

Attachment File Icons (AF Icons)

Attachment File Icons (AF Icons)

Cookies and Content Security Policy

Cookies and Content Security Policy

 

MTB dovolená 2023 – náměty

Cervinia

Chata Standard | Kempy – Cervino (campingcervino.com)

Jednoznakovky

Online nástroj na automatické vložení nedělitelných mezer za jednoznakové předložky, k číslům, do zkratek, náhrady pomlček a uvozovek a další typografické úpravy českého textu.

https://jednoznakovky.cz/

Bezplatné fonty, ikony a obrázky

Převzatý článek

Fonts

Golden Ratio Typography

Get correct line height for your font => https://grtcalculator.com

Fonts

Fonts optimization

When loading custom font, you should check out the following optimization tricks:

  • Try to avoid importing various font sizes: 300,400,700 should be enough for most cases
  • You may want to download the font and host it from your own server. It’s faster then using external CDN.
  • Use woff or woff2. Avoid SVG fonts
  • The fastest way to load the font is to convert it into the Base64 into the CSS file. This way, the browsers doesn’t have to wait for the font to load and there are no layout shifts caused by the font change.
  • When lazyloading the font, use the property. This doesn’t block the page rendering.font-diplay:swap

Icons

Icons sets

Icons optimization

When adding icons to your page, you might consider some optimization steps:

  • If you need icons like arrow left or arrow right, you might want to take one icon and use the CSS to rotate the icon in the direction you need. This way, you can have one icon for various directions
  • When you need to load various icons, check out some applications like IcoMoon. This app can merge various icons into one font. It can improve page performance because there are fewer requests. Also, the font is more flexible than embedding a link to each icon
  • Icons should be in the SVG format. Try to avoid JPG or PNG. It is because SVG size can be changed easily without getting blurred.
  • If the icon is a direct path but can be lazyloaded, you should add the loading="lazy" and the decoding="async" attribute. This allows the browser to continue rendering the page and decode images asynchronously.

Images

Images optimization

When loading various images on page, try following optimization tricks:

  • If the image should be loaded immediately, use fetchpriority="high" attribute. Otherwise use loading="lazy". This will decrease the amount of images loaded when the customer enters the page.
  • Use correct size. If the block size is for example 400×200, do not load image 2000×1000
  • For images, that are large on desktop, try to split the image into smaller pieces and load it using <picture> element.

Powered by WordPress & Theme by Anders Norén