9
19 Comments

Help Needed: How do I improve load time on my site?

I need to improve load times for my site. I have a node backend serving a lot of static pages (html, css and a lot of images) that take a long time to load.

I have offloaded all my images to a bucket on s3 in an effort to make the site faster, but it hasn't had a huge effect.

Is there another way I can improve load times on my site? I would really appreciate all the help I can get. Thanks!

  1. 7

    A relatively easy and inexpensive way to speed up the serving of static assets is to use a CDN, like AWS Cloudfront. CloudFront has edge sites around the globe, so the idea is that a user's request is automatically routed to the closest edge, which caches your assets to speed it up and reduce the load and bandwidth on your backend.

    Here's what I would do:

    • Create a new CloudFront distribution
    • Add an origin for each of the places your content comes from. So, you'll create one origin that points to the URL for your S3 bucket and one that points to the URL for your Node.js backend.
    • Add cache behaviors for your content. The first one you add could be a cache behavior that dictates that requests to /images/* should be routed to the origin for your S3 bucket and are cached for a very long period of time. Then perhaps your default cache behavior (/*) routes requests to the origin for your Node app, and those can be cached for a different period of time if you want. For example, you could specify a cache TTL of several minutes so that Cloudfront only sends requests to your Node app once every several minutes to check if the ETags in your responses match what it already has.
    • The last step is to add your domain name to Route 53, create an alias record to point it to your CloudFront distribution, and configure the CloudFront distribution to specify your domain name as its alternate name.

    If much of the content served by your Node app is static (like assets for a web front-end) you may also consider serving those from S3 as a static site to simplify things and save money on compute.

    1. 1

      This is great advice ^^

      Just wanted to add that CloudFlare is a fairly simple alternative to AWS CloudFront & might yield the most bang for your time.

      Definitely invest in learning the basics of cache-control headers though. That will apply to any solution in this space.

    2. 1

      The site isn't entirely static, it has a lot of dynamic aspects as well.. but you have pointed out a lot of things that I will look into now.. Thanks!

  2. 5

    For mobile website: https://testmysite.thinkwithgoogle.com/
    For desktop/pc version:
    https://developers.google.com/speed/pagespeed/insights/?hl=de
    (Don't worry,google will auto detect ur browser language & will open it in ur preferred language.)

    These links will tell u the faults ur site is having.Basically it is listed under the following heads: 1) reduce server response time. 2) Remove JavaScript and CSS resources that block rendering in content above the fold. 3)optimize images. 4)use browser caching.
    Now once u know ur faults,handle them one by one.
    If u r using wordpress,there are some awesome plugins to do the trick for u on auto mode.

    For any help regarding the optimization & score 100 on page speed, reach out to me on my email : samaddarsubhabrata@gmail.com

    Let There Be Light
    Subh.

    1. 1

      Thank you so much for the response! This really told me where the issue lies and helped me figure out how I could fix it.

  3. 2

    S3 without CDN is pretty slow. Anyway, post here the url or try analyzers like tools.pingdom.com, developers.google.com/speed etc.

  4. 2

    It is really hard to give an advice without knowing the tech stack but .. I would:

    • run the google performance tests to pinpoint slow "areas".
    • optimize images
    • try out CDNs(Content Delivery Network) like Cloudfront and others - put your images and other static assets on it.
    • investigate caching options
    • investigate compression
    1. 1

      Thank you so much for this great response... I was able to get it to load much quicker once I compressed the images and linked to them on s3. I'll look into CDN's to see how much of a difference it would make!

  5. 2

    If the content is just static HTML, my advice is to put it on Firebase, using a subdomain.

    Firebase is part of the Google Cloud offering, it's blazing fast, and with a generous free tier.

    This is the simplest thing you can do to make the content faster.

    I host my Hugo-based blog there, I generate static HTML locally and then I push it to the Firebase servers with a simple firebase deploy command.

    Firebase Hosting is pretty awesome in its simplicity and I don't need to worry about server issues. I wrote a short guide here: https://flaviocopes.com/firebase-hosting/ a few weeks ago.

    This is an option, of course there are many other things you can do to speed up a website which involve diving into the technical details, some of which well explained by other replies in this topic.

    1. 1

      I was thinking the same until I noticed Firebase Hosting has really high response times (from 10 to almost 60 seconds sometimes) at least in my country (France) for requests that do not hit an edge node. For sure, it does not always happen but if you have an app hosted by Firebase hosting that is bundled with multiple files to leverage HTTP2 (e.g. developed and packaged with Polymer), then it's blazing slow. It kills the user experience and your business!

  6. 2

    You may need to hire some one to investigate it.
    Here is the main things to look at:

    1. Database queries. Check if you have indexes in relevant fields. For example if you fetch a user from database by email, your database has to have index on email field.
    2. Cache - Make sure you use cache to serve static content instead of makind DB request and generate template on the fly. For example if you have dynamic listings on your home page, may be you can cache it and expire the cache once in an hour to update the view.
    3. External API calls from the backend. It can slow down your website response pretty hard. Make sure you don’t do it from backend on GET requests. Consider moving it to ajax request when the page loaded.
    4. CDN for assets - will help you to unload the number of requests your server handles.
    5. Loops and calculations. Node is single treaded, means if you do hard calculations, some heavy data formating it can stuck the instance from serving other requests. Consider serving the raw jsons and do all data formating on front end.
    6. Don’t know how many traffic do you have, but add more instances of your server.
    1. 1

      Thank you so much for this detailed response! I'm currently looking into caching and cdn's but all the things you have listed should really help me out in the future as we (hopefully) scale.

  7. 2

    Too little context for me to isolate your problem but here are some guesses:

    1. Check image to see if its optimised for web
    2. Move above the fold javascript/css to below the fold.
    3. Check if any of your scripts are running slow or taking a long time to complete.

    Reach out to me @ mahadevan.k@gmail.com if you need more help.

  8. 1

    Adding https://github.com/turbolinks/turbolinks to your site will instantly improve your load time.

  9. 1

    check cloudways, they have amazing varnish feature and great optimalization tools

  10. 1

    Possible you got unlucky with the specific server you were issued? I had this with an EC2 instance from AWS, don't know why the TTFB was taking 3-5 seconds. Fiddling with all my configs then tried another server (deactivated current EC2, and got another one) and was back in the normal range of a couple hundred milliseconds.

    Cloudflare is another CDN to consider.

    People have already mentioned the common reasons due to being slow.

    • size of images
    • loading stuff before or after the DOM loads (consider async/defer)
    • size of dependencies (think including things in your headers)

    I don't know if you're aware, you can check how long things load on your site using Chrome's dev tools. Attached is a screen shot for example.

    To really know the speed and order of things loading (use an incognito browser once) so you don't have cached items being used.

    Here I load indiehackers in an incognito window

    https://i.imgur.com/BGqsdJM.png

    Not terrible, but not too bad either (should be at or below 2 seconds, the blue number).

    the number appears to change though, tried it again was just over 2 but that could be caching. will confirm in firefox incognito. 3.31 seconds

    My speedtestnet result is 56.70Mbps down 75.16Mbps Up on Google Fiber

    Another thing to try is the throttling in Chrome dev tools you can simulate slow internet speed and see how your site reacts.

  11. 1

    https://www.producthunt.com/posts/smaller

    That is a product I use and reccomend!

  12. 1

    Can you report the load timing that chrome developer var can give you ? Or, way easier, can you post the link for your website here ?

  13. 1

    Try this https://testmysite.thinkwithgoogle.com . You will know whats good and whats bad with your site and also a report on how to fix them.