10 Optimization Tips for Beginners

Optimization Tips for Beginners

Google has been using site speed in search ranking algorithms used to populate search results for more than 7 years now. This refers to the time a visitor has to wait for your page to be completely loaded and displayed. Page Speed Optimization has become more important over time, as shown by massive studies of data. Also, improved Page Speed brings higher rankings in regards to your Search Engine Optimization and Keyword SERP.

According to studies by Kissmetrics and Akamai:

47% of visitors expect a website to load in less than 2 seconds.
40% of visitors will leave the website if the loading process takes more than 3 seconds.
52% of online shoppers say quick page loads are important for their loyalty to a site.
A 1-second delay in page load time can also bring 11% fewer page views, 16% decrease in customer satisfaction, and 7% loss in conversions!

How about some proof data from large corporations?

Walmart and Amazon increased revenue by 1% for every 100 millisecond reduction in load time.
Walmart found a 2% increase in conversions for every 1 second of improvement.
Yahoo increased traffic by 9% for every 400 milliseconds of improvement.
Mozilla got 60 million more Firefox downloads per year by reducing load time by 2.2 seconds.

Page Speed Optimization for Beginners

Now you have the tools to see where you can make improvements to your own Page Speed Optimization.

1. Minimize HTTP Requests

According to a study from Yahoo, 80% of the load time for a web page is spent downloading the various parts of the page: images, style sheets, scripts, Flash, and more. An HTTP request has to be made for each one of these elements to be loaded. The more requests your page has to make, will ultimately increase the overall loading time.

The simplest of tricks to reduce HTTP requests are as follows:

Using CSS instead of images whenever possible.
Combining multiple style sheets into as few as possible.
Reduce overall script size and load them at the bottom of the page.

Pro Tip: Start a campaign to reduce the number of components on each page. By doing this, you reduce the number of HTTP requests needed to make the page render—and you’ll significantly improve site performance.

2. Reduce server response time

The target for your server response time should be less than 200 milliseconds. This is difficult to achieve, but by reading this article you are well on your way!

Google recommends using a web application monitoring solution and checking for bottlenecks in performance.

Then tap into these resources:

Google’s PageSpeed Tools – analyzes the content of a web page, then generates suggestions to make that page faster
GTmetrix – more insights and actionable recommendations for improvement

3. Enable compression

High-quality content pages usually weigh 100kb and more, which results in slower loading speeds. The easiest way to optimize these pages is using compression to zip the files.

This technique reduces the bandwidth of your web pages, and in turn reduces HTTP responses. The easiest compression tool is Gzip.

A majority of current web servers have the ability to compress files in Gzip format before sending them to visitors. There are third-party modules as well as built-in routines available. According to Yahoo, this can reduce download time by about 70%.

And since 90% of today’s Internet traffic travels through browsers that support Gzip, it’s a great option for speeding up your site.

Pro Tip: Read this article for more details on Gzip compression. Then set up your server to enable compression:

4. Enable browser caching

When you visit a website, the elements on the page you visit are stored on your hard drive in a cache (temporary storage) so that the next time you visit the website your browser can load the page without having to send another HTTP request for content.

Tenni Theurer, formerly of Yahoo, explains it as…

The first time someone comes to your website, they have to download the HTML document, style sheets, JavaScript files and images before being able to use your page. That may be as many as 30 components and 2.4 seconds.

Once the page has been loaded and the different components stored in the user’s cache, only a few components needs to be downloaded for subsequent visits.

In Theurer’s test, that was just three components and .9 seconds, which shaved nearly 2 seconds off the load time.

Theurer says that 40-60% of daily visitors to your site come in with an empty cache, so it’s critical that you make your page fast for these first-time visitors. But you also need to enable caching to shave time off subsequent visits.

Pro Tip: Read this article to learn four methods for enabling caching.

Static resources should have a cache lifetime of at least a week. For third-party resources like ads or widgets, they should have a cache lifetime of at least one day.

For all cache-able resources (JavaScript and CSS files, image files, media files, PDFs, etc.), set the Expires to a minimum of one week, and preferably up to one year in the future. Don’t set it to more than one year in the future because that violates the RFC guidelines.

