1 point by webdev_newb 1 year ago flag hide 17 comments
johnsmith 1 year ago next
One important tip for improving web app performance on low-end devices is to minimize the use of render-blocking resources, such as CSS and JavaScript files. Consider using techniques such as code splitting and lazy loading to load these resources only when needed.
nodesigner 1 year ago next
@johnsmith good point, but keep in mind that completely eliminating render-blocking resources might result in a less-than-optimal user experience for some users.
coderjoel 1 year ago prev next
Another tip is to optimize your images. Consider using next-gen formats like WebP and AVIF, and always ensure that your images are no larger than they need to be. Tools like ImageOptim can help with this.
happydeveloper 1 year ago next
@coderjoel Absolutely, and if you're using iconography, consider using icon fonts instead of images. They'll be vector-based, which means they'll scale infinitely and load faster.
optimizerandy 1 year ago prev next
Don't forget to use the browser's cache to your advantage. By setting appropriate cache headers, you can ensure that often-requested resources are cached locally, reducing the amount of data that needs to be fetched over the network.
speedygreg 1 year ago next
@optimizerandy Definitely, but keep in mind that different browsers have different cache limits. Make sure you're aware of these limits, and optimize your cache headers accordingly.
scottified 1 year ago prev next
An important tip is to minimize the number of HTTP requests. Each request adds overhead, which can disproportionately impact low-end devices. Techniques like bundling your JavaScript and CSS files can help reduce this overhead.
webperfmat 1 year ago next
@scottified That's true, but remember that bundling can also increase the size of your files, which might impact performance in other ways. It's a tradeoff that you need to consider carefully.
networknicole 1 year ago prev next
Minimizing the amount of data transferred is also crucial. Enable gzip or Brotli compression, and make sure you're serving files using HTTP/2 if possible. This can significantly improve performance.
performancepaul 1 year ago next
@networknicole Definitely, but keep in mind that HTTP/2 has its own set of best practices. For example, you'll want to avoid head-of-line blocking, use server push wisely, and make sure you're serving resources over the correct streams.
mobilemark 1 year ago prev next
When designing for low-end devices, it's important to keep in mind that not all users have the same capabilities. Make sure your web app supports multiple input modalities, including touch input, and that it's usable on small screens.
touchtyler 1 year ago next
@mobilemark Agreed, and don't forget about performance on low-bandwidth networks. Make sure you're using bandwidth-saving techniques like adaptive bitrate streaming, and consider serving smaller, lower-resolution images to users with slower connections.
progressivepete 1 year ago prev next
When working on performance, consider implementing a progressive enhancement strategy. This means starting with a basic, functional experience, and incrementally adding complexity only when the user's device can handle it.
gracefulgit 1 year ago next
@progressivepete That's a great strategy, but keep in mind that BrowserStack can only simulate some of the low-end devices that your users might be using. You might need to rely on actual devices for testing as well.
featurefulfred 1 year ago prev next
@progressivepete I agree in theory, but sometimes it's hard to know which features are critical to the user experience and which ones can be omitted. Do you have any tips for determining this?
frontendfrank 1 year ago prev next
Another useful tip is to monitor performance using tools like Google Lighthouse. By regularly running performance audits, you can identify areas for improvement and track your progress over time.