html/css optimization
Hey, what are some recommended tips for improving performance that you can incorporate into your html/css, i've heard of things like the
preconnect attribute for font sites etc. Thanks in advance.36 Replies
add widths / heights to images, download fonts and store them in your project rather than using a separate stylsheet (don't use google fonts link or @import for example). add
loading=lazy to your images; use .webp and compress
more that i'm not thinking of but that should help a lotawesome, appreciate that, i'll give them a look
have you got any resources by any chance explaining the reasoning behind these and how to efficiently do things like downloading the fonts etc?
iirc I think web.dev has some good optimization resources -- it's by google i think
i learned a lot by just putting my site in pagespeed insights (lighthouse) and looking up the errors or warnings it gave me and seeing how to fix them
for example adding explicit width / height attributes on your html element (rather than css) allows the page to know how much space to make for the image or element before the css is loaded. this basically stops the image from having 0 height / width to 500px for example and it'll be jarring for the user and worse for performance ( i dont know the performance specific parts though so can't explain well)
alrighty i'll give them a shot, thanks
also add
decoding="lazy" to your images
you MUST HAVE A GOOD alt
it's a requirement, not optional
you can also use <link preconnect>, to speed up loading resources from other domains, like a cdnwhats that? i dont see anything in mdn about it
u mean async?
yes, async, sorry
nw! ty
wrong value
but yeah, using that is a good idea
there's more things to do, like using lazyloading for iframes too
web.dev also has something for lazy loading videos too, it's a pretty simple js file
yes, you can set it to just preload metadata, which makes the video preload just what it needs
you can also use fake progressive loading by encoding the image as a very small base64 url, and blur it
while the image is loading, you can show it as a background that represents the image that will be loaded
(this because we don't have jpegxl support yet, and progressive jpegs aren't common)
also, using the nasty webp
oh, and some critical path css as well, that's very important
reducing all svg icons into a single file with
<symbol> is a good way to save space
there's so much you can do to optimize your websitewhat i do is to send css variables and just enough to produce some layout so it doesn't look all wacky
and keep a look at your content layout shifting
btw i didnt know this but i've seen this done in a larger codebase and now it makes sense
OH, something i forgot: use
defer on your scripts
defer renders the page and loads the javascript at the same time, but only runs it after everything is done rendering
it makes a lot more sense than you can imagine
i use it a lot on a project at work
i've used it before on other personal projectsso basically you only have a request for one svg file instead of 20?
if you load data dynamically, and it needs to show icons, this is a good way
yes, specially if you use 80-90% of the icons on the same page anyways
that's huge savings
do u have an article for this? just curious how it'd work in my setup since i manually copy and paste the svg code instead of importing it or some other way so wondering if it would work in for my usecase
one thing: people hate this, but, EVERY SINGLE ASSET should have
?v=x.y.z or ?t=<timestamp>
this is a cache busting technique, which is used to force the browser to download the new version of the file, and if you go back the browser will load the old version from cache as well
this avoids situations where your browser refuses to load the new css/js/image file
i think that iconify does this for youhm not trying to add another dependency, ill have to see how to do it manually
i made my own utility that generates this by reading all blade templates and read a specific directive
niceee
it depends a lot of your setup
i did add a lot of stuff, like, automatically removing js events and accessibility attributes (because they can cause weird stuff), ids, data attributes and cleaned up the whitespace and set the fill or stroke to
currentColor
but i recommend doing this manually, as you get better resultsyea we have a cms and twig templates with it, but a lot of our svgs are just in our public dir, so i think it would make the most sense to just do it manually
ofc users can go in and add svgs, but im not too worried on that as thats a separate issue with a lot of complexity
i mean, optimize the svgs manually
you have no idea the garbage that svgs have
people put groups inside of groups inside of groups and then use css styles to set things that can be an attribute
yea our svg files are definitely like that lol
and removing the repeated attributes to groups also saves A TON
there's so much you can do to optimize svgs
for example, if you have 5-6 paths that use the same exact attributes, you can just convert them to a single path by throwing everything at the end of one path (but make sure that the
m command is converted to M - which converts from relative to absolute)
this is all things that can save a lot of space
and optimize the html a lotthat's another thing on my bucket list to look into now 😂 ty!
you're welcome
by the way, something that people overlook: using a link or a button instead of using a div or a span with events attached
some people use the most cursed shit as a button or link
use the proper element for it's job
saves a ton of time, js, html and css
and at the end of the project, when you're about to publish, make sure you minify your js and css
which should be part of the production build step, if you have one
i see that all the time, idk if its just a legacy thing of older web stuff but i allllllways see
a href="#" for buttons in these old wp sites i have to manage for clients
and it drives me nuts lolbecause people think "i need something clickable", and what almost everybody thinks of is a link
why? it looks the most like a link - which is something clickable by default
oh wow a lot of stuff to look into here haha, thanks everyone
you haven't got any resources on how to do this by any chance have you?
not really
no worries