It’s 2017, and let’s face it, users are more A.D.D. than ever when it comes to surfing the web. No one likes waiting, and if your page doesn’t load within the less than 2.4 seconds you have to grab their attention, visitors will leave (sometimes forever). And the metrics back this up, which is why performance is more critical than ever to ensure that your website performs optimally across all mobile devices, desktop browsers and tablets.
In today’s highly competitive space, you can’t leave anything to chance, which is why our approach puts user experience first.
Now, let’s dig into an overview of our process, and how we rank the priorities.
Priority #1: Optimize media like a boss.
Un-optimized media and excessive load times plague the web, and can be the primary cause of users abandoning your site. A single un-optimized image can – and will (believe us) — drag a site’s performance down the drain, which is why optimizing media is absolutely crucial to a high functioning website, and is at the forefront of AtreNet’s collective, performance-driven mind. We won’t rest until everything loads as it should, as fast as it should.
The AtreNet formula for optimizing media is multi-faceted and carefully considered, requiring a keen eye and the hands-on experience that only comes from a seasoned team of talented engineers.
Start at the beginning. Our process begins before a single image is uploaded; we’ll take that beautiful design and strip it down to its bare assets. These core assets (think: your large, pretty background image) will be manually, methodically and meticulously tuned until it hits that just-perfect point before a trained eye can detect any quality degradation. Our dedicated engineering team handles image optimization on a case-by-case basis to cinch the best outcomes without sacrificing any image, ensuring that every visual on your site is lean, clean and loads with ease.
Compression is king. After we employ manual optimization, we go in for a second pass with a series of automated tools. With our battle-ready suite, we can strip the last bytes off of assets, including things like metadata and extraneous color profiles. Our toolkit includes over 50 of the industry’s top-performing compression tools (as well as some in-house secret sauce) to enforce first-rate optimization throughout development.
Blue-chip Techniques We Implement for Blue-chip Clients:
- Manually optimized key media assets by our experienced AtreNet engineers and designers before they ever hit your server
- SVG Vector assets used when applicable for optimized, yet crystal-clear display on mobile and retina devices
- Automated image size upload limits applied to prevent the upload of unnecessary large files
Priority #2: A dedicated content delivery network tailored just for you.
A Content Delivery Network has many benefits when it comes to site performance – the primary benefit being significant speed improvements, especially for users in different geographical locations. When leveraging a CDN, a website is served from cache on high-speed servers located throughout the world. CDNs are an absolute must for ensuring your content performs flawlessly in all possible scenarios.
Our firsthand experience has led us to two go-to CDNs: The user-friendly and powerful, CloudFlare, and the enterprise titan, Akamai. Choosing the right CDN takes strategy and careful scrutiny to assess which is the most ideal – and cost-effective – option for your website. We’ve found these two best fit the needs of a B2B Corporate Website with a WordPress backbone.
CloudFlare is the safe bet. It’s intuitive, highly configurable, and just works well. This tends to be the choice for medium-sized businesses, but can also fit the needs of an enterprise organization. CloudFlare puts the control in your hands with features such as instant purge capabilities and offers excellent value for the money.
Akamai, on the other hand, is an A to Z turnkey solution serving many of the world’s largest corporations. Their service is fully managed, leaving even the minutest details out of your hands. As a highly specialized solution, they provide a dedicated, in-house team to keep your site running fast 24/7. Akamai is best served when the needs of a CDN extend past a single WordPress site, typically as part of a comprehensive program that spans across an entire corporation’s web offerings.
Both Akamai and CloudFlare feature:
- Real-time Analytics
- Custom Caching Rules
- DDoS Mitigation
- Two-step Authentication
- Shared SSL
- Forward Secrecy
- HTTP/2 Support
With CDNs such as these, websites can load twice as fast, use 60% less bandwidth, and have 65% fewer requests. Whichever you choose, both Akamai and CloudFlare boast some of the world’s largest distribution networks, which maintains superior performance benefits worldwide.
Priority #3: Find the host with the most.
Top-tier performance starts with top-tier hosting. Some things need to be delivered from the web server directly, not the CDN, so the speed of the origin server matters. The best hosting providers offer a flexible infrastructure for speed, stability and turnkey support, along with various developer-friendly features that allow us to interface seamlessly with your content build. A modern host, specializing in WordPress, will typically utilize a best-in-class technology stack, starting with the tried and true nginx platform as its foundation, the latest PHP7 (which provides state-of-the-art performance via asynchronous architecture), and a container-based server configuration to create a scalable, agile platform with a core focus on the most important aspect of all – reliability. These are the same leading edge technologies currently used by Google, Facebook, and Salesforce… just to name a few.
Priority #4: ‘Cache’ in on success.
Caching is as critical to improve website performance as sales are to your bottom line. We use a three-fold approach to tune up every page, which includes Server Caching, Browser Caching and Core WordPress Enhancement.
Server Caching is the most important; this tells the chosen host what files to maintain in a cache to be provided to an incoming user. With high traffic sites, this is essential as the server will quickly have the files or assets ready to deliver to the user on-hand. These same variables are sent to the Content Delivery Network, which makes it all the more critical to ensure consistent and correct configuration.
Browser Caching happens on the user level; this tells the user’s browser what assets to keep stored locally on their own computer or device, so that as they browse around the site, the assets are served instantly from the user’s machine instead of taking the long journey back to the server again. This saves time and retains user engagement with your site.
The next step is Core WordPress Enhancement to automate content caching capabilities. Content is the backbone of a site, and changes constantly. But let’s face it, you shouldn’t need an engineering degree to maintain fine-tuned caching. This is where beefing up WordPress’s functionality comes into play – we can automate the caching process to leave editors free to add and update the site’s content without having to worry about caching configurations.
Priority #5: Increase your markup’s IQ.
Some of our tried and true techniques include:
- Combining internal and external CSS
- Reducing the number of HTTP requests
- Minification of scripts as applicable
- Utilization of AJAX when loading large amounts of content
- Reducing DNS lookups
- Streamlining fonts and icons
Throughout the development phase, we take a strategic approach to optimization to guarantee a website maintains its speed in the development environment all the way to production. Our proprietary, down-to-the-nitty-gritty strategy is the culmination of years of engineering expertise and real-world application.
Priority #6: Mobile optimization is a balancing act.
As the mobile web continues to grow in prominence and usage, optimization specifically geared toward mobile devices across wireless carriers is imperative for any corporate website. Steps we take to provide a clean mobile experience may include, but are not limited to: replacement of mobile video media assets with image counterparts, simplification of animated elements, optimization of media assets generated specifically for mobile displays, and responsive design from wireframes to execution.
Mobile optimization requires a delicate balance in order to keep mobile device load times down without sacrificing the design, experience, or narrative of the website, so we focus on every element to ensure your content is as equally compelling on a smartphone as it is on a desktop.