Article

10 Ways to Optimize Your Website

christopher-gower-m_HRfLhgABo-unsplash-e1571359232692

You don’t have to sweat every ranking factor for search, but one thing you should sweat? Website optimization.

A lot has changed in the past 10 years with search rankings and rewards. It’s not enough to only have high-quality content without fully optimizing your site’s performance. And optimizing your website is yet another important way for search engines to understand and reward your site. This allows you to increase your chances of generating the most conversions.

There are numerous methods of website optimization. As a starting point, consider 10 methods we use at Fresh to make sure the websites we create are performant and high-end from the standpoint of efficiency.

1. Compress Images

Images, a core part of any web experience, make up a bulk of downloaded bytes on a page. Optimized images can be downloaded more quickly by the browser, are more easily rendered on screen, and will provide better page load speed.

Tools we recommend: WP Smush, Kraken.io, JPEGmini, Tiny PNG

2. Compress with Gzip

Speeding up network transfers is a key consideration when optimizing your website. Gzip is a way of compressing files to make network transfers faster. Enabling compression on your website allows users to download your content more quickly. Check to see if you have Gzip compression enabled. Doing so can reduce your bandwidth significantly.

Tools we recommend: Gzip Compression Test, GIDZipTest

3. Minimize and Compress JavaScript Resources 

It’s possible to minimize and compress JavaScript resources – code comments, unused code, and variable names – without affecting how the code is interpreted by the browser. The benefit is that minimization and compression reduces the total amount of data transferred, which makes your website faster. Beyond minimization, other compression techniques include tree shaking and dead code elimination, where code is analyzed to remove code branches or libraries that aren’t being used.

Tools we recommend: JSCompress, UglifyJS, Javascript Minifier, Closure Compiler

4. Use Browser Caching

Google’s Ilya Gregorik writes, “Accessing related resources over the network is both slow and expensive. The download may require multiple round trips between the client and server. [This] delays processing and may block rendering of page content, and also incurs data costs for the visitor.”

“Caching” means storing web documents such as HTML pages and images temporarily in the user’s browser. This allows images, scripts – and sometimes even HTML content – to load immediately from the browser instead of downloading again from the server. The process of flagging and caching related resources can reduce load time and page performance.

Tools we recommend: GTmetrix, Browser Caching Checker

5. Use Content (Server Side) Caching, a.k.a. Object Caching

For a typical web page, database queries are made and scripts are evaluated. This generates the final HTML that is sent to the user. An “in-memory” data storage tool saves the results of expensive computations and database queries. The next time a page request is made, the web server can use these saved results to speed up the page building process.

Tools we recommend: Redis, Memchached

6. Check for Missing Assets (404s)

No matter how creative a 404 page is, arriving at an error page has a negative impact on user experience. Additionally, when a browser is attempting to locate a missing file, it may block other assets (images, JavaScript files, CSS files, etc.) from loading. This has a negative impact on the speed and performance of your website. Fixing the issue of 404s is as simple as using an online tool to review your website.

Tools we recommend: Online Broken Link Checker, Screaming Frog, 404 and Broken Link Checker

7. Prioritize CSS Optimization & Delivery

A common reason for slow websites is source code that isn’t optimized. Reducing the size of your CSS stylesheet can drastically improve your page load time. The key point is that the speed of rendering by a browser correlates to the speed at which style and layout information is processed.

If your CSS isn’t optimized, you run the risk of the browser taking multiple roundtrips to render the content.

8. Use a CDN

A CDN, or Content Delivery Network, is a global network of web servers that store and distribute content from your website. When visitors download content from a CDN instead of from your website, it reduces load on your website, freeing up resources to handle the remaining requests.

Tools we recommend: CloudFlare, MaxCDN, Amazon CloudFront

9. Use a Full Web Accelerator

A web accelerator caches entire web pages. This improves response times and decreases server load. The next time a page request is made, the web server simply returns pre-rendered HTML instead of going through the evaluation process again. The end result of using a web accelerator, in laymen’s terms, is that it reduces the time it takes for users to access a website. They will benefit from experiencing less latency and faster transfer rates.

Tools we recommend: Varnish, Squid

10. Improve Server Response Time

Google recommends reducing your server response time to under 200 milliseconds. The methods listed previously are all ways to improve your server response time. The last method we recommend is measuring server response time to identify bottlenecks and improvements that can be made. Bottom line, you should be measuring your server response time. If it’s not fast, invest in infrastructure. Having a good server – and paying a premium for it – is important. Ultimately, it might end up being cheaper overall than doing additional optimization work.

Tools we recommend: Google PageSpeed Insights, Webpage Test

Implementing these methods may take additional time and effort, but if executed properly, you will open more opportunities to increase your site’s visibility. Pairing your amazing content with best-in-class optimization can be a challenging task. But the potential rewards are worth the investment of time and effort.

Your-Guide-to-Website-Optimization
Chris-Grffin-Default-BW-e1528874538512_optimize.jpg

Chris Griffing

Full-Stack Developer

Chris is a well-rounded Full-Stack Developer proficient in a long list of languages, frameworks, and libraries, including Javascript, PHP, HTML5/CSS3, and Objective-C for web and mobile. He is also a certified iOS and MAC applications developer. Chris understands great UX and collaborates with clients to translate their vision into great code.