Page Speed Optimization
Page Speed is the amount of time it takes to completely load content on your webpage.
Typically the DOM will need to request additional resources from your server to make everything happen, and this is where things start to really slow down your site.
Why you should care about page speed?
Page speed is a critical factor when it comes to ranking your website higher on Google’s search engine results.
Slower the site, the chance of someone bouncing from your site increases dramatically:
- Better user experience.
Page Speed Optimization
Here are some of the many ways to increase your page speed:
1. Use a CDN
2. Optimize Images
Be sure that your images are no larger than they need to be, that they are in the right file format (PNGs are generally better for graphics with fewer than 16 colours while JPEGs are generally better for photographs) and that they are compressed for the web.
3. Browser Caching
4. Reduce Redirects
Redirects slow down your site considerably. Each time a page redirects to another page, your visitor faces additional time waiting for the HTTP request-response cycle to complete. Instead of having special subdomain for mobile users, use responsive CSS and serve your website from one domain.
Some redirects are unavoidable, such as www -> root domain or root domain -> www, but the majority of your traffic shouldn't be experiencing a redirect to view your site.
Minifying your code (include removing spaces, commas, and other unnecessary characters), you can dramatically increase your page speed. Also remove code comments, formatting, and unused code.
Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script, the parser is also forced to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render of the page.
Scripts that are necessary to render page content can be inlined to avoid extra network requests, however, the inlined content needs to be small and must execute quickly to deliver a good performance.
async attribute on external scripts:
<script async src="my.js">
When you’ve spent countless days, weeks, and months building a new website, you want it to be perfect. I would recommend to regularly track your site's speed using tools like WebPageTest & improve it using the above points.
Interested in reading more such articles from Piyush Sinha?
Support the author by donating an amount of your choice.