Not all performance improvements are equal. If your CSS file loads in 100ms, but your images take 20 seconds to load, it makes more sense to focus on the images before trying to squeeze extra performance out of an already performant CSS file. In order to know where to spend your time to get the most in return for your effort, you need to know how your site is currently performing.
What Are Performance Budgets And Why You Should Use One
One recent trend in web design is the use of a hero image. A hero image is a large background image at the top of the page and it offers a quick overview of what the site is all about. Some suggest that when done well they lead to higher conversion rates. However, a large image adds weight to your page and could reduce site performance. Should you use a hero image?
What Happens When Your Browser Requests a Web Page?
A lot of things happen between the time you request a web page and the time it completely loads in your browser. Each of those things takes anywhere from a few milliseconds to several minutes to complete and reducing the time of any step in the process improves the overall performance of the page.
An Introduction To The Performance Of Websites
Among the first web development books I read was Speed Up Your Site by Andrew King. It’s close to 15 years old at this point and I suspect a bit out of date given all the changes in web development over that time, but it taught me early in my career about the importance of website performance.
Add Bevel And Emboss Effects With The feConvolveMatrix Filter Primitive
I’m sure you’ve used your graphic editor to add an emboss or a bevel to some graphic element. If so you’ll probably like working with feConvolveMatrix, which can be used to do both.