Ways to reduce lag while scrolling on my website?

Question

I'm currently working on my website:

[REMOVED]

and I noticed that there's some lag while scrolling. My guess is, that it might be due to the background image, so I already changed the format from .png to .jpg

Are there other ways to reduce the lag?

Answer 1

The first step is to profile your site and determine what exactly is lagging. You can use Chrome's developer tools for this, but I prefer WebPageTest. The results for your site are here:

• http://www.webpagetest.org/result/141108_N8_G8C/

Review those results, see which factor(s) you have control over (depends on your host), tweak them, and run the test again. There's also the YSlow extension for Chrome. Each of these items is thoroughly documented online, because this is an important area of web development.

Based on your results, I would try the following:

• Reduce the number of HTTP requests:

  • Minify and compress javascript and CSS (Check out YUICompressor and SASS/Compass). This may or may not be what you need. You can still limit the number of requests by writing a script to concatenate all of your files. Be sure to make sure you do it in the correct order, or you'll get unexpected results.

• Programs like optipng can optimize your images for the web. TL;DR: There's a lot of extra information in images, and you don't always need super hi-res. Make sure the images are sized appropriately (e.g., don't scale down a large image to 128x128, use imagemagick or something to resize). Using progressive JPEGs can give the appearance of faster loading, but the images still take the same time to download.

• Setting up your cache. The topic of caching can probably fill volumes, and it's kind of specific to what you're doing. Here's a few resources:

  • https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
  • https://developer.yahoo.com/performance/rules.html
  • Web front end caching best practices for site?

• Using a CDN for static assets, in my experience, is usually not worth the hassle of distributing your codebase. Some things, like HTML background video, common javascript libraries (jQuery), and web fonts are easy to integrate and often do provide a reasonable benefit. This is largely due to the caching implemented by the CDNs, as well as being closer your clients than your site is (probably).

• Finally, profile your backend code. See where you can serve content statically, or from a cache. Minimize database hits, trips to the server, etc. This depends entirely on how your site works under the hood.

Hopefully that gets you started!