Strana 7 z 44
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.
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
- IcoMoon
- Nucleo Icons
- Feather
- Remix Icon
- Typicons
- Eva Icons
- Octicons
- Bootstrap Icons
- Jam Icons
- Tabler Icons
- Boxicons
- CSS.gg
- Mono Icons
- Radix Icons
- Photosphor
- Themify
Icons optimization
When adding icons to your page, you might consider some optimization steps:
- If you need icons like
arrow leftorarrow 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 thedecoding="async"attribute. This allows the browser to continue rendering the page and decode images asynchronously.
Images
- UnDraw
- OpenDoodles
- MixKit
- Ira Design
- Illustration Kit
- Illustrations.co
- Delesign
- Reshot
- Open Stickers
- Higlights design
Images optimization
When loading various images on page, try following optimization tricks:
- If the image should be loaded immediately, use
fetchpriority="high"attribute. Otherwise useloading="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.
|
1 2 3 4 5 6 7 |
<p id="demo"></p> <script> function reverseString(str) { return str.split("").reverse().join(""); } document.getElementById("demo").innerHTML = reverseString("())("); </script> |
Since Gutenberg morphed into the WordPress Block Editor as of WordPress 5.0, many people have been using it to build content on their blogs, websites, and ecommerce stores. However, if you’ve only been using the bare-bones functionality that it comes with, then you are doing your website a disservice. There are so many awesome plugins that expand the basic Gutenberg editor’s capabilities. In the sections below, we’re going to check out eleven of these best block plugins for WordPress, so that you can elevate your WordPress game higher.