Articles

Optimizing WP for Core Web Vitals

By Rob Howard, Founder & CEO

During my two decades as a professional web developer, I’ve watched the Internet evolve from its simple and humble origins into a complex and ever-changing cocktail of browsers, devices and edicts from the major tech companies. It’s hard for anyone to keep up, and it seems like every few months, Google announces a big new change that will affect how your site is ranked in its search results and perceived by your customers.

Core Web Vitals is one of those pivotal changes. In 2021, Google will begin ranking your site — and potentially labeling it for visitors – based on whether it meets Google’s exacting standards for page speed on mobile devices. It’s an opportunity to get ahead of the competition – and you’re at risk of falling behind if you let your site languish rather than optimizing for the new rules.

I’ve spent more than a decade learning the ins and outs of optimizing WordPress, the web’s most popular content management system, and over the past year I’ve brought my site and many client sites up to lightning-speed, scoring in the coveted 90th percentile and higher on Google’s Core Web Vitals measurements. That means a better user experience and an opportunity to outdo the competition in rankings for valuable search keywords.

I will be sharing some of the chapters from my new guide, Optimizing WordPress for Core Web Vitals, in a series of blog posts — or, you can download the full guide as a PDF here.

In the guide, I’m sharing a complete overview of the process that I’ve used to optimize hundreds of WordPress sites, keeping them fast, secure and ahead of the technological curve. I want you to avoid the pitfalls and confusion that almost everyone struggles with when they first attempt to optimize their site, and skip straight to the payoff of happier users and increased organic search traffic.

What are Google Core Web Vitals?

The Core Web Vitals system is a set of measurements that Google uses to calculate the speed of your web site — resulting in a score that ranges from 0 to 100. In 2021, Google will begin using this score as a factor in your rankings, which makes Core Web Vitals a new and pivotal component to your Search Engine Optimization (SEO) goals.

While we usually think of things like keyword optimization, backlinks, meta tags and content when we discuss SEO, Core Web Vitals signals Google’s shift towards prioritizing the on-page experience in their rankings.

In addition to being newly important for SEO, the Core Web Vitals score also indicates how well your site performs on mobile devices — in particular, they’re using the mobile score from a 4G device (which is a little slower than a modern iPhone or Android device) as their baseline. That means, in Google’s eyes, you’re measured by how well you perform on a lower-end device and they care much less about how your site looks on a fast computer with a large desktop monitor.

In some ways, this is a challenge, because many sites aren’t currently optimized for mobile visitors. In other ways, it gives us some unique optimization opportunities because you can get away with your site being a little “heavier” on desktop if you really speed it up on mobile – that is, you can show more content and imagery to users with larger screens and pare it down for users with smaller screens.

Achieving excellence on your Core Web Vitals scores means you’re setting yourself up for success with SEO as well as creating a better experience for your mobile users — which will often lead to better conversion rates, or users sticking around on your site for longer when they’re coming in via social media and other sources that are heavily tilted toward mobile visitors.

Here’s a quick outline of the three primary components of Core Web Vitals. Later in the guide, we’ll dig into the six scores that influence them and ultimately generate your 0-100 score for each page.

Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

The links above go directly to Google’s definition of each of these measurements — and as you can see, it’s full of jargon! Even for a web developer, these metrics are kind of obtuse and difficult to understand. So, in this guide, I’ll introduce these concepts to you in layperson’s terms so you can easily assess which elements of your site need work without getting bogged down in overly fancy tech language.

Want to see how your site performs right now? Head over to Google’s PageSpeed Insights tool and give it a try. Then read on for a deep dive into how you can optimize your site, and how we can help if you get stuck.

Read the full guide to Optimizing WordPress for Core Web Vitals…

Building Long-Term Relationships as a Core Strategy

By Rob Howard, Founder & CEO

Rob Howard in conversation with Susan Boles on the Break the Ceiling podcast

If you’ve read Rob’s Agency Owner’s Guide to Hiring Web Developers, you know that one of his core values is building long-term relationships with both his clients and his team. He treats them as his friends — people he’s going to be working with for many years.

Rob was a recent guest on Susan Boles’ Break the Ceiling podcast to discuss why he prioritizes these long-term relationships and how he orients his business and its offerings to encourage them.

Listen to the full episode to hear:

