Hello everyone and welcome to this tutorial on “How to speed up your website? Web page optimization tips”.
Whenever on internet it is basically desired to have things happening faster, right? But your website is not performing good enough? Well, here are 10 site optimization tips that will boost your website loading speed.
Bored with the Texts? Watch the video instead.
1. Compress images to reduce file size:
Its good to have no images than having bad quality images on your site. But good quality images will slow down your loading speed also. So this is very important to have a balance between the image quality and the file size of the image. Backup the original image and try to use software like Adobe Photoshop to save the image optimized for website. This will dramatically make your site faster if you haven’t done it already.
2. Scale Down Images:
Another high impact reason for slower speed of you website. Consider that you have a gallery page where you display a lot of small images. But actually these images are small. They are as you uploaded, big images. But you use height and width attribute on image tag to show them as small. This is not a good idea. Create different versions of your images like thumbnail (200×200), medium (640×480), Original etc. and display them as per needed. Where you want to display small version of your original big image, use the thumbnail version and so on. This technique will speed up your website a lot.
3. Minify CSS and JS files:
Modern websites will obviously have so many CSS and JS scripts. This can not be ignored. But for site optimization, you should minify you CSS and JS files. Search in google with “Online JS minify” and “Online CSS minify” and use those online services to minify your scripts. This will reduce a lot of KB that will speed up your website.
4. Combine CSS and JS files:
Modern website will obviously have so many CSS and JS scripts, but you should know that each files means different request to the server from the browser. So it is even better to have 1 big file than 5 small files. So try to combine (whenever possible) all JS file into 1 or 2 JS files and same for CSS. In site optimization this will very highly help you to speed up your website.
5. Put JavaScript at bottom:
This is also good practice in site optimization that you load your JS files just before your footer. This will let the browser draw the page without being blocked by JS files loading.
6. Put CSS at top:
CSS is required to make structure of the website. If you put it at bottom many browsers including internet explorer will ignore rendering the page until they reached the bottom if you do not include CSS at top because they will not render your page as they might have to do again after they get CSS. So when browsers get CSS at top, they start rendering progressively. This will speed up your website for sure.
7. Avoid image icons or use sprites:
Avoid using image icons. Please. Try to use font icons. There are lots of them available now. But you can start with the most popular known as Font Awesome. If you must have to use image icons, then try to combine all the icons into a single image sprites and use it wisely with CSS.
8. Do not use blank or empty SRC or HREF attribute anywhere:
This will cause some browsers to request the whole page again and then they find that the received data is not compatible so they will not anything. But in the time you lost traffic and you user had to wait until the unnecessary request was complete. So find and remove any blank or empty SRC or HREF attributes.
9. Make AJAX cacheable:
If not strictly required, let the browser cache the results of an AJAX calls. To speed up your website, you should do this mostly in cases where the AJAX call is made for every viewer.
10. Make fewer HTTP requests:
Simply understand, try to copy 3000 files of total size 1 GB from drive to another, now try to copy 10 files of total size 1 GB from that same drive to the same destination drive. Which is taking longer time? Obviously the first one. The reason is how the system open, then read and then close a file. Doing this 3 operation for 3000 files will obviously take longer time than for 10 files. So try to link less CSS and JS file (point number 04), less images, avoid images as icons (point number 07) etc. and speed up your website.
Apply these changes and let me know how it worked. You can also give me website or web page URL to take look that if I can help you with anything.