Introduction
Hundreds of websites/web apps are being launched every day for different purposes. Poorly optimized websites not only leave a bad impact on visitors but also hurt businesses. While more and more people visiting websites on their mobile devices, it is very important to make them load fast. In this post, I am going to discuss a few things that every developer should know while building or updating a website to load them fast. I will categorize these issues into two sections: Frontend and Backend.
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.
We must know what to fix and it is only possible how to measure. There are two tools that should give you a kickstart:
- WebPageTest:- This website takes an URL as an input and gives details about delays related to requests.
- 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.
Let’s discuss frontend optimization first.
Frontend Optimization
We will mainly be discussing CSS and JS optimization here. When we are discussing frontend optimization it is mostly about reducing a number of requests to the server, especially for static resources (JS, CSS, Images etc).
CSS Optimization
It is mainly about merging and minification of CSS files.
- Merge CSS:- 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 can help here.
JS Optimization
Like CSS it is also about merging and minifying files.
- Merge JS files:- Like CSS, you must merge multiple files for the same purpose. The took like JSCompress 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 could serve the purpose.
Using 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.
Reducing WebFonts usage
Reduce Web fonts usage hence they add additional requests.
Backend Optimization
I will be covering mostly the database because it is the main bottleneck. Caching is also used to take care of it.
- 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.
- Joins:- Instead of running a SELECT on a table and then SELECT records in a loop from other tables, 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%’ ; - 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 provide Query and HTML cache facilities.
Conclusion
So, as you learned that how applying these techniques can not only help to improve your sites but also help to become a better developer. Give your feedback and share your tips to make a website faster as I just can’t cover every tip right here.
