Switching From Elementor To GeneratePress

Introduction

In the ever-evolving world of WordPress website development, choosing the right page builder and theme can significantly impact your site’s performance, appearance, and overall user experience. This article delves into a comparison between two popular options: Elementor, a widely-used page builder, and GeneratePress, a lightweight theme that works seamlessly with the WordPress block editor (Gutenberg).

We’ll explore the journey of a WordPress management company that built the same website twice – once using Elementor and then again using GeneratePress with GenerateBlocks. This comparison covers crucial aspects such as performance metrics, visual appeal, and the developer’s experience when using these tools. Whether you’re a seasoned WordPress professional or just starting your journey, this in-depth analysis will provide valuable insights to help you make informed decisions about your website building process.

Throughout this article, we’ll examine the pros and cons of each approach, discuss the importance of page speed and Core Web Vitals, and offer practical advice for optimizing your WordPress site. By the end, you’ll have a clear understanding of how Elementor and GeneratePress stack up against each other and which might be the best fit for your specific needs.

Performance [00:11]

When it comes to website development, performance is a critical factor that can significantly impact user experience, search engine rankings, and overall site success. In this section, we’ll dive deep into the performance comparison between the Elementor-built site and the GeneratePress-built site, focusing on key metrics such as Google Core Web Vitals, GTmetrix scores, and PageSpeed Insights results.

Elementor Performance

Contrary to some common misconceptions, the Elementor-built site performed surprisingly well in various performance tests:

• Google Core Web Vitals: The site passed with flying colors, demonstrating that Elementor can indeed be optimized for good performance.
• Largest Contentful Paint (LCP): An impressive 595 milliseconds, well within Google’s recommended range.
• Total Blocking Time (TBT): 147 milliseconds, indicating minimal delay in interactivity.
• Cumulative Layout Shift (CLS): A perfect score of zero, showing excellent visual stability during page load.
• GTmetrix Performance Score: An outstanding 97%, proving that Elementor sites can be highly optimized.

These results challenge the notion that Elementor-built sites are inherently slow or poorly optimized. When implemented correctly, Elementor can produce fast-loading, high-performing websites.

GeneratePress Performance

As expected, the GeneratePress-built site showcased excellent performance metrics:

• Google Core Web Vitals: Outperformed the Elementor site, though both passed the assessment.
• GTmetrix Performance Score: A perfect 100%, demonstrating the lightweight nature of GeneratePress.
• Google PageSpeed Insights: Another perfect 100% score, indicating optimal performance across various factors.
• Mobile Performance: A significant improvement, with PageSpeed Insights scores jumping from 59 (Elementor) to 99 (GeneratePress).

The most notable difference in performance was observed in mobile scores, where GeneratePress significantly outperformed Elementor. This highlights a potential area for improvement in Elementor’s mobile optimization.

Key Takeaways from Performance Comparison

• Both Elementor and GeneratePress can produce high-performing websites when optimized correctly.
• GeneratePress has a slight edge in overall performance, particularly on mobile devices.
• Elementor’s mobile performance lags behind its desktop performance, indicating room for improvement.
• Page builders like Elementor can still achieve good performance scores when used properly.
• The choice between Elementor and GeneratePress should not be based solely on performance, as both can deliver satisfactory results.

It’s important to note that while GeneratePress emerged as the clear winner in terms of performance, the Elementor site’s results were far from poor. This comparison demonstrates that with proper optimization, both tools can create fast-loading, efficient websites. The key lies in understanding how to leverage each platform’s strengths and mitigate its weaknesses to achieve the best possible performance for your specific project needs.

Look & Feel [01:32]

The visual appeal and user interface of a website play a crucial role in engaging visitors and conveying your brand’s message. In this section, we’ll explore the differences in appearance and overall feel between the Elementor-built site and the GeneratePress-built site, focusing on key aspects such as typography, layout, and design flexibility.

Typography Choices

One of the most significant differences between the two sites was the approach to typography:

• Elementor Site: Likely used custom fonts, which can enhance brand consistency but may impact load times.
• GeneratePress Site: Opted for system fonts, which offer several advantages:
• Faster loading times as no additional font files need to be downloaded.
• Native appearance on different devices, creating a seamless user experience.
• Potential drawback: Less control over brand-specific typography.