Why we offer a hybrid retainer, called a WordPress Assurance Plan, that helps to build long-term partnerships
Why we offer an industry-leading unconditional 30-day guarantee on our work
How we infuse relationship-building into every aspect of the agency
How to create your own unique offerings that embody your personal and company values
The benefits of crafting all of your services around a long-term recurring relationship model

Retrofitting ExpressionEngine 1 and 2 for PHP 7

By Rob Howard, Founder & CEO

More than a decade ago, I discovered ExpressionEngine — an extraordinary PHP- and MySQL-based content management system.

For years, it was my go-to CMS. And although it had its issues in later versions and has now been (in my opinion) fully eclipsed by WordPress, it was always solid software, and I continue to use CodeIgniter, the framework on which it was based, to this day.

In the past few months, I’ve fielded a handful of requests from legacy clients who are still on EE 1.x and 2.x — and whose sites have broken due to their hosts forcing an upgrade to PHP 7. Nowadays, we set up the vast majority of our clients on our WordPress Assurance plans for continuous upgrades, but there are always some clients who choose not to make that investment and thus end up with outdated sites like these. That said, I think it’s a testament to EE’s security and stability that many of these sites have made it 10 years without a meaningful software update!

So EE 1.x and 2.x are really solid, but they definitely do not work on PHP 7. Because I went through this process a couple times, I’ve now documented it to help you solve the same problem on your legacy sites. (And of course, you should build your client a new site — but this will at least hold them over for a while.)

Adding back functions that no longer exist in PHP 7

Legacy ExpressionEngine relies on a bunch of functions that no longer exist in PHP 7 and above – including critical ones like mysql_ functions (which have simply been renamed in PHP 7), as well as annoying ones like the magic quotes function. The quickest way to fix this problem is simply to paste these functions into your index.php file in your root directory and your system folder, as well as admin.php on EE2. Like everything in this guide, it’s kind of a “hack,” but it gets your site back online.

First, add this function near the top of your index.php files (plus admin.php in EE2) to get the Magic Quotes function to stop throwing an error:

if (!function_exists('set_magic_quotes_runtime')) {
    function set_magic_quotes_runtime($new_setting) {
        return true;
    }
}

Right after that, paste the contents of this file into your index.php and admin.php files, just below the Magic Quotes function above. This will cover all the major MySQL functions that have been renamed in PHP 7, so your database connections will magically work again. (Thanks to rubo77 for this fix.)

Disabling Error Reporting

Despite fixing all the deprecated functions, you’ll still find that your front-end site and/or your administrative backend throw a bunch of lower-level errors. While these aren’t a problem in and of themselves, they will mess up rendering of styles and prevent some pages from redirecting properly – not to mention just freaking out your client when they see a laundry list of bizarre error messages. To fix this, add the following near the top of your index.php files in your root directory and system directory:

error_reporting(0);
ini_set('display_errors', 0);

Note that this will prevent you from easily debugging, so if you get a blank page, that means an error occurred but it isn’t being displayed due to this setting. You can temporarily comment these lines out to get that resolved.

In ExpressionEngine 2 only, you’ll need to add a few more lines of code to universally disable error reporting.

In your EE2 admin.php file in your root directory, make sure the $debug variable is set to 0 around Line 69.

$debug = 0;

In the same file, you may also need to use some harsher settings on Line 170, by changing this:

error_reporting(0);

To this:

error_reporting(E_NONE);	
ini_set('display_errors', 0);

In short, you can’t get too intense with adding these functions to disable errors.

Lastly, head over to your EE2 file at /system/expressionengine/libraries/Core.php. Change lines 561-562, within the _enable_debugging() function, to the following:

error_reporting(E_NONE);
@ini_set('display_errors', 0);

That should silence all your errors! If you find more, you can liberally paste the error-hiding functions above into any PHP file.

Teaching EE1 how to tell time all over again

The most bizarre issue we’ve discovered is that, once moved to PHP 7, ExpressionEngine 1 is no longer able to generate a proper timestamp, which means all your weblog entries get a date of “0” and your weblog queries break because of issues with dates being generated as blank strings.

The quickest fix for this is to modify the /system/core/core.localize.php file. Around line 57, change this code:

$this->now = $this->set_gmt($this->server_now);

To say this instead:

$this->now = time();

