It’s frustrating spending hours crafting the perfect piece of content to have it barely get noticed.
That time spent creating and editing feels like a waste because traffic remains stagnant. All-the-while competitors receiving great community reception for content pieces half the quality.
The problem isn’t the content… it’s the front end optimization.
There’s something preventing people from digging in and exploring. Something that Google doesn’t like so you’re ranking lower. What could it be?
There are several elements of the front end that could make a difference. Which is why we’re coming at you with several hacks you can do right now.
Front End Optimization: Hacking a Good UX
User experience is an encompassing area of design taking account of how users “feel” about their experience. It’s a process best outlined through Peter Morville’s user experience Honeycomb.
The honeycomb attributes value if it’s:
- Useful
- Desirable
- Accessible
- Credible
- Findable
- Usable
This model allows the designer to consider all beneficial elements that work off another. It sets a baseline when acting on front end optimization efforts.
Let’s keep this mode of thinking in mind when making improvements with the following hacks:
1. Improving site uptime
Say what you want about bias but improving site uptime would provide the best return on investment if you’re short on time.
After all, what good are the design changes if the site isn’t online?
40% of people will leave if a site takes longer than 2 seconds to load. Combining great Web hosting, a CDN, and website monitoring removes this problem.
Take these three actions:
- Upgrade your Web hosting plan
- Install Cloudflare or Amazon CDN
- Contact us about website monitoring
A great foundation (ie. uptime) will allow the other front end optimization hacks take full effect. Small changes make a big difference with the user experience.
2. Cleaning up the markup
A website becomes convoluted with code as updates and redesigns take effect over the years. Legacy code and plugins linger resulting in incompatibilities and slower page speeds.
Here are a few, quick ways to improve the markup:
- Use HTML5 for fancy graphics vs .jpegs and .pngs
- Reduce page file sizes by minifying the HTML, CSS, and JS
- Swap inline CSS/JS to external files
- Simulate and optimize page structure
These back end changes will dictate the front end optimization. Faster load speeds and simpler markup lets you explore creative strategies that were hindered by frustrating code.
3. Bringing back embossed
A study by the Nielsen Norman Group found users experiencing “click uncertainty” due to flat UI elements.
The study paired eye-tracking software with modified versions several site pages and domains. The pages showed flat UI elements versus 3D elements.
The results found a lack of stimuli in the flat UI themes.
A flat UI may be easier to scan but the “click uncertainty” is preventing people from taking action because they don’t know what to do. Resulting in fewer conversions.
Try this: Bring back 3D call-to-actions in design elements and measure results against the recent site theme.
4. Ditching the stock
Generic stock photos are a cliche in modern web design.
We spend our time on online social platforms mingling with real people. We’ve become accustomed to seeing one another.
There’s an immediate “blindness” to stock photos when we see them. The NYT’s covered how we ignore generic photos way back in 2010!
Instead, use a combination of:
- In-house photos (you & employees)
- Unique, high-quality stock (sparingly)
Choose photos representative of your brand and offers.
Include illustrations and stylization with the photos to create punchy imagery.
5. Using prefetching
Prefetching tells the browser to load elements before user interaction. This reduces page load speed when users navigate away from the page.
An easy way to enable prefetching is attributing links with the rel=”prefetch”.
Tools like Prerender.io creates a cache of JS files. The file is delivered to the browsers and search bots. The middleware reduces load speed resulting in a happy visitor and improved SEO.
Want to learn more? Take a look at CSS-Trick’s guide to prefetching, preloading, and prebrowsing.
6. Going mobile first
Reasons to design for mobile:
- Most access the web through their phones
- Android will overtake Windows for Internet usage
- People use 9 apps per day (30 per month)
The limited “real estate” of a phone screen presents challenges in design.
Design for mobile first by:
- Removing unnecessary navigation
- Reducing page file sizes
- Placing content front-and-center
- Setting a visual hierarchy
- Avoiding large graphics
A simple way to implement mobile-first design is by using website-to-app services such as Wix or Squarespace. These tools will take your existing site and convert it into a mobile-friendly design. Then, package it as an app!
The entire process of this conversion should take less than an afternoon. Minus minor tweaking and listing it in app stores.
7. Compressing graphics
A couple hundred extra bits of data can make all the difference in reducing page load speed. Reducing site graphics is easy with the help of file compression tools.
Want to compress images online?
- Tinypng.com
- Kraken.io
- Webresizer.com
Else, use a desktop application to make the tweaks:
- Photoshop
- Gimp
- XnView
These programs contain options to resample photos to keep image quality while reducing file size. In Photoshop, you will find this within the Image Dialog Box when sizing and saving the image.
Feeling lazy and use WordPress? Use the SmushIt plugin to automatically reduce image sizes while keeping the quality.
Experimental Hacks and Measurable Results
What works for one site may not work for another. These hacks may draw upon best practices and experimentation but you should use analytics to verify results.
Tools to help with measuring would include:
- Crazy Egg (heat mapping)
- Optimizely (A/B testing)
- ClickTale (analytics)
UserTesting.com (another great testing tool for our list) recommends an internal approach to major design changes. Set benchmarks and test the new front end optimization features within a closed group before taking it live.
Hungry for more Hacks?
Our blog covers a range of website tips and tricks.
You’re bound to find additional front end optimization hacks. Experiment with applying hacks aimed at specific niches that aren’t used within yours. Shake up your industry and set new standards!
You’ve put in the hard work crafting great content. Get it found.
