18 Website Optimization Tips

Fast page loading is very important for improving search engine rankings, website conversion rates and overall user experience. The loading speed of website pages is also an important factor in measuring website performance.

If your website isn’t running at peak performance, sluggish loading will cost you more in low rankings and search traffic. The loading speed of a page can have a big impact on user behavior and conversion rates.

So? What are some simple ways to optimize loading speed?

　1. Image Optimization

　 First, you need to optimize the images on your website to get the slightest chance of speeding up the website. Remove extra annotations, unnecessary space and useless colors from the original image and save the image in JPEG format, as it ensures high quality even though it takes up less space.

　For WordPress websites, it is recommended to use the smush.it plug-in to automatically optimize the images of the website. If the image is in PNG format, you can use tinypng to optimize the image and improve image quality.

　2. Turn on GZip compression

GZip compression sounds complicated, but it is actually very simple. It is used to reduce the size of HTTP requests to shorten response times. Because this allows you to send GZip compressed files to the browser instead of HTML files, it will shorten page wait times and load times. For the Apache server, you can add the following code to the .htaccess file to enable GZip compression.

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

If the above code does not enable GZip compression, delete it and use the following code:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

Or add the following PHP code at the top of the HTML/PHP file:

<?php if (substr_count($_SERVER[&#39;HTTP_ACCEPT_ENCODING&#39;], &#39;gzip&#39;)) ob_start("ob_gzhandler"); else ob_start(); ?>

3. Server response time

Even if the website has Extremely optimized, but unless the server response time is very fast, it won't have much effect. When it comes to improving website speed, server response time plays an important role. Here are some suggestions for improving server response time.

Have dedicated servers instead of opting for shared/hosted servers.

Improve the quality of your web server.

Remove unnecessary plug-ins. Only those plug-ins that are necessary need to be kept enabled at all times.

　4. Browser cache

　Browsers have a cache function that can store specified files and reduce HTTP requests, thus improving the loading speed of the website. You can enable browser caching by setting the expires header in the .htaccess file. You can use the following code to achieve this:

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

Note: If the expiration time is linked to the file and the content in the file needs to be changed at this time, you must first Rename the file so the browser can pick up the newly added code.

　5. Turn on long connections (Keep-Alive)

　The Keep-Alive header is very important to shorten the latency of distributed requests between the browser and the server. When a user requests a web page through a browser, the browser will read a specific HTML file sent by the server. If the requested page contains external CSS and JavaScript files, the browser will send a separate request again to obtain these files. As you can imagine, this increases page load time.

Using the Keep-Alive header, the connection can be maintained until the browser obtains all resources related to this page from the server. Add the following code to the .htaccess file to enable this feature:

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

　6. Use CDN

　　

内容分发网络（CDN）是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时，就可以直接从就近的网站服务器获取相应资源（也可以是从负载最小的服务器）。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。

　内容分发网络（CDN）是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时，就可以直接从就近的网站服务器获取相应资源（也可以是从负载最小的服务器）。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。

　　7、压缩CSS、JavaScript和HTML文件

　　通过删除所有不必要的空格和注释，从而减小文件大小，提高页面的加载速度。下面是一些优化CSS、JavaScript和HTML文件的流行工具，非常有用。

CSS Minifier

Avivo

HTML Compressor

　　8、避免重定向

　　重定向是对网站访问者的一种极大的刺激。就类似你去一个朋友家，却发现你朋友早已经搬到三个街区远的地方了。重定向会消耗额外的时间，降低加载速度。

　　9、指定字符集

　　指定字符集是加速浏览器渲染页面的另一个有用的技巧。下面的代码就能轻松实现：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

10、避免错误请求

　

　当用户在网站上搜索时，收到404或410错误是比较失望的。错误请求会对网站的页面加载速度产生不利影响。因此，建议你无论如何都要避免错误请求。Check My Link 能帮你找出404链接，清除它们，改善用户体验。

　　11、丢弃跟踪代码、嵌入视频的元素和分享按钮

　　很多网站管理员认为使用多个跟踪代码提供嵌入和分享按钮会带给用户更好的体验，实际上这只会给网站增加更多的服务请求。例如，一个iframe会请求一个新页面，这会自动降低网站的加载速度。所以，丢弃这些跟踪代码，可以提高网站加载速度，提升用户体验。

　　12、异步脚本

　　还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本。在异步模式中，脚本是在后台下载的，不会影响浏览器对页面的渲染和加载。

<script async src="http://www.yoursite.com/script.js"></script>

13、样式表置顶，脚本置底

　　将样式表放在顶部有利于页面迅速加载，因为这样可以使得页面慢慢呈现。一般来说，在同一时间，大部分浏览器支持并行下载两个组件（图像、样式和脚本）。但是通常而言，脚本会在并行下载时会阻止其他的下载，直到脚本下载完毕。

　　14、JavaScript的延迟解析

　　为了加载网页，浏览器必须解析所有的标记内容，从而增加了网站的加载时间。通过延迟解析脚本，那么就可以减少初始网站的加载时间了。

　15. Avoid blocking JavaScript and CSS

　 Before the browser renders a web page, it first needs to build a DOM tree by parsing the HTML markup language. During this process, if a script is encountered, the process is aborted and the script is executed before continuing with the original activity. It is therefore recommended to avoid blocking JavaScript, especially external scripts.

　Blocking JavaScript can also cause website delays. So you might as well defer loading unimportant JavaScript, or load it asynchronously. Another option is to embed the HTML code into the website, making sure the CSS is optimized.

　16. Optimize code: Do not use inline CSS

　Inline styles cannot clearly separate the content from the design. At the same time, it may require a lot of maintenance work, causing various inconveniences to the website administrator, and further increasing the size of the web page.

　17. File separation

　 Website files can be divided into CSS, JavaScripts and images. File separation does not directly improve the loading time of the website. However, doing so can improve server stability, especially when there are sudden spikes in website traffic. Subdomains can also be used to host files, which increases the number of parallel downloads.

　18. Reduce HTTP requests as much as possible

　 Another simple way to optimize web page speed is to reduce HTTP requests. When a website receives too many HTTP requests at once, its visitors will experience delayed response times, which not only increases CPU usage but also increases page load times. So, how to reduce HTTP requests? See the steps below:

Reduce the number of objects on your website.

Minimize the number of redirects on your website.

Use CSS Sprites technology (only the part of the image content you need).

Merge JavaScripts and CSS files.

　　Reference article

　　12 Actionable Ways To Improve Page Speed

　　13+ Ways to Optimize Your Website’s Page Speed