Tips every developer should know to improve site performance
Download as PPTX, PDF0 likes24 views
The document provides tips for optimizing websites for developers. It discusses optimizing the frontend by merging and minifying CSS and JavaScript files, using content delivery networks, and reducing web fonts. It also discusses optimizing the backend database by adding indexes, avoiding inserts in loops, using WHERE IN clauses for queries, optimizing JOINs, caching data, and more. The goal of these optimizations is to improve site performance and load times, especially for mobile users.
Tips every developer should know to improve site performance
- 1. Site Optimization Tips for developers By Adnan Siddiqi (http://adnansiddiqi.me)
- 2. Why Optimize? β’ Hundreds of websites are being launched everyday which are consumed by millions of people everyday on mobile, desktop and other means. β’ Small devices donβt have much resources, neither users of mobile devices have much time. Slow website will make them piss off and would make them to switch instantly to others. β’ End result, loss in business, cause and other. People are not going to listen you.
- 3. Types of Optimization β’ Frontend:- In which CSS, JS and at times HTML is refactored and optimized one way or other. β’ Backend:- Databases; indices, queries etc. Middle tier components.
- 4. Frontend
- 5. Performance Measuring Tools(Frontend) β’ WebPageTest:- This website takes an URL as input and gives details about delays related to requests.
- 6. Performance Measuring Tools(Frontend) β’ Google Page Speed:- A tool by Google gives suggestions as prescribed by Google for the input URL. It also provides tool to minimize files and pictures.
- 7. CSS Optimization β’ Merge CSS files:- Instead of loading multiple CSS files, combine all into one and then just load it. NPM tools like concat-css can be used for the purpose. Tools like Shrinker(http://shrinker.ch) could serve the purpose. β’ Minify CSS files:- Once files are merged, you can make them further efficient by minifying them. Minifying converts long variable and method name to a few character words thus decrease the file size. Online minify tools like CSSMinifier(https://cssminifier.com/) can help here.
- 8. JS Optimization β’ Merge JS files:- Like CSS, you must merge multiple files for the same purpose. The took like JSCompress(http://jscompress.com) should help you here. β’ Minify CSS files:- Once files are merged, you can make them further efficient by minifying them. They are minified for the same reason: to convert long variables/function to small one hence reducing file size. JavaScript minifer(https://javascript-minifier.com/) could serve the purpose.
- 9. Etcβ¦ β’ Use CDN: - Content Delivery Networks aka CDNs is a set of services distributed across different geographical locations thus make loading assets faster based on the requesterβs location via IP Address. Static assets like images, CSS or JS are usually served via CDN. CDN services like Amazon S3 or Cloudflare could be used for the purpose. β’ Reduce Web fonts usage hence they add additional requests.
- 10. Backend
- 11. Db Optimization β’ Indexes:- Make sure your database tables are properly indexed. As a rule of thumb index the fields which you want to retrieve by using WHERE, OrderBy or GroupBy clause. β’ Avoid inserts in loop(Bulk Inserts):- If you are inserting multiple records in a loop, instead of INSERTing in a loop, you should prepare an array kind of data structure and then make a bulk insert. MySQL provides such facility. β’ Use Where IN:- Instead of retrieving a single record you must use whereIn(..) instead of where = <value> while retrieving, updating or deleting records.
- 12. Db Optimization(Contd..) β’ Joins:- Instead of running a SELECT on a table and then SELECT records in a loop from other table, you should use JOIN where possible. β’ LIKE:- When using LIKE with multiple columns and with OR condition, it is better to use UNION which would run much faster. select from users where first_name like 'ABC%' union all select from students where last_name like 'ABC%' ; is faster than: select * from users where first_name like 'ABC%' or last_name like 'ABC%' ;
- 13. Db Optimization(Contd..) β’ Cache:- There are often parts of the system which are hardly updated or never updated at all. The best way to deal with such parts is to either cache it or convert static html of such parts. Frameworks like Laravel, Ruby and Django provides Query and HTML cache facilities.