Geekly Articles each Day
📜 ⬆️ ⬇️

How I did the fastest site in Thailand

image


Foreword


I was inspired to do this project and write this article, "a young and humorous person who accelerated the page with reactjs ". If someone remembers an article from pingdom.com that was sensational in its time, that “ Pages on the Internet were well overgrown with fat ”, their conclusion was added to the fact that earlier, to the weight of the page, they mostly added images, now to this “fat” and javascript. The page of the playful young man does not give a special practical use - more warm-up for his brain. I decided to help my girlfriend with the sale of the most popular product from her product range.



I have already tried to do extremely minimal sites . Such projects were caused by the desire to go beyond frameworks and it is possible to complete the project faster. This approach is quite popular among my friends - the popularity of KISS (Keep It Simple, Stupid) is paying off. Being basically a backend programmer, I spend a lot of time with optimizing the code on the server side. In practice, I understood how important it is not to make such changes blindly, but to support them with a metric.


Training


Front-End Framework


I am not a front-end programmer, I have to rely on front-end frameworks. Most often this means bootstrap with all "his good". And although bootstrap components can be used selectively, it still means that I will bring jQuery with me. I have already seen enough native-javascript libraries that work without jQuery. The size of the bootstrap and its component did not suit me either, it always seemed to me that it was “styling” a little more than necessary.


Therefore, a little googling a bit, I found frameworks that position themselves as minimalist. Here is a sample list of what I considered.



I chose the base framework. Most of the reasons are deep personal:


  1. I already worked with an earlier version.
  2. It seemed to me that I did not need javascript components, and if I needed them, I would like to select them myself. Base is a pure css framework.
  3. Uses gulp as a build tool. About which I heard a lot of good, some craftsmen even tried to integrate it into the rail (with which I often deal).
  4. I found a template from the author of the framework that was suitable for my purpose. To be honest, I didn’t want to bother much with the layout, the purpose of this project was different. Therefore, I gladly gave a few dollars to the author for this.

Therefore, I will not recommend only Base, but issued a list. But I have to make a reservation that you can start even more minimalistly, only with the grid system - sussy grid, for example.


Hosting


I was not going to make dynamic content. And although it would seem logical to make a form for a purchase, most Thai shops that I have seen have avoided this. The form for the purchase is further complicated by the fact that they would have to be integrated with the banks, and in Thailand there are no clear leaders in the banking sector. There are more than 10 of them and all of them are more or less in demand, even among my friends of foreigners / Thais, the choice of bank is extremely different. A lot of purchases are made directly through the Internet banks and the instant messenger line. Therefore, I decided not to break the usual patterns, especially since it extremely simplifies my task.


I need hosting only for static content. The most popular choice here is github pages and AWS. I was afraid to use github pages because of traffic restrictions , and AWS seemed to me not the cheapest solution (according to my extremely rough estimates, about 4 bucks a month). I already had three sites that revolve on nearlyfreespeech.net - and ten bucks were enough for them to work for more than a year. Cheaper is not always better, but in this case I already had the experience and I have no complaints.


image


Important amendment

_ In the comments, I noted that my geographical choice of server is not the most reasonable for the Thai site. Just as light as apache, it still creates a new thread for each connection .


Metrics


I initially agreed with myself that I would not rely on my own "feelings." And I will rely on socially recognized tools.


gtmetrix.com - I chose as the main tool to measure the "speed" of my site. It included the two most popular tools google page speed and yslow. It turned out that the original page speed still found a little more errors. This led me to the conclusion that relying on a 100 percent indicator in gtmetrix and similar tools is probably not the best idea, this is a scripted check for the "most popular" errors. You can always go further.


To measure how quickly the site will open under load, I was not going to. Therefore, I ignored possible performance problems with Apache. But you may need to think.


Optimization


Gzip


The simplest optimization that could be done is to provide static files in gzip format. I did this in all projects in which I worked before. Therefore, I quickly sketched a task in gulpfile.js to automate the process of creating .gz files.


var gzip = require('gulp-gzip'); gulp.task('gzip', function (){ return gulp.src('./public//**/*.+(js|css|html)') .pipe(gzip()) .pipe(gulp.dest('./public/')) });

And just as quickly sketched. Htaccess file, which slides the archived file browser.


  Header add Vary accept-encoding RewriteEngine on RewriteCond %{HTTP:Accept-Encoding} gzip RewriteCond %{REQUEST_FILENAME}.gz -f RewriteRule ^(.*)$ $1.gz [L]

I also had to copy this file to the build daddy, without any special changes. This turned out to be even simpler:


  gulp.task('htaccess', function () { return gulp.src('./src/**/.htaccess') .pipe(gulp.dest('./public/')); });

Also, I had to update and build task


  gulp.task('build', function() { runSequence('clean', 'sass', 'build-img', 'jsmin', 'inlinesource', 'htaccess', 'gzip'); });

Wash it is the easiest way to optimize the page, only the lazy does not do it in their projects. In many modern engines, this is all brought to a trivial state - add a plugin or enable the option.


Caching


