Step-by-step guide for webmasters

Website optimization

/ Website optimization

Website Optimization

On this web page you will learn how to optimize a website for better performance and a higher search engine ranking. Optimization will help you create a highly competitive website that will out-perform competitors on every measure.

What is website optimization?

Website optimization is a phrase that describes the process of tweaking a website to perform better and rank higher in search engines

Website optimization consists of the following steps:

  • Technical optimization
  • Relevance optimization
  • Domain authority

Technical optimization

This involves procedures to optimize the speed at which your website will load in web browsers. Optimization includes .htaccess file modification, compression, resources minification, CSS delivery optimization, render-blocking JavaScript removal, etc. We will use Google PageSpeed Tool to measure the website optimization level. In general, the PageSpeed Score ranges from 0 to 100 points. A higher score is better, but I advise that you do not seek the maximum 100 points. Anything above 90 points is excellent, as the process is not linear and sometimes involves overlapping of many factors.

See also: About PageSpeed Insights

To get your initial PageSpeed Score please go to Google`s PageSpeed Insights test and input the full URL of your website, as in the example below:

Pagespeed score

Your initial score will probably be somewhere between 45 – 65 points, but do not worry. We will optimize the website to score more than 90.

To get better scoring, please follow these steps:

1. Compression

Gzip compression is supported by all modern browsers and can reduce the size of transferred data by up to 90%. I assume that your hosting provider is using an Apache server to handle HTTP/HTTPS requests. Please refer to the support documentation of your hosting provider and ask if the Apache server is properly configured to use the mod_deflate module. Usually, by default, it is so. To set up gzip compression you need to edit the .htaccess file in the htdocs root folder. Before you start editing the .htaccess file, please download and backup the original .htaccess file.

Open the .htaccess file and insert the following rows in the beginning of the file (do not forget to save the file after modification):

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Use the Gzip compression test to check if compression is working properly.

2. Optimize images

Images usually account for many bytes on your website. Use the .png file format for small pictures and .jpg for large images.

Install WP Smush (Smush Image Compression and Optimization by WPMU DEV) plugin for your WordPress website and optimize all images. Please read here about how to install plugins for a WordPress. Use free online services like http://optimizilla.com/ to optimize images manually.

3. Avoid landing page redirects

Use responsive web design to render pages for different devices and do not redirect from the given URL to the final page (example: redirects mydomain.com -> www.mydomain.com -> mobile.mydomain.com – will result in bad user experience).

4. Leverage Browser Caching

The resources of your website should have defined Cache-Control. This will reduce the number of roundtrips between the client and server. Open the .htaccess file and insert the following rows in the file (do not forget to save the file after modification):

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##

# 1 Month for most static assets
<filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>

5. Minify HTML, CSS and JavaScript

Minification involves the process of removing unnecessary data from the code. Install and configure the W3 Total Cache WordPress plugin to minify scripts and remove render-blocking JavaScript. This plugin also uses advanced caching features.

To set up the plugin, log in to WordPress “Admin Area” and go to General Settings:

total cache plugin

Page Cache: Enable (Page Cache Method – Disk Enhanced)
Minify: Enable (Mode – Auto, Minify Cache Method – Disk)
Database Cache – Enable (Database cache method – Disk)
Object Cache – Enable (Object Cache Method – Disk)
Browser Cache – Enable
Fragment Cache – Disk
Performance -> Minify -> JS minify settings -> Enable (Before -> non-blocking user “defer”, After-> non-blocking user “defer”)
Performance -> Minify -> HTML & XML -> Enable
Performance -> Minify -> CSS -> Enable

6. Set up critical above-the-fold CSS code (optional)

Above-the-fold is the part of a website that is visible in a web browser when the page first loads

When the web page loads, it needs only part of a full CSS code to render above-the-fold content. How to find the critical above-the-fold CSS? I use Critical Path CSS Generator for this purpose. By using this generator, you can generate in easy 1-2-3 steps critical above-the-fold CSS. Firstly, input the full URL (with http://) of your website to the input box. Secondly, copy the full CSS to the text box. Finally, click on “Create Critical Path CSS”.

Where to get full CSS? After CSS minification with the W3 Total Cache plugin, Google`s PageSpeed Insights test will give you a link to the CSS file with full CSS code (under section:Eliminate render-blocking JavaScript and CSS in above-the-fold content).

Install Autoptimize WordPress plugin and go to Admin Panel -> Settings -> Autoptimize. Click on “Show advanced settings” and check only CSS Options -> “Optimize CSS code?” and “Inline and Defer CSS?”. Paste previously generated above-the-fold CSS code to the text box near the “Inline and Defer CSS?” line.

Autoptimize CSS

Relevance optimization

This process includes web page content optimization – making your web page more relevant to certain search requests from users of search engines. The relevance of a web page`s keywords to a search request is one of the factors affecting the position of a web page in search results.

To achieve good results you will need to optimize:the web page title, meta description, URL, H1 heading, first paragraph and main text.

Title

The title is the heading of your webpage that appears on the browser tab. Most search engines will also show the title as a text-link that appears in search results. Please choose Page/Post-> Edit in WordPress to edit a webpage`s title. In our example,the title is “Website optimization”.

Edit title

A few points to remember when you choose titles for your pages:

1. Titles should be around 70 characters maximum
2. Important keywords need to be embedded first in the title
3. If your website or company name is not a keyword in itself, leave it out or make sure it is near the end of the title

Meta description

The meta description should be a sentence to a paragraph in length and describe the page contents. It tells search engines what your page or site is about.

I usually use Yoast SEO plugin for WordPress to change meta description text and check SEO quality.

Yoats SEO, how to check title and meta description

URL

An URL, or Uniform Resource Locator, is essentially the web address visitorstype in to get to your website.

Some basic rules to stick to when naming pages:

1. Make the page name identify with the content or topic of the page
2. Humanize page names – make the page content immediately obvious without having to visit
3. Hyphens should be used if word separation is required (not underscores, spaces or any other character)
4. Overusing hyphens can have the reverse effect. Limit page names to 3-5 words maximum

H1 heading, first paragraph and main text

The focus keywords should naturally appear in the H1 heading, first paragraph and main text. The keyword density should be between 2-5%.

Domain authority

Generally speaking, domain authority is a metric of how authoritative your website is. Powerful websites get traffic from social media networks and search engines and, as a result, those websites become popular resources. You should constantly increase your site`s domain authority.

To learn more about gaining domain authority please visit http://www.makeawebsite.info/ (section: How to increase domain authority?)

Back to Top