1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[GUIDE] Make your web pages load faster!

Discussion in 'General Scripting Chat' started by Gogol, Nov 10, 2013.

  1. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,062
    Likes Received:
    2,872
    Gender:
    Male
    As the title says, I am going to discuss how to make your websites load faster than ever. Though I build websites with php, I am trying to make this article as generalized as possible. To make your pages load faster, you will only have to remember one rule of thumb!

    Less requests = faster page load


    Now let's explain that. Suppose you have 5 css files each having 10kb size. You are loading them in a page. You have combined those 5 css files into one, and the total size for that combined css file is 50kb. You load that combined css file in another page. If both the pages have same elements, then which page would load faster?
    You are probably going to think that both the pages will load at the same time, but it is not the case. The second page which has the combined css file will load a lot faster. Why? This has to do with the request. When your browser requests for a file, the server needs some time to reply with file and other requests has to wait till one has downloaded completely. This time is NOT negligible when multiple files are getting loaded. So, follow the rule of thumb when you can.

    How to use the rule?

    Combine all your css files into one big file.
    Combine all your jS files into one big file.
    Combine all of your background images into one sprite image.

    You might think that it will affect the working of your site but believe me it won't. As for the css files, minimize all of them and paste into a big css file in the order that they were getting loaded. One thing to make sure, that you don't use @import rules, as it is basically the same as using multiple css files.
    Do the same with your JS files. If you are using JQuery, then after each paste, insert the following code, which will take care of the conflicts.

    Read this stackoverflow article for combining with tools, instead of doing manually.

    As for the images, combine all your images into one big image sprite and when you are using them in css, use background position property. Read this article for more information about using css sprite.

    CSS at top, Scripts at bottom

    Include CSS file before </head>, because CSS files define how your page would look. So they need to be loaded before your page elements load. DO NOT put JS file on top. Put them before</body>. Why? If you put the JS files on top, your browser will try downloading the files before loading page elements and that will increase the loading time ( to user's eyes). The JS files can be loaded after everything else have loaded. That way, the user won't feel that it is taking time to load the page.


    Compression and caching
    This is a very handy trick that most of the big websites use. If you are using apache, then append the following to your htaccess


    Query caching and optimization

    This is a very vast subject and impossible to cover in one topic. Still I am doing my best to summarize what to look for. Query caching is basically caching the database queries and loading the results without querying the actual database if data has not been changed. If you have a website with 10 visitors every second, you will surely need this to be implemented somehow. If you don't cache your queries, you will notice frequent database timeouts. Some PHP based frameworks like Yii framework ( I am sure the others will have it too. It's a standard these days lol) have query caching implemented. So it might be the time to move on from your boring wordpress websites, to something better.


    Query optimization is also very important. Here are some mistakes that I have seen other programmers making :

    Using SELECT * from tableName

    This is a bad practice. If you are going to need two columns from a table which has 10 coulmns, only select those two columns. Selecting all the columns take much more resource!

    Not using Joins

    Believe me or not, I have seen all kinds of hilarious codes when it comes to using joins. As for an example, I saw someone actually doing this :p

    If you are technical, you will laugh, but there are people who actually do this.
    If you are the one who writes this kind of code, think about using JOINS. Instead of writing the code above, try the sql below. It will save a lot of resource:




    Closing the Sql connection unnecessarily.
    No, you do not need to do mysql_close() (or anything similar) each time you query. Let the script handle it for you. If you close connections too many times, your website will end up having frequent timeouts as it will reach the max connections per instance of time.


    Using a CDN service
    Why CDNs are better than normal servers? This is mainly due to latency. If you have a normal server, suppose in CA, a visitor from Australia will have to wait for much longer time to view the page than someone sitting in CA. CDN servers keep copy of the same files in different location, so that visitors world-wide request to the nearest possible location and the site will load a lot faster everywhere.
    So, if possible use CDN. If you can't afford that, then use services like Google pagespeed.

    So that's basically Eat!! You are welcome to add your secrets here! Let's make this thread the best guide for optimizing websites :D
     
    • Thanks Thanks x 21
    Last edited: Nov 11, 2013
  2. Thesgtluca

    Thesgtluca Newbie

    Joined:
    Apr 16, 2013
    Messages:
    15
    Likes Received:
    5
    Occupation:
    Student
    Thanks for the method :)
     
  3. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,062
    Likes Received:
    2,872
    Gender:
    Male
    Glad I could help :)
     
  4. ardley216

    ardley216 Elite Member

    Joined:
    Mar 28, 2008
    Messages:
    2,391
    Likes Received:
    2,356
    Occupation:
    Finding easy keywords
    Location:
    1,500,000,000 Keywords Re
    Home Page:
    Faster page loading times = more moneh! :)
     
    • Thanks Thanks x 1
  5. DarkPixel

    DarkPixel Jr. VIP Jr. VIP Premium Member

    Joined:
    Oct 4, 2011
    Messages:
    1,328
    Likes Received:
    1,239
    Location:
    ↓↓↓↓
    Home Page:
    Nice share man, very useful.
     
    • Thanks Thanks x 1
  6. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,354
    Likes Received:
    5,415
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    Very useful stuff, worth at least 33 valuable "Thumbs up" points ;).

    Having spent the whole of my Friday speeding up my one site as much as possible, I can say that these are tried and tested tips right here.

    If you want to check if it's working as you go, you can use these two tools:

    http://tools.pingdom.com/fpt/
    https://developers.google.com/speed/pagespeed/ (Requires signup)

    I managed to get my Pagespeed score from 75 to 95 a lot of the techniques g0gol has kindly listed here.

    If you have a WP site, you can also download w3 total cache, it works wonders if you set it up right.

    Also, if you save your .jpegs as "Progressive" in Photoshop (File > Save for Web & Devices), they will also load a lot faster, increasing in quality as the page loads.

    So what are you waiting for? Go and make the internet faster!
     
    • Thanks Thanks x 1
    Last edited: Nov 10, 2013
  7. freezeice04

    freezeice04 Power Member

    Joined:
    Jul 5, 2010
    Messages:
    676
    Likes Received:
    286
    Location:
    AU
    Now I know who I can turn to if I wanted to hire a person to increase the speed of my websites.
     
    • Thanks Thanks x 1
  8. RushingWind

    RushingWind Elite Member

    Joined:
    Apr 6, 2013
    Messages:
    2,416
    Likes Received:
    3,333
    A great thread from g0g0l. It should be helpful.
     
    • Thanks Thanks x 1
  9. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,062
    Likes Received:
    2,872
    Gender:
    Male
    You bet it is :D Not only does the user get frustrated when the loading time is higher, the site also looks very unprofessional. So yeah you are totally right!
    Thanks bro :)
    Haha thanks bro :)
    I personally do not use total cache as it can become troublesome to manage some times especially if you have other plugins conflicting! I personally like to do everything manually!!

    I could not cover the better coding standards as the original post will get huge if I try to do that. Small things like using single quotes to echo strings instead of using double quotes can make difference!

    Hehe I would love to do that for you lol :p

    Thanks bro.:)
    Glad to have you back!!

     
    • Thanks Thanks x 2
  10. notyourmatey

    notyourmatey Power Member

    Joined:
    Jul 7, 2011
    Messages:
    573
    Likes Received:
    324
    Location:
    TOP3
    good stuff op- will be helpful for a lot of people
     
    • Thanks Thanks x 1
  11. srinu0812

    srinu0812 Supreme Member

    Joined:
    Nov 1, 2012
    Messages:
    1,311
    Likes Received:
    755
    Great stuff mate. Bookmarked!
     
    • Thanks Thanks x 1
  12. serviceprovider

    serviceprovider Newbie

    Joined:
    Nov 10, 2013
    Messages:
    5
    Likes Received:
    0
    Thanx For the Guide !! Appreciate (y)
     
  13. hameem

    hameem Elite Member

    Joined:
    Jul 21, 2011
    Messages:
    1,880
    Likes Received:
    985
    Location:
    221B Baker Street
    Some amazing tips!
     
  14. Aty

    Aty Jr. VIP Jr. VIP

    Joined:
    Jan 27, 2011
    Messages:
    5,396
    Likes Received:
    3,690
    Home Page:
  15. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,062
    Likes Received:
    2,872
    Gender:
    Male
    Thnx!!
    Thnx!!
    Glad it is!
    Thnx!!
    Hope it helps. THx man !
     
  16. Asif WILSON Khan

    Asif WILSON Khan Executive VIP Premium Member

    Joined:
    Nov 10, 2012
    Messages:
    10,112
    Likes Received:
    28,524
    Gender:
    Male
    Occupation:
    Fun Lovin' Criminal
    Location:
    London
    Home Page:
    Looks like I have run out of thanks but thanks for the thread OP, some good tips.
     
  17. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,062
    Likes Received:
    2,872
    Gender:
    Male
    doesn't matter hehe :D
    U know me! THx man for the reply!!
     
  18. faithjhung

    faithjhung Jr. VIP Jr. VIP Premium Member

    Joined:
    Jun 5, 2009
    Messages:
    1,442
    Likes Received:
    911
    Location:
    New York
    quick question, how much faster will the page load?
     
  19. Sharer

    Sharer Power Member

    Joined:
    Apr 11, 2009
    Messages:
    560
    Likes Received:
    1,051
    I have been looking for something like this. I will give it a try and if it works out well,
    I will let you guys know.

    Thanks for this open poster.
     
  20. TheUnborn

    TheUnborn Elite Member

    Joined:
    Feb 21, 2013
    Messages:
    3,041
    Likes Received:
    1,672
    Occupation:
    SEO Consultant
    Home Page:
    Thanks for the share OP,will try it now