10 Web Performance Audit Tips for Your Next Billion Users in 2018: Delivering Optimized Resources

Publikováno: 28.5.2019

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:

Write Smarter, More Reliable Code

Sometimes the very code we’re writing is the slowest link in the chain. Inefficient CSS or bloated JavaScript can hurt loading times more than you may think. A good example is writing the exact path down a chain of selectors - this is less efficient than simply using the smallest uniquely identifiable selector instead. Of course they both direct the styling to the same element, the latter simply gets the job done much, much faster. Poorly written JavaScript can be even worse than poorly written CSS, and in many cases it’s easily overlooked. How many times have you copied and pasted an external JS library into your project without really looking in depth at the source itself? A good instance is Typekit - when their servers stall it can bring a webpage using their fonts to a slowdown and cause an additional 30 seconds or even minutes of extra load time. Thankfully, such events happen rarely, but it’s still good practice to call JavaScript last if possible, as is the case with Google Analytics. Doing so allows the browser to parse through the head files (CSS, HTTP requests, etc) and display the markup, before JavaScript begins to slow things down.

Keep HTML Very Simple

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.

For The Sake of SEO

Google has made it a priority to whip the internet collectively into shape. In order to occupy prominent positions within their search results, pages must now pay critical attention to many different attributes about how they’re rendered. Calling a lot of external resources, having large images, or even having poorly written JavaScript can pull a site down in ranking. Thankfully though, this is all with good intention as their requirements for a good search ranking are built around good development practices. You can check out this very detailed guide written by Google to optimize different aspects of your site for better SEO — which also happens to enhance awesome development practices at the same time.

Considerations

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