Troubleshooting a Slow WordPress Website

Test the speed of your website with Google’s PageSpeed Insights.

Waiting more than 1.65 seconds may result in a customer leaving the site (known as a bounce rate) and searching for a different solution offered on a faster competitor’s website. According to Google assessments conducted in 2017, bounce rates increase 32% when website page load times rise from 1 second to 3 seconds! That’s proof that nobody likes a slow WordPress website.

In 2024, optimal page load times are 0–2 seconds. Adding more time results in lower engagement, conversion, customer referrals, and search engine traffic.

Luckily, there are methods for measuring and improving on-page speed metrics. However, gaining insight into page speed takes time and requires carefully auditing of many website aspects.

7 Steps to Improve Speed  and Landing Page Performance

1. Evaluate the Platform: Consider whether the codebase of your website is open source and if it has a reputation for speed and performance. WordPress websites meet both of those requirements.
2. Assess Performance with Core Web Vitals (CWV): Insight gained from CWV illustrates how website visitors interpret and use the site. These metrics calculate the Largest Contentful Paint (LCP) or how fast a webpage loads. Combined with Interaction to Next Paint (INP), which gauges the interactivity of clicks, taps, and key presses, and Cumulative Layout Shift (CLS), which measures the website’s structure and stability, these three indicators allow you to analyze your website from a search engine perspective.
3. Choose the Right Theme: The WordPress Block Editor offers the lightest, cleanest option for responsive website design and development. It consistently ranks faster on speed tests in load times and content creation than traditional themes and non-native builders.
4. Optimize Images: The WordPress Block Editor natively compresses images, allowing page images to match the needed size, resulting in a faster load time. Additionally, many image compression plugins enhance this further.
5. Activate Browser Caching: Determine and cache any assets web browsers need to accelerate webpage load times for returning visitors. Without caching, the website must repeatedly refresh the content, which takes longer.
6. Evaluate Hosting and Employ a Content Delivery Network (CDN): Web hosting service performance and pricing vary widely. Migrating to a new host and service may be a worthwhile answer, particularly if the host provides a CDN. A CDN identifies user locations and provides users with data from their nearest server, reducing load times globally.
7. Remove Unnecessary Files and Optimize CSS Delivery: When above-the-fold content loads first, visitors view the site as blazing fast. Removing unneeded CSS, JavaScript, and plugin files, and activating asynchronous file loading also speeds sites up.

As you can see, many factors determine website page speed. Following the seven steps outlined above will transform your slow website, allowing you to deliver rapid results and an enhanced user experience.

Are you still struggling to improve your slow WordPress website? Contact WebDevStudios. We’d love to look under the hood of your WordPress site and make recommendations.

The post Page Speed Insights: 7 Steps to Transform Your Slow WordPress Website appeared first on WebDevStudios.

Visual Simplicity

Landing pages should be as clean and minimalistic as possible. Think Swiss design. The use of minimalism and white space allows us to focus 90% of the visual attention on the call to action (CTA), which is the lifeblood of the landing page!

When you are creating landing pages, remember that your calls to action should be very bold and strong. An overall simplicity can create natural contrast by helping CTAs stand out from the content and sales material. Take a look at these examples, and it’s pretty clear that a more minimalistic approach helps you focus on the messaging and CTA and promotes action more effectively.

Eye-catching and Pithy Content

Landing pages are not the appropriate setting for a blog-style amount of content. You’ll lose the users attention quickly if you don’t engage them. Content should be short and to the point, with headlines that are catchy and draw attention to the main CTAs. For example, look at the difference between these two examples; which catches your attention more?

Call to Action Text

The actual call to action link or button text should have just as much thought as the heading copy. For example, you may be able to significantly increase your conversion numbers simply by changing your CTA copy from “Sign Up” to Sign Up Free.” As you go through the process of creating landing pages, consider the words you’re using. If your button has drab copy such as “Learn More,” you’re almost certainly missing out on conversions. Opt for something more persuasive that also indicates a small amount of urgency. It should encourage action from the visitor by using words like “Get Started Now” and “Start Exploring.”

Sharp, Beautiful Media

Just like successful songs need a catchy hook to get stuck in your head, your landing page should have some type of graphic to help hook the user visually. This can be a beautiful photo (custom photography is a million times more effective over stock photos, by the way), a well-executed product shot, or a custom graphic or illustration.

It’s important to determine which is appropriate for your brand and the goals of the landing page. For example, if your target audience is hip 24-year-olds in New York City, a cool abstract illustration or graphic will work much better than a landing page targeted to 45-year-old blue collar workers, who would probably benefit more from a clean product shot or photo.

Even if you don’t have a physical product, you can always hire a designer to mock your product up into a more real-world design to help connect with users. For example, this product shot is for an eBook, but because it’s mocked-up in the form of a physical book, it builds trust that it’s a legit product and helps catch the visitor’s eye.

Use Testimonials and Real People

Even if you only have one or two, featuring real words from real people can help create a more personal connection with your users. It’s been proven time and time again that showing real people on product and landing pages helps to increase conversion numbers. Highrise decluttered their landing page, and by adding prominent testimonials and pictures of real users, they saw their conversion rates skyrocket.

