Don’t just get assets from your resources pool and dump it right into your web pages. There is always a high chance that SVGs, images, fonts, videos, and every kind of asset you can think of come in their raw form and are poorly optimized for delivery. Let’s delve a bit into certain highlighted tips on how we can optimize the resources available to us:
In keeping with our goal to write leaner CSS selectors and abstain from repeating ourselves, writing efficient HTML should also be a priority. CSS resets often target all common elements and enforce “resetting” styling on them. So even if you aren’t targeting that extra div, it’s likely still slowing things down by having to have its padding and margin reset at a minimum. Typically, an extra div or two won’t make things worse. Only when you start ending up with dozens of them do things get crazy. With the introduction of more elements in HTML5, you should have more options in this area as well.
- Manually optimizing resources can be a pain. You can use cloud services that I will mention in the resource section to help you automate the process
- You can make quality checks part of your build process by automating these checks when every pull request or a submission is made into the system you’re building. This way, you are assured that your final product is free of poorly optimized contents.
Tools and Resources
Like this article? Follow @codebeast on Twitter