When you do this, you’ll get a timestamp in UTC time instead of a blank string or a zero, which should get most things working. However, depending on your time zone settings in ExpressionEngine’s control panel, you may find that dates on new weblog entries are several hours too far in the future or the past. If you are having issues with entries appearing in the future (or as expired) inappropriately, you may want to add the show_future_entries=”yes” parameter to your weblog:entries tags. This should get it working again, even though your control panel will still have some odd time-zone disparities. Here’s an example from one of our sites:

{exp:weblog:entries weblog="pages" limit="1" show_future_entries="yes"}

Note that the other parameters will be unique to your template, but show_future_entries=”yes” is the key to fixing the time zone issues. Also, watch out for the “curly quotes” if you’re pasting directly out of this blog post.

Questions?

If you need help getting your legacy ExpressionEngine 1 or 2 sites working with PHP 7, contact us here and we’ll get back to you right away. Happy debugging!

Why We Love Trello

By Rob Howard, Founder & CEO

Trello is a web-based Kanban-style list-making application that’s commonly used by teams to organize project tasks into lists, especially when those teams are using the Scrum project management framework like we do at Howard Development & Consulting.

Or, in Trello’s own words:

Trello is a collaboration tool that organizes your projects into boards. In one glance, Trello tells you what’s being worked on, who’s working on what, and where something is in a process.
Imagine a white board, filled with lists of sticky notes, with each note as a task for you and your team. Now imagine that each of those sticky notes has photos, attachments from other data sources like BitBucket or Salesforce, documents, and a place to comment and collaborate with your teammates.
Now imagine that you can take that whiteboard anywhere you go on your smartphone, and can access it from any computer through the web. That’s Trello!

If you’ve ever worked within the Scrum framework, then you’ll already be familiar with how most project tasks are organized — project backlog, sprint backlog, in progress, blocked, and done. So, given Trello’s layout of boards and lists, it’s a natural fit for these projects.

Let’s look at the basics of this layout.

First, this is a board:

Next, this is a list on a board:

Then, a card within a list:

And finally, the details of the card:

Relating this back to Scrum, you can make the following equivalencies:

A board is a single project
A list can be either a backlog, tasks in progress, blocked tasks, or completed tasks
A card is a task
The card details contain the details of the task, such as the user story, acceptance criteria, or any relevant files as attachments

But the benefits of Trello aren’t limited to its layout.

One of the most useful features is that, like many web-based applications, multiple team members can work on the same board at the same time — with each team member able to see changes in real-time. For example, a project owner could be refining a user story or adding attachments that the developer working on the task can access immediately; or, one developer can start to work on a task without the risk of another developer duplicating their work.

Another feature that we like is that Trello is extremely simple to use. The learning curve is minimal; you can create boards, lists, and cards, each with a single click; and, cards can be moved up and down within a list or from one list to another by dragging and dropping them. I’ve worked with a wide range of teams, from developers to HR writers, and never once has Trello’s UI or UX been a barrier to its use.

Finally, Trello is extremely flexible and adaptive to how your teams work best. While we use Trello as a Kanban-style board at Howard Development & Consulting, you can create lists and cards for any purpose and organize them in any way you like. Trello also offers hundreds of power-ups, which are plugins that expand the features available to you. Some of the power-ups are developed by Trello, but most are from third-parties. Either way, they integrate seamlessly with your boards and allow you to fully customize your experience.

For example, we use Butler to create automations, Google Drive to integrate our files from the productivity suite, Custom Fields to add new fields to our cards, and Slack to connect Trello to our Slack workgroup for automatic notifications, card creation, and to attach conversations to cards.

As a development team that embraces the Scrum framework, we’ve found Trello to be one of the most useful applications for managing our projects. While the bulk of our work is done in Basecamp (which we’ll discuss in another post), Trello allows us to drill down into some projects at a much more granular level — and some of our clients prefer it because of this and its ease of use.

Top Three Ways to Retain a Great Web Developer

By Rob Howard, Founder & CEO

There’s a paradox you’ll discover as you’re building your team: even though hiring great people benefits everyone, nobody really enjoys the process. Agency owners struggle to write job descriptions, conduct interviews, and make judgment calls about the best candidates. Candidates hate the process of searching for opportunities, crafting resumés, updating portfolios, and feeling like they have to sell themselves to one company after another.

I’ve met thousands of creative and technology professionals in my career – and not a single one chose their career because they love sales. We’re creative! We want to create cool stuff! And the hiring process is really just sales by another name – the company sells itself to candidates, and candidates sell themselves to the company – which means we’d all like to get it over with as quickly as possible.