5. Minify Resources

WYSIWYG resources make it easy to build a Web page, but they sometimes create messy code—and that can slow your website considerably.

Since every unnecessary piece of code adds to the size of your page, it’s important that you eliminate extra spaces, line breaks, and indentation in your code so your pages are as lean as possible.

It also helps to minify your code. Here are Google’s recommendations:

To minify HTML, try HTMLMinifier
To minify CSS, try CSSNano and csso.
To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.

“Alternatively, the Page Speed Module, integrates with an Apache or Nginx web server to automatically optimize your site, including resource minification.”

6. Optimize images

The main things about image optimization comes from the image format, and the image size.

Image format

There are a large number of image formats out there, but we want to focus on only using JPEG, PNG, or GIF. Never use BMP or TIFF on your web page, they are nowhere near efficient enough for optimization.

JPEG is your best option for most cases. They can provide detailed and beautiful images with the smallest file size.
PNG is also a good choice, though it should be used for simple graphics, logos, icons, and not much else. They can be a smaller size than JPEG, at the cost of quality.
GIFs should only be used for thumbnails and decorative images, there is no easy way to reduce the file size of a GIF.

Image size

Oversized images take longer to load, so it’s important that you keep your images as small as possible. Use image editing tools to:

Crop your images to your intended maximum size. If your page width is 912px, your image doesn’t need to be any larger than that. The larger the image, the more time will be added to loading the full web page.
Reduce image color depth to the lowest level possible, without losing too much image quality.
Remove all image comments.
Compress images online: Optimizilla can further compress images to help reduce overall file size and increase load times!

Pro Tip: To ensure your images are optimized for the fastest loading, consider using the WP Smush.it plugin with your WordPress website.

7. Optimize CSS Delivery

CSS holds the style requirements for your page. Generally, your website accesses this information in one of two ways: in an external file, which loads before your page renders, and inline which is inserted in the HTML document itself.

The external CSS is loaded in the head of your HTML with code that looks something like this:

Inline CSS is nested in your page’s HTML and looks like this:

In general, an external style sheet is preferable, because it reduces the size of your code and creates fewer code duplication’s.

Pro Tip: When setting up your styles, only use one external CSS stylesheet since additional stylesheets increase HTTP requests. Here are a two resources that can help:

CSS Delivery Tool – Tells you how many external stylesheets your website is using.
Instructions for combining external CSS files.

8. Prioritize above-the-fold content

Having just recommended that you use only one CSS stylesheet and no inline CSS, there is one caveat you need to consider. You can improve user experience by having your above-the-fold (top of the page) load faster—even if the rest of the page takes a few seconds to load.

Pro Tip: Consider splitting your CSS into two parts: a short inline part that styles above-the-fold elements, and an external part that can be deferred.

9. Reduce the number of plugins you use on your site

Too many plugins slow your site, create security issues, and often cause crashes and other technical difficulties.

Pro Tip: Deactivate and delete any unnecessary plugins. Then weed out any plugins that slow your site speed.

Try selectively disabling plugins, then measuring server performance. This way you can identify any plugins that harm your site speed.

10. Reduce redirects

Redirects create additional HTTP requests and increase load time. So you want to keep them to a minimum.

If you’ve created a responsive website, more than likely, you have redirects in place to take mobile users from your main website to the responsive version.

Pro Tip: Google recommends these two actions to make sure a responsive redirect doesn’t slow your site:

Use a HTTP redirect to send users with mobile user agents directly to the mobile equivalent URL without any intermediate redirects, and
Include the <link rel=”alternate”> markup in your desktop pages to identify the mobile equivalent URL so Googlebot can discover your mobile pages.

In conclusion

While these tasks, and many more, are available as web solutions if you’ll just contact me, anyone can do page speed optimization. As a beginner, it may take more time to accomplish and see results. But, with repetition and understanding of how and why, even you can become a pro.

Let me know what you think about this guide in the comments below. Also, if you have any ideas for a blog, I’m all ears… Err… Eyes I suppose?

Thank you.