Design Consistency Across Devices

• System Fonts (GeneratePress):
• Pros: Adapts to each device’s default fonts, creating a native look and feel.
• Cons: May result in slight variations in appearance across different operating systems (iOS, Android, Windows).
• Custom Fonts (Elementor):
• Pros: Maintains consistent branding across all devices.
• Cons: May increase load times and potentially impact performance scores.

Logo and Branding Elements

• Both sites could effectively display the company logo using SVG format, ensuring crisp visuals across all screen sizes.
• The GeneratePress site’s use of system fonts didn’t hinder the overall branding, as key visual elements like logos can still maintain brand identity.

Overall Visual Appeal

The author noted that the GeneratePress site looked “far better” overall. However, it’s important to consider several factors that might have influenced this perception:

• Design Iteration: The GeneratePress site was built second, allowing for refinement of the initial design concepts.
• Fresh Perspective: Building the site a second time may have inspired new ideas and improvements.
• Tool Familiarity: Increased comfort with the chosen tools might have led to better execution of design ideas.

Key Takeaways from Look & Feel Comparison

• System fonts can create a more native, seamless experience for users across different devices.
• Custom fonts offer more control over branding but may impact performance.
• The design process itself, rather than just the tools used, can significantly influence the final outcome.
• Iterative design can lead to improvements, regardless of the platform used.
• Both Elementor and GeneratePress are capable of producing visually appealing websites.
• Personal preference and project requirements should guide the choice between custom and system fonts.

It’s worth noting that the perceived superiority of the GeneratePress site’s appearance may not be solely attributed to the tool itself. Factors such as design iteration, increased familiarity with the project requirements, and the opportunity to refine ideas likely played a significant role in the improved visual outcome.

When choosing between Elementor and GeneratePress for your project, consider the balance between brand consistency, performance, and user experience. Both platforms offer the flexibility to create attractive, functional websites, but their approaches to typography and layout may require different optimization strategies to achieve the best results.

Quality of Life [02:57]

The ease of use and overall experience for the website builder are crucial factors when choosing a WordPress development tool. In this section, we’ll explore the “quality of life” aspects of using Elementor and GeneratePress with Gutenberg, focusing on user interface, workflow efficiency, and common challenges faced during the development process.

Elementor User Experience

Elementor has gained popularity due to its intuitive drag-and-drop interface and extensive feature set. However, it’s not without its challenges:

• Familiarity: For experienced Elementor users, the platform’s quirks and workflows become second nature, potentially increasing productivity.
• Bug Management: Like many complex tools, Elementor has its share of bugs. Experienced users often develop workarounds and strategies to navigate these issues efficiently.
• Flexbox Containers: The author mentions using Elementor’s Flexbox containers, an alpha feature at the time. While powerful, alpha features may introduce additional instability or unexpected behavior.

Key Points:

• Intuitive drag-and-drop interface
• Extensive feature set and design options
• Learning curve for managing bugs and quirks
• Potential instability with newer features like Flexbox containers

GeneratePress and Gutenberg Experience

GeneratePress, combined with the WordPress block editor (Gutenberg), offers a different approach to website building:

• Block Movement: The author notes significant frustration with moving blocks around, especially when working with nested structures within GenerateBlocks’ ContainerBlock.
• Lack of Keyboard Shortcuts: The absence of keyboard commands for nesting and unnesting items was highlighted as a pain point in the workflow.
• Copy-Paste Workaround: To overcome movement difficulties, the author resorted to copying and pasting content, which is less efficient than direct manipulation.

Key Points:

• Challenges with block movement and manipulation
• Lack of intuitive keyboard shortcuts for common actions
• Potential for improved efficiency with more familiar drag-and-drop interfaces

Comparative Analysis

Both platforms have room for improvement in terms of usability and consistency:

• Learning Curve: While Elementor may have a steeper initial learning curve, its workflows become more intuitive with experience. Gutenberg, despite being native to WordPress, still presents challenges even for experienced users.
• Bug Prevalence: Both systems are described as “full of bugs,” indicating that neither offers a completely smooth experience out of the box.
• Professional Focus: GeneratePress and GenerateBlocks are noted to feel more geared towards professional WordPress developers, potentially offering more advanced features at the cost of initial ease of use.

Key Takeaways from Quality of Life Comparison

