TL;DR At Clook, we’ve improved our website and blog’s Lighthouse and Google Page Speed Insight scores to 90+ by using static PHP for the main site and a custom WordPress theme for the blog. We focused on streamlining code and optimising resources. While premium themes can be convenient, they often include unnecessary features that can slow down your site. For those using premium themes, we recommend choosing options optimised for performance, minimalist design, reputable developers, and regular updates. Our goal is to maintain high performance and offer insights for others looking to do the same.
At Clook, we pride ourselves on delivering high-quality, efficient, and reliable hosting solutions. As part of our ongoing commitment to excellence, we recently undertook a project to improve the performance of our static website and WordPress blog, aiming to boost our Lighthouse and Google Page Speed Insight scores from a respectable 65-80 to an impressive 90+.
Here’s an inside look at how we achieved this and why it matters:
What Are Lighthouse Reports?
Lighthouse is an open-source tool developed by Google to audit web pages. It provides insights into a website’s performance, accessibility, best practices, and SEO. These reports are essential for identifying areas that need improvement and ensuring a website meets modern web standards.
Why Are Lighthouse Scores Important?
Improving Lighthouse scores is crucial for several reasons:
- User Experience: Faster, more efficient websites provide a better user experience, reducing bounce rates and increasing engagement.
- SEO: Higher scores can positively impact search engine rankings, making your site more visible to potential visitors.
- Mobile Optimisation: With mobile traffic on the rise, optimising performance across all devices is more important than ever.
Key Factors Measured by Lighthouse
Lighthouse evaluates various aspects of a web page, including:
- Performance: Page load times and responsiveness.
- Accessibility: How accessible your site is to users with disabilities.
- Best Practices: Adherence to web development best practices.
- SEO: Optimisation for search engines.
Our Approach: Static PHP for the Main Site and WordPress for the Blog
To achieve our performance goals, we decided to use static PHP for our main site and WordPress for our blog. Here’s why:
- Static PHP: Using static PHP allowed us to streamline our codebase and eliminate unnecessary elements, resulting in faster load times and better performance.
- WordPress Blog: We retained WordPress for our blog due to its flexibility and ease of use. However, we took several steps to optimise it.
Achieving 90+ Scores: Our Strategies
- Streamlined Code: We meticulously reviewed and optimised our code, removing any unused or redundant parts. (Slimming down Bootstrap and and audit of classes was a big part of this)
- Custom WordPress Theme: We built our own lean WordPress theme, avoiding the bloat that often comes with pre-built themes.
- Optimised Resources: We optimised images, scripts, and other resources to ensure quick loading times.
- LiteSpeed Cache: We implemented LiteSpeed Cache, which significantly improves loading times by storing a copy of the page and serving it to users quickly.
- Server Configuration: While we have optimally configured all our servers to support these enhancements, we understand that server configuration alone is not the be-all and end-all for achieving high scores. A well-configured server helps, but optimising the code and resources on the website is crucial for maximising performance.
The Reality of Premium WordPress Themes
While building custom themes worked for us, we understand that not everyone has the resources to develop from scratch and may rely on premium themes. However, premium themes can sometimes be problematic:
- Bloatware: Many come with unnecessary features and code that can slow down your site.
- Incompatibility: Updates or conflicts with plugins can affect performance.
- Hidden Issues: Poor coding practices can lead to issues that are not immediately apparent.
Choosing a Premium Theme: What to Look For
If you opt for a premium theme, keep these tips in mind:
- Performance: Check for themes optimised for speed and performance.
- Minimalist Design: Choose themes that offer the features you need without excess bloat.
- Reputable Developers: Select themes from reputable developers known for good coding practices.
- Regular Updates: Ensure the theme is regularly updated to fix issues and stay compatible with the latest WordPress version.
To-Do List for Improving Your Website’s Lighthouse Scores
Improving your website’s performance can seem daunting, but breaking it down into manageable tasks can make the process more approachable. Here’s a to-do list to help you get started on optimising your site:
Audit Your Current Performance
Run Lighthouse and Google Page Speed Insights reports.
Identify areas with low scores and prioritise them for improvement.
Streamline Your Code
Remove unnecessary plugins, scripts, and CSS files.
Minimise inline styles and scripts.
Optimise Images and Media
Compress images without losing quality.
Use modern formats like WebP.
Implement lazy loading for images and videos.
Minimise HTTP Requests
Combine files where possible (CSS, JavaScript).
Use inline SVGs for icons instead of images.
Optimise Your Server
Choose a reliable hosting provider with fast servers (like Clook!).
Use a content delivery network (CDN) to serve content faster globally.
Reduce Third-Party Scripts
Limit the use of third-party scripts and services, as they can slow down your site.
Choose the Right Theme
If using a CMS like WordPress, select a lightweight, well-coded theme.
Avoid themes with excessive features that you don’t need.
Test and Iterate
Regularly test your site’s performance after implementing changes.
Keep refining your approach based on the latest insights and data.
Monitor and Maintain
Performance optimisation is an ongoing process. Regularly monitor your site and keep it updated.
Guide to LiteSpeed Cache Settings for Optimal Website Performance
LiteSpeed Cache is a powerful tool that can significantly enhance the performance of your website. Here’s a guide to the recommended settings to help you get the most out of it:
General Settings
Enable LiteSpeed Cache: Ensure that LiteSpeed Cache is enabled for your site. This is the first and most crucial step in leveraging its capabilities.
Cache Settings
Public Cache TTL: Set the TTL (Time To Live) for public content. A common setting is 604800 seconds (7 days), which is sufficient for most sites.
Private Cache TTL: This is for logged-in users or private content. Set a shorter TTL, such as 1800 seconds (30 minutes), to balance performance and freshness.
Purge: Enable automatic purging of cache when updates occur (e.g., when posts are updated, categories are changed, etc.).
Optimisation Settings
HTML Minification: Minify HTML to reduce the page size.
CSS/JS Minification: Enable minification for CSS and JavaScript files to reduce file size and load times.
CSS/JS Combination: Combine CSS and JavaScript files to reduce the number of HTTP requests. Be cautious, as this can sometimes cause conflicts; test thoroughly.
Image Optimisation
Image Optimisation: Use LiteSpeed Cache’s built-in image optimisation features to compress and convert images to more efficient formats like WebP.
Lazy Load Images: Enable lazy loading to defer the loading of off-screen images until they are needed. This can significantly improve initial load times.
Browser Cache
TTL: Setting an appropriate Time To Live (TTL) for browser caching is crucial for ensuring that static resources are cached on the user’s device, resulting in quicker subsequent loads. Here are some examples:
Images and Media Files: These can typically be cached for longer periods since they don’t change often. A TTL of 30 days (2592000 seconds) is common for images, videos, and other media files.
CSS and JavaScript Files: If your site’s CSS and JavaScript files don’t change frequently, a TTL of 7 days (604800 seconds) can be effective. This ensures that updates are reflected relatively quickly, while still taking advantage of caching benefits.
HTML Files: For HTML files, especially dynamic content, a shorter TTL may be more appropriate. For example, a TTL of 1 hour (3600 seconds) can ensure that users receive updated content without frequent cache purges.
By setting appropriate TTL values, you can balance performance with the need for delivering updated content, enhancing both the user experience and site efficiency.
Advanced Settings
Database Optimisation: Regularly use LiteSpeed Cache to optimise your database, cleaning up expired transients, post revisions, and other unnecessary data.
Object Cache: If your site is database-intensive (e.g., an e-commerce site), enable object caching to reduce the load on your database server.
Our Commitment to High Performance and Customer Support
At Clook Internet, we’re thrilled with our 90+ Lighthouse scores and are committed to maintaining high performance for our website and blog. We hope our experience provides valuable insights for those looking to optimise their own sites. If you have any questions or need assistance, feel free to reach out to our friendly and professional support team.