Many, many websites overlook the essential elements of landing pages. Just by following my recommendations, you can easily stay ahead of the competition, appeal to your visitors, and increase your conversion rates. Your website exists to make your business a success. Guarantee that goal by creating landing pages that work.

The post 5 Tips for Creating Landing Pages That Work appeared first on WebDevStudios.

Step #1: Understand the Value Proposition.

It’s critical that you understand value proposition and the competitive context of what ever you are trying to sell. For this exercise, I will be creating a Landing page for CMB2, a popular WordPress plugin created by the rockstars here at WebDevStudios. The purpose of the following steps is to create what we’ll call blocks from a hero, features, and a call to action. We want to communicate the value prop by displaying distinguishing features, and have a call to action linked to the download in the WordPress repo and Github repo.

Step #2: Start with Sketches.

My recommendation is to always sketch out your ideas. If you’re too busy to sketch, then you’re too busy to get it right. Many designers go straight into Illustrator or Photoshop. While that may still produce an acceptable result, don’t kid yourself–going straight for the mouse is not the most effective way to get to a design solution. You must discover the solution and that takes research driven by sketching; you must thoughtfully go through the value prop and encapsulate what you believe will get users converting. You need a broad set of ideas to choose from. You can get those ideas quicker by sketching them.

Need more convincing? Think about it from the perspective of different industries. Sketching is a requirement in architecture, print design, industrial design, film, animation, photography, and alike, because this form of creative processing and brainstorming is known for being effective at laying groundwork for the end result. Throw on some solid tunes, grab your pencil or pen and start sketching. Make these sketches exploratory and loose.

Here are my sketches starting with the hero and ending with the hook:

Step #3: Have some Photoshop manners, will ya!

The next step is implementing some of these blocks in Photoshop. Make sure to use smart objects when needed. As well, anything that is a vector will eventually be an SVG so make sure to prep that as smart objects that connect to illustrator. Time is of the essence, but that doesn’t mean work should ever be sloppy. Assume others will review your PSDs, so etiquette is a must. Name your layers and group stuff in folders, etc.

We are going to use 320 pixels as our baseline number. To create the different sizes (width) of the blocks, we will be using 320px as a multiple. For example, 1280 / 4 = 320, which means the hero will be 1280 x 960. I created a document and called it “hero.” Let’s set up a twelve column, 960 grid. Give twenty pixels of gutter.

The hero will have a main message “Hello, I am CMB2,” and secondary supporting copy. We’ll use what’s already in the repo as the supporting copy, which is “CMB2 is a metabox, custom fields, and forms library for WordPress that will blow your mind.” Also, I was thinking about creating a droid character called CMB2 as an homage to R2D2 of Star Wars fame.

In total, we are going to create four blocks. I am creating a hero, download stats, features, and the call to action. Take your time on the hero. While all blocks are critical, the hero starts it all–and is the very first impression you make on a visitor.

Step #4: Connect the PSD dots the right way.

I created a new Photoshop document called “CMB2-lander.” I made this document 1600 pixels wide and a to-be-determined height depending on the sum of all blocks. You will be placing linked blocks in this page–smart objects only, please! Label your layers–always. This is where your header and footer smart objects will go. Here’s all the blocks, in context, in the comp:

Step #5: Design what you can build.

If you are the unicorn I know you are, you design like a boss and can build it yourself. But, before we go further, it’s important to make sure that you can, in fact, build what you design. Don’t go rogue and design something that you (or someone else) can’t create. That doesn’t mean play it safe; that means know your craft well enough create things that can be executed. It will force you to level up–both by upping your awareness and expanding your skill set.

Here’s my toolset.

The tools I use to build a website are a pencil, a pad, Terminal, Sublime, MAMP Pro, SourceTree, using a starter theme like WD_S, and, finally, life. Day to day life is the most inspirational place I know, and I tap into it for ideas more than anything else. Look up at the sky. Look at the stars…we are surrounded by things both good and bad–by things that are empty and full of wonder. Tap into your creative center and design something wonderful, even if it is just a landing page. If you do it right, it’s not just a landing page; it’s art.

Pay attention grasshopper!

“Don’t concentrate on the finger or you will miss all that heavenly glory!”

Creating a product landing page can be easy when you have a system that you go back to–over and over again. Just like a corporation or small business, systems are critical. Over time, I came to understand that value drives visuals in the most successful landing pages. A landing page’s beauty is purposeful and there is no dissonance between message and design. This isn’t about design just for the sake of design! You’re telling a story by tapping into your skill and your surroundings. This is about knowing your craft in order to stimulate the behavior you want from users–conversion.

May your users convert the heck out of your next beautiful landing page!

A quick note from your resident editor: This post was created and written by Simon before he moved on to greener pastures, but it was so good we still wanted to share it. That said, please take a moment to follow Simon @SimonWebDesign and check out his website. He’s an incredible designer and colleague, and if you like this post, you’ll probably like his other work too. 

The post 5 Steps to Creating a Better Landing Page appeared first on WebDevStudios.