At WP Travel Engine, we know how crucial speed is for your travel agency website. A faster site not only provides a better experience for your visitors but also boosts your search engine rankings.
That’s why we’ve made some significant enhancements to the latest WP Travel Engine version 6.0.4. This update focuses on optimizing speed both in the core plugin and offering tools for you to improve your website’s performance.
In this article, we’ll explore the changes we’ve made, introduce the new features available to you, and share speed test results that demonstrate the impact of these optimizations.
Performance Optimization: What’s New
1. Optimized Loading Feature
One of the most significant improvements we’ve made in the latest version of WP Travel Engine is the Optimized Loading feature. This feature intelligently loads assets only when needed, leading to noticeably faster loading times.
Here’s a closer look at what this feature includes:
Reduced Network Requests
Previously, numerous network requests were contributing to slower page load times.
With Optimized Loading, only essential resources are loaded, drastically reducing unnecessary network requests and speeding up your site.
Webpack Configuration
To further boost performance, we’ve leveraged Webpack to bundle only the required resources into a single file.
Here’s how we’ve minimized the number of files:
1. Custom Bundle Entry Points
We’ve created separate bundles for different plugin functionalities, allowing for modular loading.
This approach ensures that only the necessary code is loaded for each feature, reducing the overall bundle size on any page.
2. Chunking and Dynamic Filenames
Our output configuration now uses chunkFilename and dynamic filenames, splitting the code into smaller chunks and naming them based on content or entry point.
This not only improves caching efficiency but also reduces the need to reload unchanged code across various plugin features.
3. Separate Configuration for Bundles
We’ve developed specific configurations for bundling the single-trip and trip-booking-modal scripts.
By handling these scripts separately, possibly with different rules or output paths, the plugin is further optimized for specific use cases.
4. Babel Loader for Modern JavaScript
Additionally, we’ve implemented the babel-loader with presets like @babel/preset-env and @babel/preset-react.
This compiles modern JavaScript and JSX into a format compatible with older browsers, ensuring the bundle is optimized for performance and compatibility.
How to Enable Optimized Loading
These enhancements will take effect on your website only when you enable the Optimized Loading feature. Here’s how to do it:
- Go to your WordPress Dashboard.
- Navigate to WP Travel Engine > Settings.
- Click on the Performance tab.
- Under the General section, you’ll find the Optimized Loading option. Enable it.
- Click Save to apply your changes.
2. Lazy Loading Feature
In the latest version, we’ve introduced lazy loading, a technique that ensures your website loads content only when it’s needed.
This approach minimizes initial load times and reduces resource usage, leading to a smoother and faster user experience.
This technique is now implemented for both images and maps.
1. Map Lazy Loading
We’ve implemented lazy loading for maps using the IntersectionObserver API. This technology detects when the map container is about to enter the viewport and loads the map iframe only at that moment.
This delays resource-intensive tasks, improving overall page load performance.
2. Image Lazy Loading
Similarly, we’ve integrated lazy loading for images using the vanilla-lazyload package.
This script delays the loading of images until they approach the viewport, which cuts down on initial page load time and conserves bandwidth.
How to Enable Lazy Loading
These enhancements will take effect on your website only when you enable the Lazy Loading feature. Here’s how to do it:
- Go to your WordPress Dashboard.
- Navigate to WP Travel Engine > Settings.
- Click on the Performance tab.
- Under the General section, you’ll find the Lazy Loading option. Enable it.
- You’ll then have the option to enable Map Lazy Loading and Image Lazy Loading. Turn on both options according to your needs.
- Click Save to apply your changes.
3. Splide Integration for Slider
We’ve replaced the Owl Carousel with Splide across the plugin, as Owl Carousel was hurting page speed.
Splide is a lighter and faster alternative, which contributes to the overall speed improvements we’ve made.
Speed Test Results
To give you a clear picture of how these optimizations are performing, we conducted speed tests using three popular tools: Pingdom, GTMetrix, and Speed Vitals.
We conducted tests under three scenarios, comparing WP Travel Engine v6.0.4 and WP Travel Engine v6.0.5 across three different themes: Twenty Twenty-Three, Travel Monster, and Travel Agency.
Note: The following tests are done without any caching plugins installed. When you install caching plugins such as WP Rocket, FlyingPress, Perfmatters or any other, your website score will be higher.
Here are the results before and after implementing the optimizations:
1. Twenty Twenty-Three Theme
| Metric | WP Travel Engine (6.0.4) | WP Travel Engine (6.0.5) |
| Number of Requests | 63 | 31 |
| Number of JS | 44 | 18 |
| Number of CSS | 5 | 4 |
| Mobile Speed (PageSpeed Insights) | 61 | 68 |
| Desktop Speed (Page Speed Insights) | 86 | 91 |
Pingdom Test
GTMetrix Test
Speed Vitals test
2. Travel Monster Theme
| Metric | WP Travel Engine (6.0.4) | WP Travel Engine (6.0.5) |
| Number of Requests | 68 | 39 |
| Number of JS | 45 | 20 |
| Number of CSS | 7 | 7 |
| Mobile Speed (PageSpeed Insights) | 49 | 50 |
| Desktop Speed (Page Speed Insights) | 70 | 78 |
Pingdom Test
GT Metrix Test
Speed Vitals Test
3. Travel Agency Theme
| Metric | WP Travel Engine (6.0.4) | WP Travel Engine (6.0.5) |
| Number of Requests | 78 | 45 |
| Number of JS | 51 | 23 |
| Number of CSS | 8 | 7 |
| Mobile Speed ( PageSpeed Insights ) | 37 | 57 |
| Desktop Speed( Page Speed Insights ) | 87 | 90 |
Pingdom Test
GTMetrix Test
Speed Vitals Test
Note: While there are some significant improvements in the plugin, our team will also work on optimizing all our travel themes, which will help to improve the speed further.
Further, we ran some in-depth benchmarks on GTMetrix to evaluate our site’s performance. These tests focus on critical metrics like
- Grade
- Performance Scores
- Structure Scores
- Largest Contentful Paint
- Cumulative Layout Shift
- Page Sizes
- Request Counts and
- Total Blocking Time.
1. Twenty Twenty-Three Theme
2. Travel Monster Theme
3. Travel Agency Theme
Conclusion
These updates bring enhanced speed and improved efficiency to your website, ensuring it loads faster and runs smoother.
We’re committed to continually improving the user experience of WP Travel Engine.
To take full advantage of these improvements, make sure your plugin is always up to date.
We value your feedback and are here to support you every step of the way.
