Redesigning StevePavlina.com – Part 8
This is part 8 of the 9-part series on Redesigning StevePavlina.com.
Monetization
When monetizing a website, it’s common to think in terms of a sales funnel, an analogy I find dehumanizing and prefer to avoid. I understand that this model can be effective at generating sales. But treating people as inputs to a funnel doesn’t satisfy my heart and spirit. It seems like a hollow, soulless way to think about business.
Of course it’s nice to generate income from one’s work, and I have no problem with that in general. I just want to make sure that any monetization approach I use is holistically sound, meaning that it fits my lifestyle and values. I like income sources that have a heart.
In 2008 I was earning $12-13K per month just from advertising on my site, about $9-10K of it from Google Adsense. The money was automatically deposited into my bank account each month, and I didn’t have to do much at all to maintain it. Later that year I removed all the ads because I didn’t feel good about distracting my readers. Imagine how much extra cash I’d have today if I’d kept those ads going all this time.
Taking shortcuts to abundance isn’t good for my growth. I’ve sacrificed easy income on many occasions to put more difficult lessons on my plate. When I’m learning and growing a lot, I tend to feel abundant regardless of how my finances are doing. I seem to thrive when I’m in the sweet spot of challenge, and sometimes I have to reject income streams that lead me away from that sweet spot.
A year after I dropped advertising on my site, I started doing public workshops. The next year I began traveling a lot. A couple years after that, I started speaking internationally. I don’t think I’d have branched out so soon if I’d stuck with the easy advertising income. By getting rid of that misaligned crutch, I felt driven to stretch myself in other ways. I no longer had to waste energy thinking or caring about advertisers or advertising. This freed up more energy to focus on my readers. They were the ones who encouraged me to start doing workshops.
My income strategy, if you can say that I have one, is to put my values, lifestyle, and happiness first, and then generate income in ways that satisfy my values, enhance my lifestyle, and prolong my happiness. Fortunately this is possible.
Presently my favorite way to earn money is by doing workshops. They provide a lot of value to people, the pricing is reasonable, and the feedback from attendees is wonderful. I love designing and delivering new events. So part of my income strategy for the new site was to bet bigger on events.
We have four new workshops booked for 2016, and I’ll announce the topics and open registrations sometime in May. The dates are listed on the Events page. Doing four workshops in four months will be the most we’ve ever done in such a short period of time. This is also the first time we’ll be doing workshops in a non-hotel venue. We’re using a creative space that used to be a nightclub, and we’ll have the whole building to ourselves, which gives us more flexibility than ever before.
Another way I enjoy generating income is with creative projects such as Imaginary Men, which I recorded with several friends over three nights in Santa Barbara, California. We shared lessons and stories about growth, dating, relationships, and our biggest personal challenges.
It’s nice to have income from a variety of sources such as book royalties, affiliate income, and joint ventures, but my favorite approach is to create something people will appreciate and sell it direct. That was my favorite strategy for my games business too. When I sell direct, I receive a lot of personal feedback, encouragement, and suggestions for improvement, which can be very motivating. With other income sources, the feedback is much lower, so it’s harder to assess the impact.
When people send me direct feedback, they tend to share the impact the work had on them. When they write reviews online, they mainly comment on the content itself, but that doesn’t tell me how it affected them.
To me this income philosophy is just common sense. Why would I want to chase income sources that degrade my lifestyle or create alignment problems with my values? This is why I haven’t had a job since 1992. If I tried to get a job today, I’d probably be fired in less than a week since I value freedom more than obedience. I like to make my own decisions regarding how I spend my time.
My monetization strategy for the website has to support my commitment to learning and growth, so it was important to design for flexibility. I streamlined the design of the workshop pages and created templates to make it easy to launch new workshops. I did the same for the Products pages. The News section also serves as a convenient place to announce new products and events. But these are flexible structures, so it would be easy to add different types of income streams without breaking the design of the site. However I want to earn income, the design should be able to adapt to it.
I think that if we view life as a growth school, it helps us avoid the trap of treating money like a power source. Money is a number in a database… or some paper, plastic, or coins. Money just sits there. We’re the engines that drive it.
If you make good monetization choices, then earning money can be a fun and exciting game that fuels your growth. Otherwise it can be a depressing, frustrating, or stressful headache. Whenever you find yourself succumbing to the latter, question the decisions that led you there, and push yourself to make better decisions. You can always change your mind.
Testing and Launch
In the final month before the site launched, I did lots of testing to make sure everything worked properly. This included testing all WordPress pages and a selection of posts on Chrome, Safari, Firefox, and Edge browsers. I also tested on different devices including an iPhone, iPad, laptop, and 27″ monitor.
I used the plugin Responsible to help automate the testing of different screen sizes, which allowed me to simulate testing on devices I don’t have. WordPress recently added a limited version of this feature to the Customizer (Appearance -> Customize in WordPress admin).
After testing on my local machine, I uploaded the site to a temporary staging server. A staging server is a subdirectory or subdomain where you install a copy of your site for testing purposes. That way the site will be live on the Internet, but it won’t be getting any traffic yet.
There were also some plugins I could only properly configure once the site was Internet-accessible, such as a few things in Jetpack.
Once I had everything running properly on the staging server, I wrote up a detailed, step-by-step launch plan to copy the site from the staging server to the live site’s location. This was fairly easy to do, but I wanted to be cautious about it and not screw anything up. I also wanted to minimize downtime.
I decided to do a soft launch first. My traffic is normally lowest on weekends, so I launched on a Friday afternoon. This gave me time to monitor the site throughout the weekend to make sure it was working as expected, but without making a big fanfare about it just in case there were problems to fix. Then the following Tuesday, when I was confident that everything was stable, I announced the site to my mailing list, which brought a surge of traffic and a lot more feedback.
Overall it was a pretty smooth launch. I did encounter some minor bugs afterwards though, so for the new few days, I mostly worked on bug fixes, minor tweaks, simple improvements, and responding to feedback.
Speed Optimization
Even at the time of the launch, I still had a list of 50-100 minor improvements to make and ideas to try. Improving a website is like battling a hydra; every feature you add spawns two more ideas. I tried to separate the important features that should be available at launch from the other ideas that could be implemented later.
The area where I did the most work after the launch was optimizing the site for speed. I wanted the site to load quickly and to be very responsive. I didn’t want people having to wait several seconds for pages to load.
There are a number of free web services that can your site for speed. These tests take less than a minute, and then you get a free report to look at. Here are the testing services I used:
- GTmetrix – my personal favorite, although sometimes I have to run it several times to get an accurate report (for my site it had a tendency to prematurely jump to the report when only about 25% of the page had been loaded, thereby missing a lot of resources)
- Pingdom – also pretty good, but not as specific or detailed in its suggestions as GTmetrix
- Google PageSpeed Insights – a decent place to begin when you have a lot to improve, but only offers basic suggestions and has overly punitive scoring (even news.google.com only scores 68% for mobile and 77% for desktop)
When I first ran my site through these speed tests, the scores were mediocre at best — mostly in the 50-65% range. Fortunately these sites gave me lots of suggestions for improving the speed.
My favorite profiling tool was definitely GTmetrix. They provided two different profiling scores (PageSpeed and YSlow) with detailed scoring of different factors and A-F letter grades for each factor. On about half of the speed factors, I was getting As and Bs, mainly because they were already handled by my WordPress theme. So I focused on addressing all the Cs, Ds, and Fs first.
Fortunately GTmetrix provided decent advice on how to improve each area where I was lagging. I began working on the bigger issues and gradually worked my way down to the finer ones.
This included:
- Enabling gzip compression for files, including CSS, Javascript, and font files
- Deferring parsing of Javascript, so it isn’t render-blocking
- Removing query strings from static resources
- Adding the plugin Autoptimize, which minifies and combines HTML, CSS, and JS files
- Adding the plugin EWWW Image Optimizer, which losslessly compressed the image files on my site, reducing image bandwidth by about 10-15%
- Adding the plugin Disable Emojis to eliminate a wasteful WordPress file request (all that file does is add emoji support for outdated browsers, and it needlessly loads itself on pages that have no emojis)
- Adding proper caching-related headers to files, so browsers can cache them better
- Dropping the use of @import in one of my CSS files and putting the font definitions into the main CSS file
- Signing up for CloudFlare, a Content Distribution Network (CDN) that greatly reduces server response time
- Enabling CloudFlare’s RocketLoader feature and adding a rule to allow it to work with BeaverBuilder
- And lots of other little tweaks
Before I did any speed optimization, GTmetrix reported that it was taking 2-4 seconds to load the home page of my site. To load that one page required around 80 file requests. There were several bottlenecks that slowed down the page rendering too.
After these optimizations, I was seeing load times in the range of 600-900 milliseconds (0.6-0.9 seconds). My speed scores soared to 98% for PageSpeed and 96% for YSlow — straight As. 🙂
I also tested other pages such as the main blog page and some article pages and got similar scores on those.
Reaching 100% wouldn’t be realistic since the remaining optimization suggestions are largely out of my control. For instance, some would require changing the expire headers for Google Fonts, which are hosted by Google. Even Google’s own PageSpeed test complains about their fonts. While this minor issue reduces my test scores a little, Google Fonts load so quickly in practice that they aren’t a bottleneck at all. So to get that last 2-4% on the score, I’d have to do things that wouldn’t make my site any faster; they’d only satisfy the idiosyncrasies of scoring algorithm.
This optimization work took me about three days, but these were easily 10-12 hour days. If I had to do it all over again, knowing what I now know, I could do all of this work in a few hours. That’s because most of my time was spent researching how to do things that I didn’t know how to do. I also had to do lots of extra testing to figure out the right way to make certain changes. Ignorance and inexperience slowed me down.
I found the Waterfall tab in GTmetrix especially helpful as I worked on increasingly small changes. It showed me exactly how long it was taking to load each resource as well as which resources were render-blocking, so I could see where the remaining bottlenecks were. A render-blocking resource is one that has to be loaded before the page is first displayed to the visitor. Resources that aren’t render-blocking, such as Javascript for animations or form processing, can be delayed and loaded after the page is first displayed. This is especially important for speeding up sites on mobile devices, where page loading can seem notoriously slow.
I spent hours going over every file on that waterfall graph, which showed me problems I might otherwise have overlooked. For instance, I noticed that one of my fonts was taking a relatively long time to load. I checked the file and noticed that the font wasn’t being compressed, even though I thought it was. So I added a little code to an Apache configuration file to compress fonts, which reduced that font’s file size by about 75%. This shaved perhaps 200-300 milliseconds off the page load time. That’s of couple of fast blinks! But if I can save thousands of people those two extra blinks every day, then why not?
This level of optimization might sound a bit obsessive, and it surely was, but I really enjoyed obsessing over it. It seemed a little intimidating at first because I didn’t know much about speed optimization when I started. I took it one step at a time, and each small speed boost encouraged me to keep going. Once I got into it, it was hard to stop. One evening I forgot to eat dinner because I was too wrapped up in shaving off another 50-100 milliseconds.
I like that this is good for my readers too. Of course there are many factors that can affect page loading time, including your browser, your device, and your Internet connection, but it’s nice to know that the bottlenecks aren’t on my end.
A fast and responsive website is apparently good for search rankings too, so it’s possible that my site may rank a little higher in the future because of this optimization work.
Time and Cost
I started working on this project on August 26, 2015, and the site launched on April 1st, 2016. I didn’t work on it full-time for all of those seven months though, and I had at least four trips out of town during that stretch, including 2-1/2 weeks in Mexico. Overall I probably invested 600-800 hours in this project up until the launch point, so that would be equivalent to 15-20 weeks working full time.
I seldom worked a 40-hour week though. Sometimes I put in an obsessive 80-hour week, other times a relaxed 20-hour week. This was my primary project for those seven months, but it wasn’t my only project. I had other business tasks to handle as well.
Since the new site launched, I probably put at least another 150 hours into it, fixing bugs, making changes, and doing optimizations. I could easily invest a few hundred more hours over time, as I add features from the list I’ve compiled and as suggestions continue to roll in.
In terms of money I actually spent on this project, here’s the tally:
- $40 for WordCamp Las Vegas in September 2015
- $199/year for Beaver Builder subscription (theme and page builder), but likely discounted after the first year
- $81/year for paid plugin subscriptions
- $70 for Sublime text editor
So I spent a total of $390 on the project, with at most $280/year in ongoing expenses (likely a lot less though since Beaver Builder’s annual renewals should be heavily discounted). If I only get one extra workshop registration each year because of the new site design, it will more than cover the out-of-pocket costs. Additionally, these expenses are all tax-deductible.
The rest of the software and tools I used were already paid for, and my web hosting costs are the same as before.
So in terms of money, this project was inexpensive. I’d have been okay with spending more; I just didn’t need to. The main expense was time, so you could consider the opportunity cost of all those hours invested. For all the growth and learning that I gained, I think it was well worth it though.
In the final post in this series, I’ll share a recap of the personal growth aspects of this project and what I learned from it.
Stay tuned for part 9, which will be posted soon.
The post Redesigning StevePavlina.com – Part 8 appeared first on Steve Pavlina - Personal Development for Smart People.