So, how do you best simplify and shorten the hiring process? By making sure your great new web developer sticks around so you don’t have to go through all this again for no good reason.

Data from the Work Institute’s 2019 Retention Report shows that recruiting and training a new employee can cost a business up to four months of their salary, not to mention any lost productivity during that time. The same study reports that the top two reasons for employee attrition are career development (22 percent) and work-life balance (12 percent).

Web developers are no different.

Sometimes they leave for more prestigious opportunities in Silicon Valley. Sometimes they’re seeking a company with more diversity on its team. Sometimes they’re offered an alternative with more flexible hours, more location independence, better pay, or all of the above. I’ve seen this happen in the best economic times and the worst because talented developers always seem to be in demand.

Unless you’re actively working to forge a long-term relationship with your developer, chances are someone else is working much harder to lure them away.

It’s most painful for the agency owner when a developer parts ways with a company and leaves key projects hanging – which, even in the best circumstances, is hard to avoid for an agency that always has many projects at various stages of completion. (Even if someone gives a month’s notice, they can’t realistically wrap everything up before they leave, and it might not be enough time to hire someone to fill their role.)

None of that sounds like fun to me, so I take a proactive – and, admittedly, somewhat extreme – approach to retention of my team: I want to build an organization that no one wants to leave.

And I want to continuously deliver the benefits – including top-of-market pay, location independence, schedule flexibility, and a culture of diversity and inclusion – that I know will set Howard Development & Consulting apart when competitive tech companies come calling.

Retaining high-end contractors, and how to not be Uber

Among the long list of tragic Silicon Valley outcomes is the perception that all freelancers and independent contractors are abused by corporations, and that everyone would prefer a traditional job if presented the choice. This is absolutely true of gig-economy companies like Uber and its many copycats – they’re so horrible to their drivers that California passed a new law in an attempt to compel them to treat people with dignity and respect. (The fact that this law was controversial should tell you a lot about the ethics of most technology companies.)

However, it’s not right to paint all independent contractors with the same brush. Beyond the realm of Uber, DoorDash, and starving-artist freelancers, there is a whole world of highly paid, highly skilled professionals who actually want to be independent. I know because I am one, and I have hired many of these all-stars to my own web development team.

This hidden world is full of widely experienced, highly skilled developers who are eager to stay with your company for the long-term. They could go work for Google tomorrow, but when they get those offers, they just smile and turn them away. They don’t crave so-called career advancement because they’ve already found their sweet spot. They’re not just earning an income that competes with the best in Silicon Valley, but they’re doing it in a way that provides flexibility and independence that none of the big-name companies can offer.

“Have you heard about those companies whose benefits include game-console rooms, cereal snack bars, top-chef lunches and dinners, nap rooms, laundry service, and free beer on Fridays? It seems so generous, but there’s also a catch: You can’t leave the office.
These fancy benefits blur the line between work and play to the point where it’s mostly just work. When you look at it like that, it isn’t really generous – it’s insidious.
These mainly exist at companies that work 60-plus hours a week, not 40. Sounds more like bribes than benefits, doesn’t it?”
– Jason Fried and David Heinemeier Hansson in It Doesn’t Have to be Crazy at Work

When you hire an experienced freelancer, you get someone with a wide range of experience (they actually do know all those frameworks and languages you’d find in an over-the-top job description). They’re generally business owners, which means they’re solid communicators, and they don’t need nearly as much training or hand-holding as in-house employees who are early in their careers. And because they’ve already arrived at their major goal – running a flexible, independent business – they’re happy to stick with you for years or decades.

Here are the top three ways to retain your best web development talent.

1. Provide a roadmap for career growth

One of the challenges of running a relatively small business is that your most valuable and ambitious team members often look up the ladder and see only you – which means limited growth potential since they’re not likely to take over your role as owner any time soon.

This is one of the areas where a big tech company can really appeal to a young developer – by showing a clear path to a career that’s bigger and better in many quantifiable ways.

To compete with that, you’ll need to get creative about how your company is structured and how you compensate your team as you grow. If you’ve been working with a developer for years, it’s likely they’re thinking about how they can someday become more than “just a developer” – that could mean managing other developers, shifting to sales or account management, or some combination of the two. I encourage you to nurture those instincts when you see them in your team because it means they’re aiming for growth that will be mutually beneficial – they’ll advance their careers and grow their incomes while helping you build a more valuable business.

