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 consists of the following steps:
- Technical optimization
- Relevance optimization
- Domain authority
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:
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:
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):
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/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/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 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
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):
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 application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
## EXPIRES CACHING ##
# 1 Month for most static assets
Header set Cache-Control “max-age=2592000, public”
To set up the plugin, log in to WordPress “Admin Area” and go to General Settings:
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)
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”.
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.
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.
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”.
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
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.
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%.
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?)