I am using:
- Firefox dev tools to check what exactly I am downloading and how fast,
- My brain to think 10 times before doing any actions
- And ignoring everything around me telling me what to do and how.
The key to optimization is starting small and using only what is needed - no more, no less
Optimization has 3 steps:
- Optimization of code itself
- Server
- Frontend
Optimization of code itself
- Never use any frameworks or libraries, start small, add abstraction when needed
- Time-to-time do refactoring of components
- Sometimes you need to review and refactor the whole architecture itself
Server optimization
- PHP7 which is ten times faster then PHP5
- MySQL 5.7 which is x3 faster then MySQL 5.6 and brings NoSQL and JSON support
- HTTPS, HTTP2, nginx, gzip
- Caching whenever really required
- Since PHP5 you can easily spawn multiple PHP processes from terminal like nodejs and you can use sockets in PHP, there is no need of nodejs, however, in some cases it is good to combine technologies together
Frontend optimization
- For CSS - I am using my own architecture based on Bootstrap 4 SASS, BEM and ITCSS. I have a huge
app.scss with a lot of small imports, I have full control of what I need and I am including only the styles really used, the architecture of CSS itself also helps to re-use a lot of styles
- For HTML - avoid extra semantics, tags and child elements whenever possible, If you can just do
<gallery> <img> <img> ... </gallery> then do it without any wrappers. I am also minifiying HTML into 1 line without tabs, extra spaces on the server
- For JS - I am using vanilla JS, bundling it with Rollup.js like SASS into one
app.js
- For all icons I am using custom SVG sprite system, all used icons on page are inlined into HTML, in some cases you can give user away one more file to donwload - spites.svg
- Everything is minified, gzipped, only 1 one small CSS file and only 1 small JS file
- Client-side caching when needed using localStorage or IndexedDB
- My index page has it's own index.js and index.css and in some cases inlined styles, scripts to get the maximum first page load speed.
- Images are smaller and only in dimensions really needed. I'm still fighting this part myself since I usually have a lot of big images to be loaded
And last the most important one - whenever possible just compile a static html file
There is no magic in optimization - just think, DRY and stop following what is cool, popular, and don't let anyone tell you what to do.
In my current project load time is x3 faster then apple.com and x5 faster then Angular2 docs. My CSS and JS is x5-x20 times smaller then avarage app I see today.