Performance Fundamentals
Common performance mistakes found on small business websites and how to avoid them, focusing on image optimization, JavaScript efficiency, and CSS best practices.
Mark
Performance Testing Expert
Having undertaken a brief analysis of a number of small but international businesses websites in my area, I was surprised just how many simple performance mistakes had been made. Despite internet connections getting faster by the day, we should still always strive to keep the content optimal.
Common Mistakes
Images
Images represent the primary performance problem. Common issues include:
- Styling with images instead of CSS - Using image-based styling when CSS would be more efficient
- Using oversized images then scaling them with CSS - Loading full-resolution images and resizing in the browser
Example: Oversized Image Problem
A 5.4MB image (4152 x 2504 pixels) was resized via CSS to both 710x300 and 300x180. Proper resizing would have reduced file sizes dramatically:
| Original Size | Display Size | Optimized Size |
|---|---|---|
| 5.4MB | 710x300 | 176KB |
| 5.4MB | 300x180 | 66KB |
Format Conversion Savings
Converting PNG to JPG formats yields significant savings:
- Original: 787KB PNG at 1140 x 313 pixels
- Converted: 180.9KB JPG at same dimensions
Additional Image Issues
- Excessive image-heavy pages with dozens of images per page
- Missing image compression
- Not using modern formats like WebP
Excessive JavaScript
- Overly complex embedded JavaScript within pages
- Lack of centralized JavaScript files - separate files per page prevent browser caching
- Loading JavaScript synchronously when async would be appropriate
Inefficient CSS & HTML
- Complex stylesheets with redundant overrides
- Unnecessary HTML tags inflating page size
- Missing resources causing HTTP errors
- Overuse of animations and video
Recommendations
- Resize images to the actual display dimensions needed
- Compress images using appropriate quality settings
- Use modern formats like WebP with fallbacks
- Centralize JavaScript to enable browser caching
- Minify CSS and JavaScript for production
- Remove unused code and redundant styles
- Monitor for 404 errors on resources
Conclusion
Despite improving connection speeds, we should still always strive to keep the content optimal. Basic resizing and compression techniques significantly improve transfer speeds and reduce server load, benefiting both users and infrastructure.
Tags: