How to serve faster page loads? SEO optimization tips

The bad habit is to worry about serving faster page loads (SEO optimization) once the site comes into production. It’s good but a bit late. How to catch up? The explanations for your website to load quickly.

To speed up your page loading, here are some performance tips to consider:

  1. Are my images weight optimized ?
  2. The heavy hand on CSS and Scripts ?
  3. Server: configure cache directives, compression, expiration
  4. Your site is obviously HTTPS: enable HTTP/2

Images weight optimization

Images play a decisive aspect and probably represent the biggest role in page loading time. Today, the younger generation has always experienced broadband, wifi and 3G/4G. Some designers/integrators do not have this issue of SEO performance in mind when exporting cuts and photos. The weight of images has always been the spearhead of Optimization. It is therefore essential to optimize each graphic element using the correct formats (JPG, GIF, PNG, SVG) and the appropriate sizes (a square image of 800px can not be reduced with a width=”400px”). This image comes out of the studio with a weight of close to 1MB and is found on the production server…

A simple control is quick to use your browser’s console at the Network tab. Check the cache check box , view list , select img . Sort the Weight column, so you have all the heavy footage of the site.

Images weight optimization for faster loading
Images weight optimization for faster loading

Make images load faster

  1. Upstream, sensitize designers and integrators to the optimization of exported cutouts.
  2. There are online image optimizers to check and optimize the weight of images while keeping the weight/quality ratio. Optimizilla or Compressor (among others) are two Interesting online solutions with fine optimization and batch processing.
  3. Configure Google Pagespeed (mod_pagespeed) on your server Apache or Nginx . It allows to automatically optimize images (compression and size), to activate the lazy-loading on the images, and many other points that we will see later.
  4. Does your website have strong international constraints? And will allow proximity distribution to your visitors. Today more or less expensive paying solutions allow you to host your media but also optimize them on the fly. The CDN Cloudflare is interesting and less expensive than the CDN CloudFront from Amazon.

CSS & JS faster to load

Most websites (and e-commerce) are realized with a CMS, so you benefit from native (or plugin) performance features of compression , concatenation and minification of CSS/JS.

An average site has about ten JS and CSS files (on the server and in external calls). The first step is to enable concatenation so that internal files are grouped into a single JS file + a CSS file. Instead of having 10 calls you now have more than two! Allow the minification of CSS and Javascript (they now become illegible).

/* CSS combined and minified */
<link type="text/css" media="all" href="http://www.kiwii.ch/wp-content/cache/autoptimize/css/autoptimize_8b558e263e21e7299c923571ce3fabd2.css" rel="stylesheet"/><title>

Now, some JS files can be run asynchronously or delayed with the async or defer attributes of the JavaScript tag. The purpose of these two attributes is to load and run the JS code interpretation without blocking the HTML rendering of the page. The loading time of the page is therefore no longer hampered by the expectation of a slow script (waterfall loading). However, you should avoid setting the async attribute to the Jquery script 🙂

/* end of page, defer attribute. JS combined and minified */
<script type="text/javascript" defer src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js?ver=0.6.2"></script>
<script type="text/javascript" defer src="http://www.kiwii.ch/wp-content/cache/autoptimize/js/autoptimize_79a59faa4178ff4266f97b047d80b410.js.pagespeed.jm.nekyb5rveb.js"></script>

Configuring server fast load performances

You must have a dedicated server or access the performance configurations (.htaccess for Apache and some of the activated modules below) or directives for Nginx. List non-exhaustive but corresponding to my expectations in order of priorities:

GZIP compression via Nginx

The server will compress the data (HTML, CSS, JS, …) sometimes up to about 80% of their weight! The data then passes compressed on the network and are finally decompressed on the fly in the browser. Nginx Directives:

gzip            on;
gzip_min_length 1000;
gzip_proxied    any;
gzip_types      gzip_types text/plain text/css text/xml text/javascript application/json application/x-javascript application/xml application/xml+rss application/javascript; 
gzip_vary on;

Caching (Cache-control, Expires, ETag)

Caching is used to reduce bandwidth consumption, the load of the web server (the tasks it performs) and ultimately drastically improve the speed of display on your browser. The most important:

  • Cache-control
  • Expires
  • ETag

Examples of header for a CSS file:

cache-control:max-age=30672000, public, immutable, s-maxage=10
content-encoding:gzip
content-length:41542
content-type:text/css
date:Tue, 25 Jul 2017 17:59:32 GMT
etag:"26c28-55516c4cde35e"
expires:Sun, 15 Jul 2018 17:22:44 GMT
last-modified:Mon, 24 Jul 2017 21:19:23 GMT

For Nginx here is configuration with 1 year validity:

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    add_header Cache-Control "public, no-transform";
    etag on;
}

Finally, the reduction of the TTFB is also very important, it should be <200ms. Be sure to enable KeepAlive (in Apache) or through Nginx directives:

keepalive_timeout 30;
keepalive_requests 100000;

HTTPS: enable HTTP/2 for improving browser load times

This is the major version of HTTP (Hypertext Transmission) in version 2! You can check if your site supports it .

Reduction of latency improving browser load times through (among other things): HTTP header data compression, HTTP/2 push mechanism allowing the server to send the necessary data to the client but Has not yet solicited, pipelining queries, multiplexing multiple queries through a single TCP connection!

Leave a Reply

Your email address will not be published. Required fields are marked *