• Neither platform offers a perfect user experience, with both having distinct advantages and challenges.
• Elementor’s learning curve may be steeper, but it can lead to efficient workflows once mastered.
• Gutenberg’s block system, while powerful, can be frustrating when working with complex layouts.
• The choice between Elementor and GeneratePress may depend on personal preference and specific project needs.
• Both platforms require ongoing development to improve user experience and reduce bugs.
• GeneratePress’s professional focus may appeal to advanced WordPress developers seeking more control.

When deciding between Elementor and GeneratePress, consider your team’s expertise, project requirements, and willingness to adapt to different workflows. While Elementor offers a more visual, drag-and-drop approach, GeneratePress with Gutenberg provides a closer-to-core WordPress experience that may offer more long-term stability and performance benefits.

Ultimately, the “quality of life” aspect is subjective and may vary based on individual preferences and project needs. It’s recommended to experiment with both platforms to determine which aligns best with your workflow and development style.

Summary

In this comprehensive comparison between Elementor and GeneratePress for WordPress website development, we’ve explored three crucial aspects: performance, look and feel, and quality of life for developers. Let’s recap the key findings and provide some final thoughts to help you make an informed decision for your next WordPress project.

Performance

Both Elementor and GeneratePress demonstrated the ability to create high-performing websites:

• Elementor surprised with excellent Core Web Vitals scores and a 97% GTmetrix performance score.
• GeneratePress excelled, achieving perfect 100% scores on both GTmetrix and Google PageSpeed Insights.
• The most significant difference was in mobile performance, where GeneratePress outperformed Elementor.

Key Takeaway: While GeneratePress has a slight edge in performance, especially on mobile devices, a well-optimized Elementor site can still achieve impressive speed and efficiency.

Look & Feel

The visual aspect of the websites built with each tool revealed interesting insights:

• GeneratePress used system fonts, creating a more native feel across devices but potentially sacrificing brand consistency.
• Elementor likely used custom fonts, offering more brand control at the potential cost of performance.
• The GeneratePress site was perceived as visually superior, though this may be partly due to it being the second iteration of the design.

Key Takeaway: Both platforms are capable of producing visually appealing websites. The choice between system and custom fonts should be based on project requirements and performance goals.

Quality of Life

The user experience for developers working with each platform highlighted different strengths and challenges:

• Elementor offers an intuitive drag-and-drop interface but comes with a learning curve to manage its quirks and bugs.
• GeneratePress with Gutenberg presented challenges in block movement and manipulation, particularly with complex nested structures.
• Both platforms were described as having bugs and areas needing improvement.

Key Takeaway: The choice between Elementor and GeneratePress may come down to personal preference and workflow style. Elementor might be more suitable for visual designers, while GeneratePress could appeal to those who prefer working closer to WordPress core.

Final Thoughts

When choosing between Elementor and GeneratePress for your WordPress projects, consider the following:

1. Project Requirements: Assess whether your project needs the extensive design flexibility of Elementor or if the lightweight approach of GeneratePress is sufficient.
2. Performance Priority: If absolute top-tier performance is crucial, especially on mobile devices, GeneratePress has a slight edge. However, don’t discount Elementor, as it can be optimized for excellent performance as well.
3. Development Team Skills: Consider your team’s expertise and preferences. Elementor might be more intuitive for visual designers, while GeneratePress could be preferred by developers comfortable with WordPress core.
4. Long-term Maintenance: Think about the long-term implications of your choice. GeneratePress’s closer-to-core approach might offer more stability and easier updates in the future.
5. Client Needs: If clients will be managing content, consider which platform would be easier for them to use and maintain.
6. Customization Level: Evaluate how much customization your projects typically require. Elementor might offer more out-of-the-box design options, while GeneratePress provides a clean slate for custom development.

Remember, there’s no one-size-fits-all solution in WordPress development. Both Elementor and GeneratePress have their strengths and can be excellent choices depending on the specific needs of your project. The key is to understand the trade-offs and choose the tool that best aligns with your goals, workflow, and client requirements.

Ultimately, the success of your WordPress site depends not just on the tools you use, but on how well you optimize and implement them. Whichever platform you choose, focus on creating a fast, visually appealing, and user-friendly website that serves your or your client’s needs effectively.