This document outlines goals, roles, and checklists for developing a WordPress website with a focus on security, performance, and quality. The goals include highest security, safe deployment, high PageSpeed scores, control, backups/restorability, and quality proof. Roles include HTML/CSS developer, WordPress developer, and CM/DevOps. Checklists cover tasks for the HTML/CSS team like image optimization and the WordPress developer like using Docker, caching, and deployment best practices. The CM/DevOps checklist addresses asset compression, caching, backups, file permissions, and image optimization.

1. Presenter: Binh Quan
Twitter: @binhqd
Github: binhqd
LinkedIn: /in/binhqd

2. GOALS
❖ Highest security
❖ Safe deployment
❖ Highest score according to Page Speed Insight
❖ Controllable
❖ Backup/Restorable
❖ Quality proof for potential customers

3. ROLES
HTML/CSS Developer
WordPress Developer
CM/DevOps
1
2
3

4. WP Development
Checklist
HTML/CSS Team
1. CSS Sprite must be used when theming
2. Concat all CSS files into single file
3. Concat all JS files into single file
4. CSS in Head, JS in Body
5. Images (jpg, png, svg) must be optimized
6. CSS must follow standard
7. Define sizes of images with name, width and height

5. ❖ Imagemin-CLI: https://www.npmjs.com/package/imagemin-cli
❖ gulp-imagemin: https://www.npmjs.com/package/gulp-imagemin
WP Development Checklist
HTML/CSS Team
Images (jpg, png, svg) must be optimized

6. ❖ Custom CSS in WP: https://codex.wordpress.org/CSS
❖ Default WordPress Generated CSS:
http://www.wpbeginner.com/wp-themes/default-wordpress-generated-css
-cheat-sheet-for-beginners/
WP Development Checklist
HTML/CSS Team
CSS must follow standard

7. WP Development Checklist
HTML/CSS Team
Define sizes of images with name, width and height
❖ Size name: string
❖ Width: Integer
❖ Height: Integer
❖ Crop: boolean

8. WP Development
Checklist
WP Developer
1. Using docker provided by Green Global company
2. Using latest version of WP (4.7)
3. Using Git for source versioning
4. Using WordPress Packagist. Don’t commit third party code
5. Follow Git Flow Process
6. Follow Code Review Checklist
7. Applying cache
8. Scoring at least 90/100 according to Google Page Speed

9. WP Development
Checklist
WP Developer
9. Grade A according to https://www.webpagetest.org
10. Grade A accroding to https://tools.pingdom.com
11. Minify all CSS, JS
12. CSS in Head, JS in Body
13. Never using 'full' size for WP thumbnail
14. Using latest WP Plugin
15. Checking favicon
16. Don't try to modify original source, plugins
17. Set WP_DEBUG = true when development and WP_DEBUG =
false for production

10. ❖ Github: https://github.com/greenglobal/wordpress-dockerize
WP Development Checklist
WordPress Developer
Using docker provided by Green Global company

11. ❖ URL: https://wpackagist.org/
WP Development Checklist
WordPress Developer
Using WordPress Packagist. Don’t commit third party code

12. ❖ Purpose:
➢ Better source control
➢ Reviewable
➢ Easier deployment
➢ Continuous Delivery
➢ Backup/Restorable
❖ Slide:
https://docs.google.com/presentation/d/18ozMxHvZStbQjbn2utRt-jcAa0z
psQ3Q5E7e4BYyrAA/pub?start=false&loop=false&delayms=3000
WP Development Checklist
WordPress Developer
Follow Git Flow Process

13. Pull Request Review Checklist
Category Task
1
Coding convention
Not use linting config provided by our company
2 Still error/warning reported by linting tool
3 Coding format not follow company's standard
4 Not follow Best Practice
5
Document & comment
Comment not in English, typo
6 Not remove unused code or comment blocks
7 Variables Variables don't have meaningful name
8 Function & Class Class names, function names don't have meaningful name
9
Coding
Not clean up debugging blocks
10 Code blocks are not divided into units, unable to write unit test
11 Double code block, code blocks are not being reuse
12 Source code not in using Package Manager and contain third party code
13 Not use constants for values that configurable
14 Coding logic Not cover enough case which may caused further bugs
15
Git Flow
Commit message not follow standard
16 Not clean unused code when creating new PR
17 Not clean up development information when creating new PR
18 Not remove critical information such as username, password or including credential keys
19 Not resolve conflict when creating new PR
20 Careless and making lost of other's code
21
Language
Content in English has typo
- Content in plural form not being cared
22 Sentence not meaningful and wrong purpose
23 Integration Not retest that cause conflict with original source branch

14. ❖ WP Fastest cache (*)
❖ W3 total cache
❖ WP Super Cache
WP Development Checklist
WordPress Developer
Applying Cache

15. WP Development Checklist
WordPress Developer
Never using 'full' size for WP thumbnail
DO
DON’T

16. WP Development Checklist
WordPress Developer
Checking favicon

17. WP Development
Checklist
CM/DevOps
# Tasks Own host (Dedicated Server or VPS) Shared Host
1 Compress assets
Compress JS and CSS. Set
header for serving gzip files
2 Caching Varnish Cache
3 Deployment Using CI and Git Using DeployBot
4 Backup
- Each deployment
- Weekly
- Each deployment
- Weekly
5
File/Folder
permission
- File/Folder mode: 755
- All files/folders: root access
- Upload folders: www-data
- .htpasswd to protect
/wp-admin folder
- Mode 400 for
wp-config.php
- Change name of
wp-config.php
- BE CAREFUL when chmod
some folders as 777. If
some folder need to be
writable, then you should
change the folder name
before chmod them as 777
6
Server Software
Requirement
Varnish/NGINX/MySQL
7 Image optimize WP Smush IT WP Smush IT

18. WP Development Checklist
CM/DevOps
Compress Assets (CSS/JS)

19. WP Development Checklist
CM/DevOps
Caching

20. WP Development Checklist
CM/DevOps
Deployment
(Dedicated server/VPS)
Using Jenkins
as
Deployment tool

21. WP Development Checklist
CM/DevOps
Deployment
(Shared host)
Using DeployBot
as
Deployment tool

22. WP Development
Checklist
Security
1. Using Git
Easy tracking changes and backdoor
2. File/Folder permission
- All folders should be 0755
- All files should be 0644
- wp-config.php should be 400
Read more:
❖ https://codex.wordpress.org/Hardening_WordPres
s
❖ https://codex.wordpress.org/Changing_File_Permis
sions

23. Question
&
Discussion