Generally speaking, all frontend optimization comes down to two types of tasks. The first is to speed up the transfer of data over the network. It consists of two sub-items: reducing the number of requests to the server and reducing the amount of transmitted data. And the second is to speed up the application in the browser.

And now, for more details, let’s dive in.

1. Glue JavaScripts and CSS styles

2. Compress JavaScript, styles, and HTML code

3. Optimize images

4. Make image sprites

5. Apply lazy load — lazy loading of images

6. Don’t be lazy to preview images

7. Serve static content from different domains/subdomains

8. Include JavaScript code or files at the end of the page

9. Include styles dynamically (but carefully)

10. Get rid of unnecessary DOM elements

11. Use native JavaScript instead of jQuery

12. Don’t be afraid to hang ID on DOM elements for quick access to them from JavaScript code

13. Use CSS animations instead of JavaScript

14. Avoid heavy DOM operations when scrolling/scrolling the page and deal with throttle and denounce

15. Study AJAX requests and analyze data transfer from the server

#javascript