For a long time, it was difficult for me to embrace growth. We’d get to a place where we felt like we were “sold out,” and then we’d slow down marketing and sales and focus on delivery. That was fun, but also set us up for stagnation and sometimes put too many of our eggs in too few baskets, exposing us to risk if a large client were to end their contract.

And even though we were making plenty of money with that strategy, it had the nasty side effect of stunting my team’s career growth – and more importantly, constraining their imagination about what the future might hold. If my five-person company is still going to be a five-person company in 10 years, then my team’s only real option for a career leap is to move to another company or start their own.

But if we grow to a team of 25, every one of those first five hires can see a clear path to a management role if that’s what they want to pursue. And as the company’s revenue grows, it gives us the fuel we need to provide bonuses, profit-sharing, or equity opportunities to managers who want to move to the next level. In other words, an ambitious young developer could map out an entire, successful, prestigious career path without ever working for anyone else.

Don’t grow for growth’s sake. Don’t even grow for your sake. Grow for your team, so you can give them the opportunity they deserve to build an admirable and enviable career.

2. The magic of location-independence and flexible hours

That said, if you’re used to hiring entirely in-house, there are some assumptions and approaches you’ll need to change to hire and retain great independent contractors. First, you’ll want to focus on remote work, because freelancers highly value their location-independence and time-flexibility. They’re also great at working remotely, and significantly more efficient than a typical in-house employee since they’ve been honing their work-from-home skills for years. Nobody in this group accidentally gets distracted by Netflix or Facebook after lunchtime.

And because they can take advantage of their location-independence to live wherever they want, they can earn extraordinary incomes while charging cost-of-living-adjusted rates that seem reasonable compared to the out-of-control costs of tech hubs like the San Francisco Bay Area and Seattle.

One of my team members, who lives in Toronto, recently asked a question that would flabbergast many employers: “So, do you mind if I work from Germany for a few weeks a year?”
No, I don’t mind.
In fact, I absolutely love it.
Not only does extreme location flexibility mean a huge quality-of-life boost for my team, it’s a competitive advantage that almost no other employer is willing to match. It means my team can weigh working for my company against working for a Silicon Valley powerhouse – and they can honestly decide that the lifestyle benefits of their current job are way better than the big guys can offer.

If you’re set on hiring in-house, you’ll need to be ready to compete with big tech companies – that means a high-end office space, a well-manicured reputation and an acceptance that, despite your best efforts, most of your best hires will move on when a more prestigious opportunity knocks. This approach works for some companies, particularly if you (as the owner) want to aspire to build a Silicon Valley-style workplace downtown in a major city.

If you prefer longevity, consistency, and working with a highly-skilled, widely experienced technology artisan – and you’re cool with granting more flexibility and independence in exchange for those benefits – hiring a high-end independent contractor is your secret weapon.

3. Independent contractors love retainers

I reached an inflection point in the process of building my team when I finally started selling a significant number of retainers – in my case, WordPress Assurance plans that allowed us to cover software updates, security, and support for sites after we built them. These retainers gave me the predictable revenue I needed to justify hiring a high-end web developer as an independent contractor while also committing to a significant amount of work per month – something that pretty much every freelancer craves.

For years, I took the opposite approach – calling on contractors only when they were needed for specific projects, then going dark for months at a time. The result was that I never had a chance to really nurture a relationship with someone who delivered great work – and even if I found a great candidate, they’d need to go pick up more projects as soon as we were done, which meant they’d potentially be unavailable the next time I needed them. This is a pattern I see creative agencies repeating all the time – they spend a ton of time and energy onboarding a developer, have one or two successful projects, then throw up their hands when that person suddenly gets booked out by other clients for months at a time.

Your goal is to be the client who books the best developers for months at a time.

That means building a flow of retainers (or a very steady stream of one-off projects) that allows you to provide your developer with at least 10 hours of work per week. I’ve found that 20 hours per week is the sweet spot since you’re likely to be the developer’s biggest contract, but they also have room to continue to serve other clients if they choose to do so. Your contract is also much more valuable to them because of its long-term, high-volume nature, which means you can agree on a rate that’s less than what they might charge to a client who only needs them for a few hours once a year.

The continuous engagement allows you to build a true relationship with your developer – so even if they’re working as an independent contractor and aren’t physically in your office, they truly become a part of your team, and they begin to share your goal of growing your company and delivering successful projects for your clients.