Speed is king. The faster your website loads the more money you make, the better your search ranking, and the happier your visitors are. Now that the majority of users consuming content are on mobile networks it is more important than ever to have fast loading websites.
The rise of IaaS (AWS, Google Cloud, etc) has helped give rise to a new generation of PaaS utilities that are fast secure and stable. We now have an API for pretty much everything. User authentication, eCommerce, Content Management, nearly everything a web developer could need is an API call away. The backend will turn into primarily glue code for all these various APIs. A “serverless” PaaS like stdlib or Amazon lambda could actually become most of what traditionally has made up “the backend.” If you can outsource most of your business logic to APIs why not? It’s faster and you don’t have to worry about maintaining a server or the code.
This then leaves the frontend. To make a site load fast nothing beats static assets served over a CDN. Static assets are faster than serving dynamic content. I see static site generators becoming more and more popular. Compile one time and have your site load fast for all users after. Smashing Magazine just converted their whole blog and website to a SSG. SSGs are simple and make websites easier to maintain. There are also all sorts of cool tricks for SSGs. For example you could use a headless CMS (via an API) to add CMS functionality to your site. A flow might be once someone edits content in the CMS it triggers a build and a deploy of the site via the SSG.
I see SSGs and PaaS APIs glued together by services like stdlib, webtask.io, amazon lambda, google cloud functions, and others as a very compelling choice, especially for getting started fast. Websites become faster and easier to maintain compiled with SSGs. The backend becomes glue code between all the APIs in use.
]]>A friend wanted to know how to track video view percentages, and get this information into his CRM so he could send targeted emails to contacts based on how much they watched his video. For example if a contact only watched the first 20% of a video, he wanted to follow up with them.
There are a couple of tools around that day this already. You can generally do this with Google Tag Manager and write custom code to connect to your CRM or PlusThis and integrate directly with a handful of CRMs.
While PlusThis looked like a good solution we didn’t want to spend money each month to just use a single feature of their service. So I decided to code up my own solution.
My friend is using ActiveCampaign as his CRM and email service provider so I decided to whip something together to track Wistia video view percentages with ActiveCampaign.
Here is a link to the repo with the code.
To set it up you’ll need a bit of technical knowledge but not much. Here is how to set it up with ActiveCampaign.
settings->Tracking->Event Tracking and add a videoTrack eventactid and eventKey in the .env file, you can find these in the Event Tracking settings area.acProxyUrl in the config at the bottom of wistia-ac-track.js.acEmail with the value being an email in your ActiveCampgain account. So for example https://waynehoover.com&acEmail=email@test.comAnd that’s it. I know there are quite a few ways to make this better (like adding tagging via the API), and there is a detailed todo list in the repo, but I feel this is a good start.
If you have any questions or would like help implementing something like this for your business email me 👋
]]>Just as I was about to re-(re?)build this site with Gatsby I read a great blog post that mentioned how a React/Gatsby sites pushes 138kb of javascript to the client 🤔. That is hard for me to justify. So I went in the opposite direction and gave myself the challenge of creating this blog with no frontend javascript at all.
Other than one small snippet of javascript to preload pages to make this site even faster, You'll find no other javascript here. No big frameworks or libraries, just pure html and css.
To build this site I started off with the 11ty xity starter because it had a well organized file structure. From that I removed all the frontend JS, and added tailwindcss.
If you are interested in the source code you can find it here.
]]>Speeding up your website might be the best thing you could do to your website. Users don't want to wait for your website to load and neither does Google. Google with reward your fast website with higher rankings in its search engine, and users will thank you by, well, not leaving your site.
It's clear that every second counts. In fact I every tenth of a second counts. For example, Amazon famously found that for every 100ms of load time 1% of sales where lost. Walmart came to a similar conclusion when it found a 2% conversion improvement per 1 second load time improvement.
In the list below I go over my top eight things I do to speed up a website. In a later post I'll share some more advanced tricks, but for now here are the top areas I focus on to optimize for website speed.
Use A CDN to serve your assets, and limit the number of domains hosting your assets. As HTTP/2 becomes ever more common establishing an SSL connection becomes a bottleneck. If we can limit the domains a client must create an SSL connection to and serve our assets from a CDN this is becomes a big win.
Use resource hints. This helps speed up SSL handshakes and DNS resolution time by hinting to the browser the site will need this later so cache it now.
Consider using tools like UglifyJS for javascript, HTMLMinifier for html, cssnano and PurgeCSS for css in your build step to reduce the size and minify your final HTML, CSS and Javascript.
The cost of javascript is high because you pay in performance at least twice. Once at download time and again at execution time. There are many tricks to get your javascript size down and to speed up your javascript that you do send, so many tricks that you could fill books. But the easiest thing to do is just SHIP LESS JAVASCRIPT. Do you really need that big framework just to add validations to your form? Do you really need that library just to toggle a class on a button? Think before you javascript.
This technique is natively supported in chrome, and a simple polyfill is worth it for other browsers. You can make your website feel blazing fast by lazy loading images and videos. If a user is scrolling on your page they are have already signaled they like what they are seeing and will have no issue with waiting for an image to load as they scroll to it. In fact this is becoming the standard that users have become used to.
The TLDR here is just to use an image host like Cloudinary or imgIX. They will automatically scale and transform your images based on the device and resolution of the user. This can be huge because most of the size of a website is in images, and to reduce your image size is to reduce your site size. I can't stress this enough. You could also use a service like sharp in your build step instead of an image host.
There is so much to be said here about optimizing video. I suggest watching this great learn with Jason episode to get a good rundown on how to make video fast. But again the TLDR is use an image host and only ship video that your user can actually see and use.
You can only fix what you can measure, and Google Page Speed is critical in giving you insightful metrics on the speed of your website. I highly recommend implementing lighthouse-ci CI/CD pipeline, there is even a nifty github action that can give you insight on how each commit effects page speed.
Static websites will outperform dynamic websites every time. Of course not all websites can be made static, but usually most marketing pages (like your homepage) can be made static. Serving html/css and js from a local CDN node will always outperform serving dynamic html from a single origin server. If you plan to reach a geographical diverse population this can bring a huge advantage in speed.
If you have any questions, or want to make your website faster feel free to contact me or find me on twitter ⚡
]]>The more a company chooses to implement these values the more it will succeed, and more importantly the more the people working there will experience high levels of work satisfaction.
When we focus on results we can focus on what really matters and drop the things that don't, and when we make those results open to everyone, inside and outside the company, everyone stands to benefit. What matters is the results of your work, less so where or when or how you work. When the key metrics of a company are clear and open we can begin to start optimizing for what is important, we can see the positive impact we are having on the company and the positive impact the company is having on others. This goes beyond simple revenue charts.
The freedom to choose where we work, how we work, and when we work. This creates an atmosphere of trust and respect. This also fosters an async first communication culture, which when mastered allows a company to excel in the global market.
Foster learning for personal and professional growth. A company that has curiosity at its heart is always helping those in it to learn and grow, try new things and innovate. Learning and growth is important as everything is constantly changing, to be successful we must prioritize and embrace learning and growth.
Information asymmetry fosters adversarial relationships. When everyone knows how much everyone is making and the company books are open it creates an amazing atmosphere of trust and respect.
Some links that inspired this thinking:
]]>