The task of specifying caching headers was less trivial. With AWS, these are already automated. I tried to remember when I did this last time, but did not remember when. Therefore, with the help of Google’s magic power, a couple of attempts, I still did something 100% acceptable to gtmetrix.


  <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 text/javascript "access plus 2 month" ExpiresByType application/javascript "access plus 2 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/icon "access plus 1 year" ExpiresByType application/ico "access plus 12 month" ExpiresDefault "access plus 2 days" </IfModule>

But to avoid two attempts, I would recommend using the template for the server from the html5-boilerplate project . I will definitely do it next time :)


Images


For a person who does not have Photoshop on a computer - working with images is a big popabol. Half of the problems with images were decided for me due to the fact that I chose the ready template - I did not have to mess with sprites and vectors. But this did not solve all my problems - I needed other icons and other images.


Choosing the right format for images


I made the worst mistake of those mistakes that can be made. I chose .png as the default format for images, I had the idea that png is optimized for the web. In fact, for images saturated with colors (like photos) - jpeg still remains the best format, I left png for icons.


More literacy on this topic can be found on Google pages (from people who understand this more than me).


Lossless compression


As a person with an engineering background, I know the price of specialized tools. They very often facilitate the work of more than one-fits-all tool. You can program on notepad, but more often it becomes our main working tool - sublime text, rubymine. In this case, imageoptim is good, but not good enough. Since I had a lot of jpeg files, I found a comparative analysis of the lossless compression - I won jpegtran .


in gulp it turned out to be very simple:


 var jpegtran = require('imagemin-jpegtran'); gulp.task('build-jpg', function () { gulp.src('./src/img/*.+(jpg|jpeg)') .pipe(jpegtran({ progressive: true })()) .pipe(gulp.dest('./public/img')); });

We are playing with the optimization of colors in jpeg


But the choice of just the right format is not over. Images were still too big. My hero background was more than half a megabyte.


image

I don’t have photoshop, but I don’t really understand what to do without it. But friends helped and advised a great project TinyJpg - everything turned out to be too simple.


CSS


I still decided to zainlaynit css. This is a bit counterintuitive, people advise keeping it all in a separate file so that styles can be cached. There is even a possibility that the user has already cached all this, especially if you use the popular framework.


I'd rather do it if I used bootstrap. But since I used a less common base and didn’t really expect that users would return to my site, I decided to remove the extra http request.


In gulp it turned out to be the easiest way as usual:


 <link rel="stylesheet" href="css/styles.css" inline>

Fonts


An interesting and unexpected situation for me was with Google Fonts, the template used two different fonts. And it seems even reasonably optimized:


  1. They loaded in one http request
  2. Used WebFontLoader which asynchronously loaded fonts and rendered the page after loading.

But gtmetrix continued to swear at fonts - they didn't have cache headers. I decided to follow the path already suggested in the article to which I referred at the beginning and got rid of google fonts. All devices have quite decent built-in fonts. Therefore, I left here such a set:


 font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;

Server geolocation


While in Thailand, I sketched a quick script for checking speed from Thailand:


 require "uri" SERVERS = [ { :name => "nearlyfreespeach", :url => "http://euphorbia.soihok.com/" }, { :name => "AWS servers", :url => "https://d4s21h4msr5q2.cloudfront.net/" } ] SERVERS.each do |server| uri = URI.parse(server[:url]) puts "Performing HTTP speed test for #{server[:name]}" puts `wget -O /dev/null #{server[:url]} 2>&1 | awk '/\\/dev\\/null/ {speed=\$3 \$4} END {gsub(/\\(|\\)/,"",speed); print speed}'` end

And I got the following results:


 $ rspec speed_test.rb Performing HTTP speed test for nearlyfreespeach 85.1KB/s Performing HTTP speed test for AWS servers 203KB/s Performing HTTP speed test for nearlyfreespeach 92.5KB/s Performing HTTP speed test for AWS servers 192KB/s $ rspec speed_test.rb Performing HTTP speed test for nearlyfreespeach 83.2KB/s Performing HTTP speed test for AWS servers 168KB/s

So do not make my mistakes. Choose hosters with servers close to your target audience. Sites will open at least twice as fast!


findings


Here is such a website - http://euphorbia.soihok.com/
But the latest metrics with gtmetrix - https://gtmetrix.com/reports/euphorbia.soihok.com/zhMn6OhU


According to many SEOs, the fast site gives bonuses in Google. I honestly hoped for it, but did not check. Therefore, here I can’t be covered with metrics.


I often travel and periodically have to work with an extremely dubious connection - be it a mobile connection, hotels, or simply not developed Internet somewhere in Asia. And I am very upset that there are no mobile versions of the sites that the sites even for desktops are not optimized.


I focused a lot on doing a quick backend that doesn't need a lot of resources. But I never focused much on the front end, if only because I thought that it was not possible to have 100% indicators. But it turned out, though not easy, but possible. Moreover, it is possible to go further and accelerate more than the "required minimum". All these principles and experience in building fast pages are universal and subsequent sites will speed up much easier and faster! About this you just need to start thinking, somewhere in the subconscious! And your users will thank you and will return.


I wish fast sites to all of us!


* "The fastest site in Thailand" - this is my "screaming" title, I do not presume to say this with 100% certainty. But most of the sites that I saw in Thailand are not the fastest.


')

Source: https://habr.com/ru/post/319542/

More articles:


All Articles