the MMM blog

Web Page Speed Best Practices

Web Page Speed Best Practices


Web page speed is one of the elements used by Google ranking algorithm. Google crawler would crawl fewer page for site which page speed is slower, this could negatively affect your indexation. Apart from search engine, web page speed is also very critical to user experience. Research has shown that longer page load time have higher bounce rates and lower average time on page. It would eventually negatively affect your site's conversions.

For testing your web page speed, you can use one of the best free web page test tools in the market. The following are the checklist for developing a fast web page.

Optimize images

Images are always one of the most important element for page speed but very hard to maintain the standard, because in most cases, they are uploaded by users or customers who don't have much knowledge about web page speed.

The general rules are:

  • Use CSS as much as possible. You would be surprised how much CSS can do to replace images, espically for buttons, background colors, or shapes.
  • Save the image in the right format. PNG is better for graphics with fewer than 16 colors or transparent background. JPEG is better for photo.
  • Resize the image to as small as possible. For example, if your page width would never bigger than 1240px, your image width should never bigger than 1240px.
  • Use tools to compress images. Personal preference https://tinyjpg.com/ and https://tinypng.com/

Enable compression

If you are using IIS, you can simply enable compression by click "Features View", then double-click "Compression". You can choose to either compress static files only or compress both static files and dynamic application responses.

If you are using Linux based server, YUI Compressor tool is where you should start. Note: you need Java installed for using YUI Compressor.

Example command line (x.y.z represents the version number):

$ java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js

Minify CSS, JavaScript, and HTML

Page speed can be increased by optimising your HTML code. For production server, unnecessary codes, spaces, characters and comments should always be excluded. The same as CSS and JavaScript files, developers can use YUI Compressor tool to compress them CSS and JavaScript files.

Leverage browser caching

Browser caching stores web page resource files on a local computer when a user visits a web page. For a returning visitor, it is unnescessary to reload the entire page again if they could load most of files locally. So, enable caching and set an expiration date for your cache to allow visitors save resource files locally can dramatically increase page speed.

For IIS web.confg:

<system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" /> <!-- cache 7 days -->
    </staticContent>
</system.webServer>

For .htaccess

## 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 ##

Use a content distribution network (CDN)

Content distribution/delivery networks (CDNs) are networks of servers that are used to distribute the load of delivering content. Basically, your website files are copied to multiple server located at multiple geolocations. It allows visitor to download web site resources from a closer server which reduce latency of downloading content. However, most CDNs are paid services and costs are various. So choose wisely.

 

"What we think, we become"

Contact me!

Have questions? Feel free to use the form or send me an email with any questions.

I will be responsive to your requests and your questions.