Sorry, probably definitely my fault.

Please change

$("where_to_write").html(
  ...
);

to

$(where_to_write).html(
  ...
);

in the script code (both occurences). I should actually test my code before posting.

(I edited my post in this regard)
(now tested and working)

Oops, I just checked your website uralshpala.ru (In fact I should have checked earlier)

Unfortunately you aren't using Apache but nginx, so my .htaccess example will not work.
With nginx, cache control headers are set in the host configuration (via $sent_http_content_type and $expires map).
You will hopefully have settings for that in your webhost's control panel.

The good news is that gzip compression is enabled on your host.

No, the script doesn't have to be there.
We can change the content of any DOM node from anywhere.

I'd do it this way:

Open your template.php file (probably [typesetter installation root]/themes/Bootswatch_Scss/template.php)

paste this code at the very end of the file

<?php
  $page->jQueryCode .= '

    if( isadmin ){
      return; // don\'t manipulate page content when logged in, otherwise it might get saved.
    }

    CallAlistair = function(){

      var where_to_write = ".my_selector";

      var utc_time = Date.UTC();
      var auckland_time = utc_time + (3600000 * 13);
      var auckland_hours = new Date(auckland_time).getHours();
        if( auckland_hours > 8 && auckland_hours < 18 ){
          $(where_to_write).html(
            "Call Alistair on <a href=\'tel:+64123456789\'>+64 123 456 789</a>"
          );
        }else{
          $(where_to_write).html(
            "Dare not call Alistair right now! ;o)"
          );
        }
    };

    CallAlistair(); // immediate call
    setInterval(CallAlistair, 900000); // repeat every 15 minutes
  ';
?>

.my-selector is the selector identifying the DOM node where JS will write the message.

If you really want to change the browser <title> element (= the text of the current tab), the selector will actually be 'title'.
In this case you will have to omit the <a ...></a> tag, which is not possible in the <title> element

If you want to write, let's say, to a heading somewhere in the page content, edit the section and change CKEditor to Source mode.
Add <h2 class="call-me-message-area">&nbsp;</h2> where you want it.
Use '.call-me-message-area' as selector in the script.

Save template.php and log out of Typesetter (or use a 2nd private window) to see the result.

For compression:

Nowadays web servers should have either mod_gzip or mod_deflate installed. Ask your service provider if in doubt.

If server-side output compression is not available, Typesetter will compress html output using PHP, but it won't compress static assets.

Assuming your server is Apache:
For better caching append the following code to your .htaccess (and change the values as needed)
mod_expires must be available in order to make it work.
 

<IfModule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 0 seconds"

# Data
  ExpiresByType text/html                 "access plus 0 seconds"
  ExpiresByType text/x-php                "access plus 0 seconds"
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 12 month"

# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 6 month"
  ExpiresByType image/png                 "access plus 6 month"
  ExpiresByType image/jpeg                "access plus 6 month"
  ExpiresByType video/ogg                 "access plus 6 month"
  ExpiresByType audio/ogg                 "access plus 6 month"
  ExpiresByType video/mp4                 "access plus 6 month"
  ExpiresByType video/webm                "access plus 6 month"

# Webfonts
  ExpiresByType application/x-font-ttf    "access plus 12 month"
  ExpiresByType font/opentype             "access plus 12 month"
  ExpiresByType application/x-font-woff   "access plus 12 month"
  ExpiresByType application/x-font-woff2  "access plus 12 month"
  ExpiresByType image/svg+xml             "access plus 12 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 12 month"

# CSS and JavaScript
  ExpiresByType text/css                  "access plus 6 month"
  ExpiresByType application/javascript    "access plus 6 month"

</IfModule>

edit: With such sort of aggressive caching, mind to not forget to hard refresh the pages when you make changes to static assets.

Sure. There are lots of ways to do such things, too many tor a single answer.

So, the questions merely are

Which title?

A) the contents of the <title> HTML tag
B) your Website title as set in Configuration -> Settings -> Title, which will be part of the <title> tag and will be the site branding in most themes by default.
C) a page's internal variable $page->title, which will derive from a page's given name/label and be part of the URL
D) anything else qualifying as 'title', such as a certain heading in the content

Change dynamically …

E) where? (server-side or client-side)
F) based on which source
 

It's integrated in the core since …um… ages.

Depends on the theme, if you expose it to the visitor, e.g. see Bootswatch Flatly/Sticky Footer template, which has a search form in the main nav.

There is also a 'Search' gadget, you can add via Layout Editor or even use it as 'File Include' section anywhere in the content.

 the path for style.css and variables.scss is

Oh, yes of course. Thanks for the hint.
I'll edit my post...

Ok, here we go …
 

1. Open [your Typesetter installation root]/themes/Bootswatch_Scss/Flatly/style.scss and comment out lines 7 and 8

@import 'include/thirdparty/Bootstrap3/scss/_bootstrap.scss';

// Flatly 3.3.5
// Bootswatch
// -----------------------------------------------------

// $web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic" !default;
// @import url($web-font-path);

2. If you like to keep the Lato fonts but don't want it to load from a third party, you will need to host it yourself.

Easiest way to do this is to use my web font package plugin

• Download Lato2015.zip
• Upload the extracted folder 'Lato2015' from the ZIP archive to your server into the  [your Typesetter installation root]/addons directory
• Install using Typesetter's Admin Toolbox -> Plugins -> Manage -> Available -> Lato 2.015 LX Fonts

3. Since I do font-family definitions slightly different than Goggle, we need to change a Scss theme variable:

Open [your Typesetter installation root]/themes/Bootswatch_Scss/Flatly/variables.scss and change case in line 46 from 'L' to 'l'

//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

$font-family-sans-serif:  "lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif:       Georgia, "Times New Roman", Times, serif;

FYI: This self-hosted font package comes with Lato ver 2.015 as latin-extended character set including all weights and italics. Although Bootswatch Scss Flatly only needs the weights 400 (Regular) and 700 (Bold) dy default, you now have 'Lato Thin', 'Lato Light', 'Lato', 'Lato Bold' and 'Lato Black' available for inline formatting in CK Editor's 'Font' dropdown list. If you want to use e.g. Lato Light in your stylesheet, write font-family: lato-light; font-weight: normal;

If you're just fine without Lato and use the default sans-serif, omit step 2 and in step 3 remove "Lato", from the variable definition.